add docker to front end development process

Dockerfile

+FROM node
+
+# exec mkdir command into docker image to create a /app folder
+RUN mkdir /app
+# set the above folder to be ouw working directory
+WORKDIR /app
+
+# now copy ouw package.json and package-lock.json to our /app directory already created
+COPY package*.json /app/
+
+# exec `npm install` to install all packages dependencies neede into the docker image
+RUN npm install
+
+# copy all files that aren't ignore by dockerignore file to our /app directory
+COPY . /app
+
+# start our server application by executing `npm start`, this command can be found into package.json scripts
+CMD ["npm", "dev-webapp"]
+
+# let's expose our app for port number 3300
+#expose 3300

docker-compose.yml

+#our docker-compose version
+version: "3.3"
+
+# NOTE ======================================
+# all config vars are passing as a env vars *
+# ===========================================
+
+# let's define our services being using for our app
+services:
+  # define our services name
+  node_front_app:
+    # build key is used to build our docker based on a Dockerfile placed into the path where docker-compose lives
+    build: .
+    container_name: zbox_manager_development
+    # let's create a volume to persist data between our machine and image docker
+    # copying all files into root path to /app folder
+    volumes:
+      - ./:/app
+      - /app/node_modules/
+      - /app/dist/
+    # map our port where app will be exposed, LOCAL_MACHINE_PORT:IMAGE_DOCKER_PORT
+    ports:
+      # pass the exposed port as a env var, eg: PORT=1000 should pass to docker 1000:1000
+      - "${PORT}:${PORT}"
+    # passing throug env vars to container docker
+    environment:
+      # all config vars are passing as a env vars
+      PORT: ${PORT}
+      NODE_ENV: ${NODE_ENV}

package.json

@@ -82,7 +82,9 @@
     "run-fullmap": "webpack --progress --watch",
     "companies-service": "babel-node companies-service.js",
     "server": "nodemon server.js",
+    "dev-server": "node server.js",
     "sales-service": "babel-node sales-services.js",
-    "start-webapp": "NODE_ENV=development npm-run-all --parallel run server"
+    "start-webapp": "NODE_ENV=development npm-run-all --parallel run server",
+    "dev-webapp": "NODE_ENV=production npm-run-all --parallel build dev-server"
   }
 }

path.json

-module.exports = {"main":{"js":"/996870bundle.js"}}
\ No newline at end of file
+module.exports = {"main":{"js":"/205647bundle.js"}}
\ No newline at end of file

server.js

 // Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
 // See LICENSE.txt for license information.
 const proxy = require('express-http-proxy');
+const fs = require('fs');
+const path = require('path');
 const env = typeof process.env.NODE_ENV === 'undefined' ? 'development' : process.env.NODE_ENV;
 const configPath = env === 'development' ? './src/config/config.development.json' : './src/config/config.json';
 const config = require(configPath);
@@ -16,7 +18,18 @@ server.use(bodyParser.json());
 server.use(bodyParser.urlencoded({ extended: true }));
 server.use(express.static(__dirname + '/dist'));
 
-// server.post('/*', proxy(managerProxyURL));
+const mimes = {
+    js: 'text/javascript',
+    json: 'application/json',
+    css: 'text/css',
+    png: 'image/png',
+    jpg: 'image/jpg',
+    svg: 'image/svg+xml',
+    eot: 'application/vnd.ms-fontobject',
+    woff2: 'application/font-woff2',
+    woff: 'application/font-woff',
+    ttf: 'application/x-font-truetype'
+};
 
 server.all('/*', (req, res) => {
     const hasToBeProxied = URlsToProxy.find((endpoint) => req.url.toString().startsWith(endpoint));
@@ -25,9 +38,29 @@ server.all('/*', (req, res) => {
         return proxy(managerProxyURL)(req, res);
     }
 
+    const mime = (/\.(js|json|css|jpg|png|gif|svg|ttf|eot|woff|woff2|map)$/).exec(req.url.toString());
+    if (mime) {
+        const ext = mime[1];
+        const filename = path.join(__dirname, 'dist', req.url.toString().substring(1));
+        return sendFileContent(res, filename, mimes[ext]);
+    }
+
     res.sendFile(__dirname + '/dist/index.html');
 });
 
+function sendFileContent(response, fileName, contentType) {
+    fs.readFile(fileName, (err, data) => {
+        if (err) {
+            response.writeHead(404);
+            response.write('Not Found!');
+        } else {
+            response.writeHead(200, {'Content-Type': contentType});
+            response.write(data);
+        }
+        response.end();
+    });
+}
+
 server.listen(port, () => {
     console.log("ZBox Manager 1.5 is running at port:", port);
 });

src/config/config.json

@@ -2,7 +2,7 @@
     "debug": true,
     "dev": false,
     "enableStores": false,
-    "zimbraUrl": "/zimbra_proxy/service/admin/soap",
+    "zimbraUrl": "https://manager.zboxapp.com/zimbra_proxy/service/admin/soap",
     "zimbraProxy": "https://zimbra.zboxapp.dev:7071",
     "dnsApiUrl": "http://zimbra.zboxapp.dev:3000",
     "webMailUrl": "https://admin-mail.zboxapp.com/",

src/utils/utils.jsx

@@ -876,7 +876,8 @@ export function getHostname(nextPath) {
 }
 
 export function getConfigName() {
-    return isDevMode() ? '/config/config.development.json' : 'https://manager.zboxapp.com/ventas_api/parse/functions/getConfigManager';
+    // return isDevMode() ? '/config/config.development.json' : 'https://manager.zboxapp.com/ventas_api/parse/functions/getConfigManager';
+    return isDevMode() ? '/config/config.development.json' : '/config/config.json';
 }
 
 export function isDevMode() {