Merge pull request #74 from ZeusWPI/todo/docker

Add improved docker setup

Dockerfile.dev

@@ -0,0 +1,16 @@
+FROM node:lts-alpine as build-stage
+
+# Make the 'app' folder the current working directory
+WORKDIR /app
+
+# Add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# Copy package json
+COPY package.json /app/package.json
+
+# Install project dependencies
+RUN yarn install
+
+# Start development server
+CMD ["yarn", "dev"]

Dockerfile.prod

@@ -0,0 +1,34 @@
+############################
+# Build stage
+############################
+FROM node:lts-alpine as build-stage
+
+# Environment
+ENV NODE_ENV=production \
+    VUE_APP_BACKEND_URL=https://g2-api.zeus.gent \
+    VUE_APP_ROUTER_MODE=hash
+
+# Make the 'app' folder the current working directory
+WORKDIR /app
+
+# Copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# Install project dependencies
+RUN yarn install --production=false
+
+# Build app for production with minification
+RUN yarn build
+
+############################
+# Production stage
+############################
+FROM nginx:stable-alpine as production-stage
+
+# Copy the files from the build stage to the production stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Expose ports
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.dev.yml

@@ -0,0 +1,13 @@
+version: "3.7"
+
+services:
+    g2-frontend:
+        container_name: g2-frontend
+        build:
+            context: .
+            dockerfile: Dockerfile.dev
+        volumes:
+            - ".:/app"
+            - "/app/node_modules"
+        ports:
+            - "8080:8080"

docker-compose.prod.yml

@@ -0,0 +1,10 @@
+version: "3.7"
+
+services:
+    g2-frontend-prod:
+        container_name: g2-frontend-prod
+        build:
+            context: .
+            dockerfile: Dockerfile.prod
+        ports:
+            - "4201:80"

package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "serve": "vue-cli-service serve",
+        "dev": "vue-cli-service serve",
         "build": "vue-cli-service build --mode production",
         "lint": "vue-cli-service lint",
         "build:analyze": "yarn build --report",

src/router.ts

@@ -54,7 +54,7 @@ const routes: Array<RouteConfig> = [
 ];
 
 const router = new VueRouter({
-    mode: process.env.VUE_APP_ROUTER_MODE,
+    mode: process.env.VUE_APP_ROUTER_MODE || "history",
     base: process.env.BASE_URL,
     routes
 });

tsconfig.json

@@ -1,31 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": ["webpack-env", "vuetify"],
-    "paths": {
-      "@/*": ["src/*"]
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "strict": true,
+        "jsx": "preserve",
+        "importHelpers": true,
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strictPropertyInitialization": false,
+        "resolveJsonModule": true,
+        "allowJs": true,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "types": ["webpack-env", "vuetify"],
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
     },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": ["node_modules"]
-}
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
+    "exclude": ["node_modules"]
+}

vue.config.js

@@ -1,4 +1,16 @@
+/* eslint-disable */
 module.exports = {
-    publicPath: process.env.VUE_APP_PUBLIC_PATH ? process.env.VUE_APP_PUBLIC_PATH : "",
-    productionSourceMap: process.env.VUE_APP_SOURCEMAP ? Boolean(process.env.VUE_APP_SOURCEMAP) : false
+    publicPath: process.env.VUE_APP_PUBLIC_PATH || "",
+    productionSourceMap: process.env.VUE_APP_SOURCEMAP === "true",
+
+    /**
+     * Transpile certain dependencies from ES6 to lower ES versions
+     * for older browser support (eg: IE11, Safari 9)
+     */
+    transpileDependencies: ["vuetify"],
+
+    /**
+     * Prevent error on compilation when ESLint found errors/warnings.
+     */
+    lintOnSave: "warning"
 };