Merge branch 'feature-env_improvements' into 'master'

[feature] Improve docker configs and use web.sik.party:8000 as default backend

See merge request vtmk/web2.0-frontend!2

.dockerignore

@@ -1,2 +1,3 @@
 node_modules/
-dist/
+dist/
+.env

.env.sample

@@ -1 +1 @@
-API_URL=http://localhost:1234
+API_URL=http://web.sik.party:8000/api

configs/webpack/common.js

@@ -2,11 +2,11 @@
 const {resolve} = require("path");
 const {CheckerPlugin} = require("awesome-typescript-loader");
 const StyleLintPlugin = require("stylelint-webpack-plugin");
-const Dotenv = require("dotenv-webpack");
+const webpack = require('webpack');
 
 module.exports = function (env, argv) {
   const config = {};
-  
+
   config.resolve = {
     extensions: [".ts", ".tsx", ".js", ".jsx"]
   };
@@ -32,15 +32,15 @@ module.exports = function (env, argv) {
     ]
   });
 
+  const envVars = {};
+  Object.keys(process.env).forEach((key) => {
+    envVars[`process.env.${key}`] = JSON.stringify(process.env[key]);
+  });
+
   config.plugins = [
+    new webpack.DefinePlugin(envVars),
     new CheckerPlugin(),
     new StyleLintPlugin(),
-    new Dotenv({
-      path: "./.env.sample"
-    }),
-    new Dotenv({
-      path: "./.env"
-    }),
   ];
 
   config.performance = {

configs/webpack/dev.js

@@ -3,6 +3,7 @@ const merge = require("webpack-merge");
 const webpack = require("webpack");
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const Dotenv = require("dotenv-webpack");
 
 const commonConfig = require("./common.js");
 
@@ -24,28 +25,12 @@ module.exports = function (env, argv) {
       '.sik.party',
       '.sahkoinsinoorikilta.fi',
     ],
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8000',
-        secure: false,
-      },
-    },
-    // clientLogLevel: 'none',
-    // https: settings.dev_server.https,
-    // host: settings.dev_server.host,
-    // port: settings.dev_server.port,
-    // contentBase: output.path,
-    // public: settings.dev_server.public,
-    // publicPath: output.publicPath,
-    // compress: true,
-    // headers: { 'Access-Control-Allow-Origin': '*' },
-    // historyApiFallback: true,
-    // watchOptions: {
-    //   ignored: /node_modules/
-    // }
   };
   base.devtool = "cheap-module-eval-source-map";
   base.plugins = base.plugins.concat([
+    new Dotenv({
+      path: "./.env"
+    }),
     new FaviconsWebpackPlugin({
       logo: "./assets/img/favicon.png",
       prefix: "assets/icons/",

configs/webpack/prod.js

@@ -8,7 +8,6 @@ const nodeExternals = require('webpack-node-externals');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WebpackCdnPlugin = require('webpack-cdn-plugin');
-const webpack = require('webpack');
 
 /* NOTE: This is a list of all routes that are prerendered for production use.
    Please list all routes that contain search engine accessible content, i.e.,

docker-compose.prod.yml

@@ -6,4 +6,6 @@ services:
     image: git.sahkoinsinoorikilta.fi:4567/vtmk/web2.0-frontend-prod
     ports:
       - "3000:3000"
+    environment:
+      API_URL: ${API_URL}
     command: npm run start-prod

docker-compose.yml

@@ -6,3 +6,12 @@ services:
     image: git.sahkoinsinoorikilta.fi:4567/vtmk/web2.0-frontend
     ports:
       - "3000:3000"
+    environment:
+      API_URL: ${API_URL}
+
+  mock-backend:
+    build: .
+    image: git.sahkoinsinoorikilta.fi:4567/vtmk/web2.0-frontend-mock-backend
+    ports:
+      - "1234:1234"
+    command: npm run mock-backend

package.json

@@ -27,7 +27,7 @@
     "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
     "serve": "node dist/js/server.js",
     "start-prod": "npm run build && npm run serve",
-    "mock-backend": "json-server --watch db.json -p 1234",
+    "mock-backend": "json-server --watch db.json -H 0.0.0.0 -p 1234",
     "test": "npm-run-all lint test:e2e",
     "test:e2e": "npm-run-all -s build test:e2e:run",
     "test:e2e:run": "npm-run-all -p -r mock-backend serve test:e2e:testcafe",

src/index.tsx

@@ -5,6 +5,8 @@ import {AppContainer} from "react-hot-loader";
 import Routes from "./routes";
 import "./index.scss";
 
+console.log("Using API URL: ", process.env.API_URL);
+
 const rootEl = document.getElementById("root");
 
 render(