feat(setupProxy): add the server api to react-scripts-dev-server

README.md

@@ -10,7 +10,7 @@ Small web-client for connecting to the virtual world of [Second Life](https://se
 _**This viewer is not production ready!**_
 
 ## Contributing
-Feel free to contribute in any way you like. You can't programm? You are still needed!
+Feel free to contribute in any way you like. You can't program? You are still needed!
 
 Please read and review the documentation. You can find it in the **doc-folder**.
 
@@ -34,7 +34,7 @@ npm run build
 npm start
 ```
 
-If you want to start developing you should run `npm run dev` instead. It will build the viewer every time you make a change and also start the server.
+If you want to start developing you should run `npm run dev` instead. It will build the viewer every time you make a change, start the server and also starts pouchdb-server.
 
 ```sh
 npm run dev
@@ -48,8 +48,10 @@ To make the setup-process easier, everything needed for this project should be a
 
 command | what it does
 --------|-------------
-`npm run build` | Builds the viewer for production. The viewer is in a unusable state after cloning.
+`npm run build` | Builds the viewer for production. The viewer is in an unusable state after cloning.
 `npm run dev` | Builds the viewer. It continues to run and build the viewer when a file changes. This is the recommended build command while developing!
+`npm run start-server-dev` | Runs the server in development. Intended to be run with `npm run dev-server`.
+`npm run dev-server` | Like `npm run dev` but configured to proxy to the server which runs on `npm start` or `npm run start-server-dev`. Intended to be used for developing the **server** _together_ with the **client**.
 `npm test` | Runs all tests. Please run this before committing!
 `npm run test-coverage` | Runs all test and outputs a test coverage report. And will open the report.
 `npm run test:docs` | Runs [textlint](https://textlint.github.io/) and [alex.js](https://alexjs.com/) for catching misspelled, insensitive, inconsiderate writing in the documentation.

package.json

@@ -10,10 +10,10 @@
     "build:messages": "node ./tools/createMessageTemplate",
     "build:style": "cross-env NODE_ENV=production postcss src/tailwind.css -o src/styles.css",
     "dev": "npm-run-all -p dev:*",
+    "dev-server": "cross-env SERVER=debug npm-run-all -p dev:*",
     "predev:app": "npm run build:messages",
     "dev:app": "react-scripts start",
     "dev:db": "pouchdb-server --config ./config.json",
-    "dev:server": "cross-env NODE_ENV=development node server/index.js",
     "dev:style": "postcss src/tailwind.css -o src/styles.css --watch",
     "fix:docs": "textlint --fix README.md ./*/*.md ./src/*/*.md",
     "fix:style": "standard --fix",
@@ -29,6 +29,7 @@
     "test:app": "react-scripts test --env=jsdom",
     "test": "npm-run-all -s test:standard test:docs test:app",
     "test-coverage": "react-scripts test --env=jsdom --coverage && open-cli ./coverage/lcov-report/index.html",
+    "start-server-dev": "node server/index.js",
     "start": "cross-env NODE_ENV=production node server/index.js"
   },
   "repository": {

server/README.md

@@ -23,3 +23,20 @@ File | Description
 [`gridSession.js`](./gridSession.js) | Utility function to store and validate active grid sessions.
 [`bridge.js`](./bridge.js) | Is the UDP-bridge between client and sim. The client connects with a Web-Socket to it.
 [`httpProxy.js`](./httpProxy.js) | A proxy for all HTTP-requests from the client to a grid.
+
+## Development
+
+In normal development (`npm run dev`), the server-components are loaded into the create-react-app-dev-server ([src/setupProxy.js](../src/setupProxy.js)).
+
+When developing the server, run `npm run dev-server`. It is a variant of `npm run dev`, that proxies API-requests to a separate running server.
+Then also run the *server* in development with `npm run start-server-dev`.
+
+## PouchDB-Server
+
+PouchDB-Server is accessible under [http://127.0.0.1:5984/_utils](http://127.0.0.1:5984/_utils).
+
+If you want to use CouchDB, then all scripts must be run separately:
+- `npm run dev:app` for building the client.
+  - If you need a separate server, then `cross-env SERVER=debug npm run dev:app`.
+- `npm run dev:style` for building TailwindCSS.
+- `npm run start-server-dev` for the server.

src/setupProxy.js

@@ -2,7 +2,25 @@
 
 const { createProxyMiddleware } = require('http-proxy-middleware')
 
-module.exports = proxySetup
+module.exports = process.env.SERVER === 'debug'
+  ? proxySetup
+  : serverAndProxySetup
+
+/**
+ * Setup a server and proxy.
+ * @param {import('express').Application} app  Express App.
+ */
+function serverAndProxySetup (app) {
+  const webSocketBridge = require('../server/bridge')
+  app.use(webSocketBridge.createWebSocketCreationRoute('/api/bridge'))
+
+  const gridSession = require('../server/gridSession')
+  gridSession(app)
+
+  app.use('/api/session', require('../server/account'))
+  app.use('/api/login', require('../server/login'))
+  app.use('/api/proxy', require('../server/httpProxy'))
+}
 
 /**
  * Setup the proxy.