Serve project over HTTPS in dev mode

Author: PatrickSachs

.env

@@ -0,0 +1,2 @@
+SERVICE_WORKER=false
+BROWSERSYNC=false

.env.dev

@@ -0,0 +1 @@
+BROWSERSYNC=true

.env.prod

@@ -0,0 +1 @@
+SERVICE_WORKER=true

.gitignore

@@ -1,2 +1,5 @@
 dist
 node_modules
+ssl/key.pem
+ssl/cert.pem
+.env.local

package-lock.json

@@ -35,6 +35,7 @@
     "browser-sync-webpack-plugin": "^2.2.2",
     "copy-webpack-plugin": "^5.0.1",
     "css-loader": "^2.1.0",
+    "dotenv": "^6.2.0",
     "style-loader": "^0.23.1",
     "ts-loader": "^5.3.3",
     "typescript": "^3.2.4",

package.json

@@ -13,6 +13,8 @@ declare global {
     const process: {
         readonly env: {
             readonly NODE_ENV: "production" | "development"
+            readonly SERVICE_WORKER: "true" | "false";
+            readonly BROWSERSYNC: "true" | "false";
         }
     }
 

src/d/slow-tree.ts

@@ -1,6 +1,6 @@
 // Check that service workers are registered
 if ('serviceWorker' in navigator) {
-    if (process.env.NODE_ENV === "production") {
+    if (process.env.SERVICE_WORKER === "true") {
         // Use the window load event to keep the page load performant
         window.addEventListener('load', () => {
             navigator.serviceWorker.register('/serviceworker.js').then(registration => {

src/register-serviceworker.ts

@@ -0,0 +1,7 @@
+# Certificates
+
+Generate SSL certificates using this tool: https://github.com/FiloSottile/mkcert/releases
+
+Place your certificate as `cert.pem` & private key as `key.pem`.
+
+Make sure to use the specified name when connecting to your server.

ssl/README.md

@@ -1,4 +1,5 @@
 const path = require('path');
+const dotenv = require("dotenv");
 const webpack = require('webpack');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
@@ -7,7 +8,12 @@ const CleanPlugin = require("clean-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
 
 const isProduction = process.env.NODE_ENV === "production";
-console.log("Running in production mode?", isProduction);
+
+dotenv.config({ path: ".env.local" });
+dotenv.config({ path: isProduction ? ".env.prod" : ".env.dev" });
+dotenv.config({ path: ".env" });
+
+console.log("Enviroment variables are:", process.env);
 
 // ===============================================
 // MISC SETTINGS
@@ -23,26 +29,34 @@ plugins.push(new VueLoaderPlugin());
 plugins.push(new webpack.DefinePlugin({
   CANVAS_RENDERER: JSON.stringify(true),
   WEBGL_RENDERER: JSON.stringify(true),
-  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+  'process.env.SERVICE_WORKER': JSON.stringify(process.env.SERVICE_WORKER),
+  'process.env.BROWSERSYNC': JSON.stringify(process.env.BROWSERSYNC)
 }));
 plugins.push(new CopyPlugin(["index.html", "manifest.json", { from: "assets", to: "assets" }]));
-if (!isProduction) {
+if (process.env.BROWSERSYNC === "true") {
   plugins.push(new BrowserSyncPlugin({
     host: process.env.IP || 'localhost',
     port: process.env.PORT || 3000,
     server: {
       baseDir: ['./dist']
-    }
+    },
+    https: {
+      key: "ssl/key.pem",
+      cert: "ssl/cert.pem"
+    },
+    open: false
   }));
-}
-if (isProduction) {
+} else {
   plugins.push(new CleanPlugin());
+}
+if (process.env.SERVICE_WORKER === "true") {
   plugins.push(new WorkboxPlugin.GenerateSW({
     swDest: "serviceworker.js",
     clientsClaim: true,
     importWorkboxFrom: "local",
     skipWaiting: true
-  }))
+  }));
 }
 
 module.exports = {