A small app for collecting drawings in real time. Runs on a small express server that connects sources (where to draw) and destinations (where to display) via websockets.
## Setup
Clone the repo , move to the directory and install the dependencies using your favourite package manager ([npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), etc.).
Note that to run the app you will need to install [Node.js](https://nodejs.org/en/), either on your machine or on a VPS.
For example with npm:
```
git clone https://git.xpub.nl/kamo/drw
cd drw
npm install
```
To start the application run
`node server.js`
or in alternative
`npm start`
Then open your browser to `localhost:3000` and there you can draw.
The app is meant to be open-end, meaning that the destination of the drawing is up to you! (ah ah! less work for us). Originally it was coupled with [vvvv](https://visualprogramming.net/), but it can be implemented with any platform supporting the websocket protocol.
Eventually you want to put online your drawing app.
To be able to use this app on the [Soupboat](hub.xpub.nl/soupboat) (or other servers connected in the [hub.xpub.nl](hub.xpub.nl) ecosystem) some additional configurations are needed.
Note that the following details are tailored to the particular case of our server. Other instances could require different setups.
This is one possible workflow.
Clone the repo and install the requirements as you would do locally.
There are a couple of environmental variables to set: one refers to the port where to mount the application, the other is related to the prefix to add to the application urls.
The port is where Express will mount the application. This is by default set to 3000, but in this case we need to pick a port not already in use.
When deciding which port to use, check your NGINX configurations file (see next section), or simply test if the port you want is already in use.
`sudo lsof -i:3000`
For example, will print the process currently using the port 3000. If nothing is printed out, then the port is available.
Read more about it here: [Check if port is in use Linux](https://www.cyberciti.biz/faq/unix-linux-check-if-port-is-in-use-command/)
The prefix variable is a way to deal with the _hub.xpub.nl_ ecosystem. Here our base url is `hub.xpub.nl`. Notice that is missing the `/soupboat/drw/` part.
The deal of the prefix is to leave out from the code these parts of the address, that otherwise should be repeated in every url and navigation element of the app.
This also make the code a bit more portable, meaning that you can test it locally and online without messing around with the urls in the code.
The app is written in order to provide some default values if an `.env` file is not found, and that's why it works locally even without specifying any environmental variables.
### NGINX Configuration
To make it works behind a reverse-proxy open the NGINX configuration file
The very same name, as well as eventual prefixes, need to be specified in the line of _proxy_pass_.
The port, in this example set to _3000_, it's the port where Express is mounting the application. By default is 3000, but you can edit it according to the configurations of the express server.