Merge pull request #23 from turniere/ticket/TURNIERE-166

Create Dockerfile: Ticket/turniere 166

.dockerignore

@@ -0,0 +1,6 @@
+node_modules/**
+.next/**
+.idea/**
+README.md
+.hound.yml
+.gitignore

Dockerfile

@@ -0,0 +1,19 @@
+### STAGE 1: Build ###
+FROM node:8-alpine as build
+WORKDIR /srv
+COPY js /srv/js
+COPY pages /srv/pages
+COPY static /srv/static
+COPY next.config.js package.json package-lock.json server.js style.css yarn.lock /srv/
+RUN yarn install
+RUN yarn build
+RUN yarn cache clean
+
+### STAGE 2: Productive Container ###
+FROM alpine
+WORKDIR /srv
+COPY --from=build /srv /srv
+RUN apk --no-cache add yarn && rm -rf /var/cache/apk/*
+EXPOSE 80
+ENV TURNIERE_API_URL=https://api.turnie.re
+CMD yarn start

README.md

@@ -1,10 +1,11 @@
 # turniere-frontend
 
-## Prerequisites
+## Development Setup
+### Prerequisites
 
 You'll need Node.js and a package manager for Node.js (like npm or Yarn; We recommend Yarn) installed on your system in order to run this program. You can see how to install Node.js [here](https://nodejs.org/en/).
 
-## Setup the project
+### Setup the Project
 
 First of course you'll need to clone this repository:
 
@@ -18,8 +19,18 @@ Afterwards you'll have to install the used libraries using following command:
 $ yarn install
 ```
 
-Afterwards you may simply run the developer version of the project:
+Then you can run the development server by executing:
+```
+$ TURNIERE_API_URL=https://api.example.com yarn run dev
+```
+The environment variable `TURNIERE_API_URL` must contain an valid url to a [turniere backend server](https://github.com/turniere/turniere-backend).
+ 
+In production environment the server runs on port 80, otherwise on port 3000.
+
+## Production Setup: Build the Docker Container
 
 ```
-$ yarn run dev
+$ docker build -t turniere-frontend .
 ```
+
+The built container exposes port 80.

js/api.js

@@ -8,9 +8,12 @@ import thunkMiddleware         from 'redux-thunk';
 
 import { errorMessages }       from './constants';
 
-const axios = require('axios');
+import getConfig from 'next/config';
+const { publicRuntimeConfig } = getConfig();
 
-const api_url = 'https://api.turnie.re';
+const api_url = publicRuntimeConfig.api_url;
+
+const axios = require('axios');
 
 const actiontypes_userinfo = {
     'REGISTER'                     : 'REGISTER',
@@ -20,7 +23,7 @@ const actiontypes_userinfo = {
     'LOGIN'                        : 'LOGIN',
     'LOGIN_RESULT_SUCCESS'         : 'LOGIN_RESULT_SUCCESS',
     'LOGIN_RESULT_ERROR'           : 'LOGIN_RESULT_ERROR',
- 
+
     'LOGOUT'                       : 'LOGOUT',
 
     'VERIFY_CREDENTIALS'           : 'VERIFY_CREDENTIALS',

next.config.js

@@ -1,3 +1,6 @@
 
 const withCSS = require('@zeit/next-css');
-module.exports = withCSS();
+module.exports = withCSS();
+module.exports.publicRuntimeConfig = {
+    api_url: process.env.TURNIERE_API_URL
+};

server.js

@@ -8,7 +8,7 @@ const handle = app.getRequestHandler();
 app.prepare()
     .then(() => {
         const server = express();
-        
+
         server.get('/t/:code', (req, res) => {
             const actualPage = '/tournament';
             const queryParam = { code: req.params.code };
@@ -31,7 +31,7 @@ app.prepare()
             return handle(req, res);
         });
 
-        server.listen(3000, (err) => {
+        server.listen(dev ? 3000 : 80, (err) => {
             if (err) throw err;
         });
     })