chore(frontend): docker can now use webpack-dev-server

Signed-off-by: Jonathan <theflametrooper@gmail.com>

.env.template

@@ -8,4 +8,4 @@ REDIS_PORT=6379
 
 COMPOSE_PROJECT_NAME=musare
 
-FRONTEND_YARN_SCRIPT=dev-docker
+FRONTEND_MODE=dev

.gitignore

@@ -9,7 +9,7 @@ startRedis.cmd
 startMongo.cmd
 .database
 .redis
-dump.rdb
+*.rdb
 npm-debug.log
 
 # Back End

README.md

@@ -81,8 +81,8 @@ Once you've installed the required tools:
 
    Values:  
    The `serverDomain` should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.
-   The `frontendDomain` should be the url where the frontend will be accessible from, usually `http://localhost` for non-Docker.
-   The `frontendPort` should be the port where the frontend will be accessible from, should always be port `80` for Docker, and is recommended for non-Docker.
+   The `frontendDomain` should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker.
+   The `frontendPort` should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker.
    The `recaptcha.key` value can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).
    The `cookie.domain` value should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.
    The `cookie.secure` value should be `true` for SSL connections, and `false` for normal http connections.
@@ -97,9 +97,9 @@ Now you have different paths here.
 _Configuration_
 
 To configure docker simply `cp .env.template .env` and configure the .env file to match your settings in `backend/config/default.json`.  
-The configurable ports will be how you access the services on your machine, or what ports you will need to specify in your nginx files when using proxy_pass.  
+The configurable ports will be how you access the services on your machine, or what ports you will need to specify in your nginx files when using proxy_pass. 
 `COMPOSE_PROJECT_NAME` should be a unique name for this installation, especially if you have multiple instances of Musare on the same machine.
-`FRONTEND_YARN_SCRIPT` should be `dev-docker` for development, `build` for production.
+`FRONTEND_MODE` should be either `dev` or `prod` (self-explanatory).
 
 1. Build the backend and frontend Docker images (from the main folder)
 

docker-compose.yml

@@ -17,7 +17,7 @@ services:
     volumes:
     - ./frontend:/opt/app
     environment:
-    - FRONTEND_YARN_SCRIPT=${FRONTEND_YARN_SCRIPT}
+    - FRONTEND_MODE=${FRONTEND_MODE}
   mongo:
     image: mongo:4.0
     ports:

frontend/Dockerfile

@@ -7,6 +7,7 @@ RUN npm install -g yarn
 
 RUN yarn global add webpack@4.35.3
 RUN yarn global add webpack-cli@3.3.5
+RUN yarn global add webpack-dev-server@3.7.2
 
 RUN mkdir -p /opt
 WORKDIR /opt
@@ -16,4 +17,7 @@ RUN yarn install
 
 RUN mkdir -p /run/nginx
 
-CMD nginx -c /opt/app/nginx.conf; cd /opt/app; yarn run $FRONTEND_YARN_SCRIPT
+COPY bootstrap.sh /opt/
+RUN chmod u+x /opt/bootstrap.sh
+
+CMD bash /opt/bootstrap.sh

frontend/bootstrap.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+if [ "$FRONTEND_MODE" == "prod" ] ; then
+	cd /opt/app ; yarn run $FRONTEND_MODE
+	nginx -c /opt/app/$FRONTEND_MODE.nginx.conf -g "daemon off;"
+elif [ "$FRONTEND_MODE" == "dev" ] ; then
+	nginx -c /opt/app/$FRONTEND_MODE.nginx.conf
+	cd /opt/app; yarn run $FRONTEND_MODE
+fi

frontend/dev.nginx.conf

@@ -0,0 +1,33 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        off;
+
+    keepalive_timeout  65;
+
+    server {
+        listen       80;
+        server_name  localhost;
+
+        location / {
+            proxy_set_header X-Real-IP  $remote_addr;
+			proxy_set_header X-Forwarded-For $remote_addr;
+			proxy_set_header Host $host;
+
+			proxy_pass http://localhost:81; 
+
+			proxy_redirect off;
+
+			proxy_http_version 1.1;
+			proxy_set_header Upgrade $http_upgrade;
+			proxy_set_header Connection "upgrade";
+        }
+    }
+}

frontend/dist/config/template.json

@@ -15,7 +15,7 @@
 		"socialLinks": {
 			"github": "https://github.com/Musare/MusareNode",
 			"twitter": "https://twitter.com/MusareApp",
-			"facebook": "https://www.facebook.com/MusareMusic/",
+			"facebook": "https://facebook.com/MusareMusic/",
 			"discord": "https://discord.gg/Y5NxYGP"
 		}
 	}

frontend/package.json

@@ -8,8 +8,7 @@
 	"scripts": {
 		"lint": "npx eslint . --ext .js,.vue",
 		"dev": "webpack-dev-server --config webpack.dev.js",
-		"dev-docker": "webpack --config webpack.dev-docker.js",
-		"build": "webpack --config webpack.prod.js"
+		"prod": "webpack --config webpack.prod.js"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.5.4",

frontend/nginx.conf → frontend/prod.nginx.conf

@@ -14,7 +14,7 @@ http {
 
     server {
         listen       80;
-        server_name  localhost;
+        server_name _;
 
         location / {
             try_files $uri $uri/ /index.html;

frontend/webpack.common.js

@@ -6,7 +6,6 @@ module.exports = {
 	entry: "./main.js",
 	output: {
 		path: __dirname + "/dist/build/",
-		publicPath: "/",
 		filename: "[name].[hash].js"
 	},
 	plugins: [
@@ -49,10 +48,5 @@ module.exports = {
 				use: ["vue-style-loader", "css-loader", "sass-loader"]
 			}
 		]
-	},
-	resolve: {
-		alias: {
-			vue: "vue/dist/vue.js"
-		}
 	}
 };

frontend/webpack.dev-docker.js

@@ -1,11 +0,0 @@
-const merge = require("webpack-merge");
-const common = require("./webpack.common.js");
-
-module.exports = merge(common, {
-	mode: "development",
-	devtool: "inline-source-map",
-	watch: true,
-	output: {
-		publicPath: "/build/"
-	}
-});

frontend/webpack.dev.js

@@ -7,12 +7,25 @@ const common = require("./webpack.common.js");
 module.exports = merge(common, {
 	mode: "development",
 	devtool: "inline-source-map",
+	output: {
+		publicPath: "/"
+	},
+	resolve: {
+		alias: {
+			vue: "vue/dist/vue.js"
+		}
+	},
 	devServer: {
 		contentBase: "./dist/",
 		historyApiFallback: true,
 		hot: true,
 		port: config.get("frontendPort"),
 		public: config.get("frontendDomain"),
+		watchOptions: {
+			aggregateTimeout: 300,
+			poll: 1000
+		},
+		host: "0.0.0.0",
 		disableHostCheck: true
 	}
 });

frontend/webpack.prod.js

@@ -3,5 +3,13 @@ const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
 	mode: "production",
-	devtool: "source-map"
+	devtool: "source-map",
+	output: {
+		publicPath: "/build/"
+	},
+	resolve: {
+		alias: {
+			vue: "vue/dist/vue.min.js"
+		}
+	}
 });