diff --git a/README.md b/README.md index 61c7e74..676c4bf 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ npm start The list of available APIs can be viewed on localhost:8000/api by default but this can be customised - see later. -A list of all endpoints can be viewed on http://localhost:8000/. +A list of all endpoints can be viewed on the mock server dashboard at http://localhost:8000/. The project has been set-up with demo endpoints that can be removed or modified as needed. diff --git a/cypress/e2e/server-page-spec.cy.ts b/cypress/e2e/server-page-spec.cy.ts index 8391716..13e5fe9 100644 --- a/cypress/e2e/server-page-spec.cy.ts +++ b/cypress/e2e/server-page-spec.cy.ts @@ -1,35 +1,35 @@ describe('Server page contains expected information', () => { - it('passes', () => { - const expectedEndpoints = [ - '/api/bikes', - '/api/cats', - '/api/images', - '/api/json', - '/api/lambda', - '/api/markdown', - '/api/posts', - '/api/users', - '/api/videos', - '/api/error', - ]; - cy.visit('/'); - cy.get('h1').contains('Running'); + it('passes', () => { + const expectedEndpoints = [ + '/api/bikes', + '/api/cats', + '/api/images', + '/api/json', + '/api/lambda', + '/api/markdown', + '/api/posts', + '/api/users', + '/api/videos', + '/api/error', + ]; + cy.visit('/'); + cy.get('[cy-data="server_status"]').contains('Running'); - cy.get('h3').contains('Server Address'); - cy.get('h3').contains('Server Port'); - cy.get('h3').contains('Server URL Prefix'); - cy.get('h3').contains('API endpoints'); + cy.get('[cy-data="server_address"]').contains('Server Address'); + cy.get('[cy-data="server_port"]').contains('Server Port'); + cy.get('[cy-data="server_prefix"]').contains('Server URL Prefix'); + cy.get('[cy-data="server_label"]').contains('API endpoints*'); - cy.get('[cy-data="server_address"]').contains('localhost'); - cy.get('[cy-data="server_port"]').contains('8000'); - cy.get('[cy-data="url_prefix"]').contains('api'); + cy.get('[cy-data="server_address"]').contains('localhost'); + cy.get('[cy-data="server_port"]').contains('8000'); + cy.get('[cy-data="url_prefix"]').contains('api'); - const endpoints = cy.get('[cy-data="endpoint"]'); + const endpoints = cy.get('[cy-data="endpoint"]'); - endpoints.should('have.length', expectedEndpoints.length); + endpoints.should('have.length', expectedEndpoints.length); - endpoints.each((endpoint) => { - expect(expectedEndpoints).to.include(endpoint.text()); - }); - }); + endpoints.each((endpoint) => { + expect(expectedEndpoints).to.include(endpoint.text()); + }); + }); }); diff --git a/images/image.png b/images/image.png index f37bdf8..7cfc1e2 100644 Binary files a/images/image.png and b/images/image.png differ diff --git a/images/logs.png b/images/logs.png index ffbdb45..8ca2f91 100644 Binary files a/images/logs.png and b/images/logs.png differ diff --git a/src/utilities/log-page.ts b/src/utilities/log-page.ts index aacf026..65da0f9 100644 --- a/src/utilities/log-page.ts +++ b/src/utilities/log-page.ts @@ -28,10 +28,10 @@ const createHtml = () => {
API Request Log
- +

API Requests Made

File can be viewed in /src/logs folder in container or local machine

-
LOG_REQUESTS env var must be set to 'ON' to log requests
+
LOG_REQUESTS env var must be set to 'ON' to log requests
AND the logger function must be implemented in the api.ts file for that endpoint
${prettyPrintJson.toHtml(JSON.parse(readLogs()), { indent: 4, lineNumbers: true })}
@@ -69,7 +69,7 @@ ol.json-lines >li::marker { font-family: system-ui, sans-serif; font-weight: nor /* Dark Mode */ - .json-container { background-color: #00200B; } + .json-container { background-color: #20232a; } .json-key { color: indianred; } .json-string { color: khaki} .json-number { color: deepskyblue; } @@ -81,8 +81,8 @@ ol.json-lines >li::marker { font-family: system-ui, sans-serif; font-weight: nor a.json-link:hover { color: violet; } a.json-link:active { color: slategray; } ol.json-lines >li::marker { color: silver; } - ol.json-lines >li:nth-child(odd) { background-color: #293829; } - ol.json-lines >li:nth-child(even) { background-color: #354135; } + ol.json-lines >li:nth-child(odd) { background-color:rgb(67, 67, 67); } + ol.json-lines >li:nth-child(even) { background-color:rgb(40, 40, 40); } ol.json-lines >li:hover { background-color: dimgray; } diff --git a/src/utilities/server-page.ts b/src/utilities/server-page.ts index 9216017..32a2c53 100644 --- a/src/utilities/server-page.ts +++ b/src/utilities/server-page.ts @@ -2,99 +2,515 @@ import 'dotenv/config'; import { http, HttpResponse } from 'msw'; import { env, prefix } from './env'; -const homePage = (apiPaths: string[]) => { - const htmlString = ` - - - -
-

Mock Server: Running

-
- -
-

Server Address: localhost

-

Server Port: ${env?.SERVER_PORT?.toUpperCase() ?? 'NONE'}

-

Server URL Prefix: ${env?.USE_API_URL_PREFIX?.toLowerCase() ?? 'NONE'}

- -

API endpoints*:

-
- - ${apiPaths.map((path) => '

/' + prefix + path + '

').join('')} - -
- -

Logs URL: localhost:${process.env?.SERVER_PORT}/logs

- -

* Add new api endpoints to the api folder.
For media endpoints include the media name in the url E.g /images/placeholder.png

- - -
- - - +
+
+

Mock Server

+
+ + + + + Checking... + + +
+
    +
  • Server Address:localhost
    • +
  • Server Port:${env?.SERVER_PORT?.toUpperCase() ?? 'NONE'}
    • +
  • Server URL Prefix:${env?.USE_API_URL_PREFIX?.toLowerCase() ?? 'NONE'}
    • +
+
+
+
API endpoints*
+
+ ${apiPaths.map((path) => `/${prefix}${path}`).join('')} +
+
+
+
Logs URL:  localhost:${process.env?.SERVER_PORT}/logs
+ +
+
+ * Add new API endpoints to the api folder.
+ For media endpoints, include the media name in the URL (e.g., /images/placeholder.png). +
+ +
+
+ +

Connect to MCP Server

+

Copy and paste the following configuration into your client (Claude, Windsurf, Cursor, etc.):

+ 
{
+  "mcpServers": {
+    "LocalMockAPIServer": {
+      "command": "node",
+      "args": [
+        "<absolute-path-to-your-project>/src/mcp/server.js"
+      ]
+    }
+  }
+}
+ + +

Replace <absolute-path-to-your-project> with the full path to your project directory and remember to use the path format suitable for your system (E.g \\ on Windows).

+
+
+
+ + + `; - - return [ - http.get(`/`, () => { - return new HttpResponse(htmlString, { - status: 200, - headers: { - 'Content-Type': 'text/html', - }, - }); - }), - ]; -}; + return new HttpResponse(htmlString, { + headers: { 'Content-Type': 'text/html' }, + }); + }), + http.get(`/ping`, () => { + return new HttpResponse(null, { status: 200 }); + }), +]; export default homePage;