Dockerfile improvements

.dockerignore

@@ -1,3 +1,6 @@
+.git
+.dockerignore
+.gitignore
 Dockerfile
 README.md
 LICENSE

Dockerfile

@@ -1,15 +1,19 @@
-# multistage - builder image
-FROM node:alpine AS builder
+ARG ALPINE_VERSION=3.12
+ARG NODE_VERSION=15
+ARG NGINX_VERSION=1.19.6
+
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS builder
 WORKDIR /app/Lightspeed-react
-COPY . .
+COPY package.json package-lock.json ./
 RUN npm install
-
-# configure ip, hardcoded to webrtc container address (8080) for now
-RUN sed -i "s|stream.gud.software|localhost|g" public/config.json
-
-# build it
+COPY . .
 RUN npm run build
 
-# runtime image
-FROM nginx:stable
-COPY --from=builder /app/Lightspeed-react/build /usr/share/nginx/html
+
+FROM nginx:${NGINX_VERSION}-alpine
+ENV WEBSOCKET_HOST=localhost
+ENV WEBSOCKET_PORT=8080
+EXPOSE 80/tcp
+COPY --chown=1000 docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh
+COPY --chown=1000 docker/config.json.template /config.json.template
+COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html

README.md

@@ -75,13 +75,40 @@ This is one of three components required for Project Lightspeed. Project Lightsp
 
 ## Getting Started
 
+## Setup
+
+### Docker
+
+1. Install [git](https://git-scm.com/downloads)
+1. Build the image from the master branch with:
+
+    ```sh
+    docker build -t grvydev/lightspeed-react https://github.com/GRVYDEV/Lightspeed-react.git
+    ```
+
+1. Run it with
+
+    ```sh
+    docker run -it --rm \
+      -p 8000:80/tcp \
+      -e WEBSOCKET_HOST=localhost \
+      -e WEBSOCKET_PORT=8080 \
+      grvydev/lightspeed-react
+    ```
+
+    Where your websocket host from the browser/client perspective is accessible on `localhost:8080`.
+
+1. You can now access it at [localhost:8000](http://localhost:8000).
+
+### Locally
+
 To get a local copy up and running follow these simple steps.
 
-### Prerequisites
+#### Prerequisites
 
 In order to run this npm is required. Installation instructions can be found <a href="https://www.rust-lang.org/tools/https://www.npmjs.com/get-npm">here</a>. Npm Serve is required as well if you want to host this on your machine. That can be found <a href="https://www.npmjs.com/package/serve">here</a>
 
-### Installation
+#### Installation
 
 ```sh
 git clone https://github.com/GRVYDEV/Lightspeed-react.git
@@ -91,8 +118,10 @@ npm install
 
 <!-- USAGE EXAMPLES -->
 
-## Usage
+#### Usage
+
 First build the frontend
+
 ```sh
 cd Lightspeed-react
 npm run build
@@ -101,6 +130,7 @@ npm run build
 You should then configure the websocket URL in `config.json` in the `build` directory.
 
 Now you can host the static site locally, by using `serve` for example
+
 ```sh
 serve -s build -l 80
 ```

docker/config.json.template

@@ -0,0 +1,3 @@
+{
+  "wsUrl": "ws://${WEBSOCKET_HOST}:${WEBSOCKET_PORT}/websocket"
+}

docker/entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+envsubst < /config.json.template > "/usr/share/nginx/html/config.json"