AR-473: Added docker setup

Author: tuj

.env

@@ -0,0 +1,2 @@
+COMPOSE_PROJECT_NAME=display-client
+COMPOSE_DOMAIN=display-client.local.itkdev.dk

.github/workflows/pr.yml

@@ -18,19 +18,17 @@ jobs:
             ${{ runner.os }}-build-${{ env.cache-name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
-      - name: Run install and build assets
-        run: |
-          npm install
-          npm run build
+      - name: install
+        run: npm install
+      - name: Build production assets
+        run: npm run build
 
   frontend-coding-standards:
     name: Frontend coding standards
     runs-on: ubuntu-latest
+    container: node:14
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
       - name: Cache node modules
         uses: actions/cache@v2
         env:
@@ -50,11 +48,9 @@ jobs:
   frontend-tests:
     name: Frontend tests
     runs-on: ubuntu-latest
+    container: node:14
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
       - name: Cache node modules
         uses: actions/cache@v2
         env:

README.md

@@ -1,44 +1,39 @@
 # DisplayClient
-A display client for OS2Display ver. 2, currently a work in progress.
 
-Currently, this is a create-react-app.
-
-## Docker
+The display client for OS2Display ver. 2, currently a work in progress.
 
-@TODO: Provide a docker setup, and modify readme to use docker instead.
-
-## Install
+Currently, this is a create-react-app.
 
-Install the node modules using npm.
+## Docker development setup
 
 ```
-npm install
-```
-## Start
+# Up the containers
+docker-compose up -d
 
-Runs the app in the development mode.
-Open http://localhost:3000 to view it in the browser.
+# Install npm packages
+docker-compose run node bash -c 'npm install'
 
-```
-npm start
-```
+# Restart node
+docker-compose restart node
 
-## Build
-Builds the app for production to the build folder.
+# Follow the node logs to see when the code is compiled.
+docker-compose logs -f node
+```
 
-@TODO: Add production build instructions.
+The display client can opened at `http://display-client.local.itkdev.dk:3001/`.
 
+The code is compiled when changed.
 
 ## Coding standards
 
 For code analysis we use the [Airbnb style guide for javascript](https://github.com/airbnb/javascript) and for formatting we use [Prettier](https://github.com/prettier/prettier).
 
 ```
 # Check for coding standards issues
-npm run check-coding-standards
+docker-compose exec node bash -c 'npm run check-coding-standards'
 
 # Auto-correct coding standards issues
-npm run apply-coding-standards
+docker-compose exec node bash -c 'npm run apply-coding-standards'
 ```
 
 ## Testing with cypress
@@ -47,16 +42,23 @@ We use [cypress](https://www.cypress.io/) for testing.
 
 
 ```
-npm run test
+docker-compose exec node bash -c 'npm run test'
 ```
 
 Or spinning up electron:
 
 ```
-test-ui
+docker-compose exec node bash -c 'test-ui'
 ```
 
 ## Debug bar
 
 The frontend has a debug bar, that allows for loading fixtures into the react app.
 See the `public/fixtures` for the data fixtures.
+
+## Build for production
+
+Builds the app for production to the build folder.
+
+@TODO: Add production build instructions.
+

docker-compose.yml

@@ -10,12 +10,13 @@ networks:
 services:
   node:
     image: node:14
+    command: npm start
     networks:
       - app
       - frontend
     working_dir: /app
     ports:
-      - '80'
+      - '3001:3000'
     environment:
       - NODE_ENV=development
     volumes: