diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..1e7b011 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,6 @@ +node_modules/** +.next/** +.idea/** +README.md +.hound.yml +.gitignore diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..bffce91 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/README.md b/README.md index fde2c49..1ac9816 100644 --- a/README.md +++ b/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. diff --git a/js/api.js b/js/api.js index fba72d9..d1222e9 100644 --- a/js/api.js +++ b/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', diff --git a/next.config.js b/next.config.js index f332296..bc76b7e 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,6 @@ const withCSS = require('@zeit/next-css'); -module.exports = withCSS(); \ No newline at end of file +module.exports = withCSS(); +module.exports.publicRuntimeConfig = { + api_url: process.env.TURNIERE_API_URL +}; diff --git a/server.js b/server.js index 188d268..7bcbecc 100644 --- a/server.js +++ b/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; }); })