Minify CSS and send socket-io requests along chat path

damishshah · Jan 25, 2020 · b9966fe · b9966fe
1 parent b7dddf9
commit b9966fe
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,9 @@ https://github.com/damishshah/videochat-infrastructure
 
 ### Things to do
 
-1. Write tests
+2. Write tests
+3. Setup CD
+4. Decouple chat application from main webserver
 
 ### Done
 
@@ -19,4 +21,6 @@ https://github.com/damishshah/videochat-infrastructure
 Operational Tasks:
 1. Set up js minification/bundling
 2. Setup docker
-3. Setup automated infrastructure package
+3. Setup automated infrastructure package
+4. Minify CSS
+5. Setup socket.io on chat path to prevent collision with other apps
diff --git a/chat/index.html b/chat/index.html
@@ -4,7 +4,7 @@
     <title>Video Chat</title>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="dist/client.css" />
   </head>
 
   <body>

diff --git a/js/main.js b/js/main.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import getStunServerList from './stunservers.js';
+import '../css/main.css';
 
 var isInitiator = false;
 var isStarted = false;
@@ -42,7 +43,7 @@ if (!room) {
 
 // --- Handle socket setup ---
 
-var socket = io.connect();
+var socket = io.connect({path: '/chat/socket.io'});
 
 socket.on('created', function(room, clientId) {
   console.log('Created room', room, '- my client ID is', clientId);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,10 +8,11 @@
   },
   "private": true,
   "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.4.2",
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "terser-webpack-plugin": "^2.3.2",
-    "clean-webpack-plugin": "^3.0.0",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-merge": "^4.2.2"

diff --git a/src/server.js b/src/server.js
@@ -3,8 +3,7 @@
 var os = require('os');
 var nodeStatic = require('node-static');
 var http = require('http');
-var socketIO = require('socket.io');
-const fs = require('fs');
+var socketIO = require('socket.io')({path: '/chat/socket.io'});
 const maxClients = 3;
 
 var fileServer = new nodeStatic.Server();

diff --git a/webpack-conf/webpack.common.js b/webpack-conf/webpack.common.js
@@ -1,5 +1,8 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -9,10 +12,30 @@ module.exports = {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, '../chat/dist'),
   },
+  optimization: {
+    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+  },
   plugins: [
-    new CleanWebpackPlugin()
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    })
   ],
   node: {
     fs: 'empty'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [{
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            publicPath: '../',
+          }
+        }, 'css-loader']
+      }
+    ]
   }
 };
diff --git a/webpack-conf/webpack.prod.js b/webpack-conf/webpack.prod.js
@@ -5,22 +5,5 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = merge(common, {
-  mode: 'production',
-  optimization: {
-    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-    ],
-  },
+  mode: 'production'
 });