Merge pull request #1611 from thelounge/xpaw/public-folder

Create public folder with webpack

.eslintignore

@@ -1,8 +1,5 @@
-# built by tools
-client/js/bundle.js
-client/js/bundle.vendor.js
-
 # third party
 client/js/libs/jquery/*.js
 
+public/
 coverage/

.gitignore

@@ -4,11 +4,4 @@ package-lock.json
 
 .nyc_output/
 coverage/
-
+public/
-# Built assets created at npm install/prepublish time
-# See https://docs.npmjs.com/misc/scripts
-client/fonts/
-client/js/bundle.js
-client/js/bundle.js.map
-client/js/bundle.vendor.js
-client/js/bundle.vendor.js.map

.npmignore

@@ -6,8 +6,8 @@
 .*
 !.lounge_home
 
-client/js/bundle.vendor.js.map
+client/
-client/views/
+public/js/bundle.vendor.js.map
 coverage/
 scripts/
 test/

.nycrc

@@ -1,8 +1,7 @@
 {
   "all": true,
   "exclude": [
-    "client/js/bundle.js",
+    "public/",
-    "client/js/bundle.vendor.js",
     "test/",
     "webpack.config.js"
   ],

.stylelintrc.yml

@@ -1,7 +1,6 @@
 extends: stylelint-config-standard
 
 ignoreFiles:
-  - coverage/**/*.css
   - client/css/bootstrap.css
 
 rules:

package.json

@@ -16,14 +16,13 @@
     "start": "node index start",
     "start-dev": "npm-run-all --parallel watch start",
     "build": "npm-run-all build:*",
-    "build:font-awesome": "node scripts/build-fontawesome.js",
     "build:webpack": "webpack",
     "watch": "webpack --watch",
     "test": "npm-run-all -c test:* lint",
     "test:mocha": "mocha",
     "lint": "npm-run-all -c lint:*",
     "lint:js": "eslint . --report-unused-disable-directives",
-    "lint:css": "stylelint \"**/*.css\""
+    "lint:css": "stylelint \"client/**/*.css\""
   },
   "keywords": [
     "lounge",
@@ -65,6 +64,7 @@
     "babel-loader": "7.1.2",
     "babel-preset-env": "1.6.1",
     "chai": "4.1.2",
+    "copy-webpack-plugin": "4.1.1",
     "css.escape": "1.5.1",
     "emoji-regex": "6.5.1",
     "eslint": "4.9.0",
@@ -83,6 +83,7 @@
     "socket.io-client": "2.0.3",
     "stylelint": "8.2.0",
     "stylelint-config-standard": "17.0.0",
-    "webpack": "3.8.1"
+    "webpack": "3.8.1",
+    "webpack-cleanup-plugin": "0.5.1"
   }
 }

scripts/build-fontawesome.js

@@ -1,28 +0,0 @@
-"use strict";
-
-const colors = require("colors/safe");
-const fs = require("fs-extra");
-const log = require("../src/log");
-
-const srcDir = "./node_modules/font-awesome/fonts/";
-const destDir = "./client/fonts/";
-const fonts = [
-	"fontawesome-webfont.woff",
-	"fontawesome-webfont.woff2"
-];
-
-fs.ensureDir(destDir, (dirErr) => {
-	if (dirErr) {
-		log.error(dirErr);
-	}
-
-	fonts.forEach((font) => {
-		fs.copy(srcDir + font, destDir + font, (err) => {
-			if (err) {
-				log.error(err);
-			} else {
-				log.info(colors.bold(font) + " successfully installed.");
-			}
-		});
-	});
-});

src/server.js

@@ -33,7 +33,7 @@ module.exports = function() {
 (node ${colors.green(process.versions.node)} on ${colors.green(process.platform)} ${process.arch})`);
 	log.info(`Configuration file: ${colors.green(Helper.CONFIG_PATH)}`);
 
-	if (!fs.existsSync("client/js/bundle.js")) {
+	if (!fs.existsSync("public/js/bundle.js")) {
 		log.error(`The client application was not built. Run ${colors.bold("NODE_ENV=production npm run build")} to resolve this.`);
 		process.exit();
 	}
@@ -41,7 +41,7 @@ module.exports = function() {
 	var app = express()
 		.use(allRequests)
 		.use(index)
-		.use(express.static("client"))
+		.use(express.static("public"))
 		.use("/storage/", express.static(Helper.getStoragePath(), {
 			redirect: false,
 			maxAge: 86400 * 1000,
@@ -53,7 +53,7 @@ module.exports = function() {
 			}
 		}))
 		.set("view engine", "html")
-		.set("views", path.join(__dirname, "..", "client"));
+		.set("views", path.join(__dirname, "..", "public"));
 
 	app.get("/themes/:theme.css", (req, res) => {
 		const themeName = req.params.theme;

test/tests/build.js

@@ -0,0 +1,31 @@
+"use strict";
+
+const expect = require("chai").expect;
+const fs = require("fs");
+const path = require("path");
+
+describe("public folder", function() {
+	const publicFolder = path.join(__dirname, "..", "..", "public");
+
+	it("font awesome files are copied", function() {
+		expect(fs.existsSync(path.join(publicFolder, "fonts", "fontawesome-webfont.woff"))).to.be.true;
+		expect(fs.existsSync(path.join(publicFolder, "fonts", "fontawesome-webfont.woff2"))).to.be.true;
+	});
+
+	it("index.html is copied", function() {
+		expect(fs.existsSync(path.join(publicFolder, "index.html"))).to.be.true;
+	});
+
+	it("javascript files are built", function() {
+		expect(fs.existsSync(path.join(publicFolder, "js", "bundle.js"))).to.be.true;
+		expect(fs.existsSync(path.join(publicFolder, "js", "bundle.vendor.js"))).to.be.true;
+	});
+
+	it("javascript map is created", function() {
+		expect(fs.existsSync(path.join(publicFolder, "js", "bundle.js.map"))).to.be.true;
+	});
+
+	it("loading-slow-alert.js is copied", function() {
+		expect(fs.existsSync(path.join(publicFolder, "js", "loading-slow-alert.js"))).to.be.true;
+	});
+});

webpack.config.js

@@ -2,6 +2,8 @@
 
 const webpack = require("webpack");
 const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const CleanupPlugin = require("webpack-cleanup-plugin");
 
 // ********************
 // Common configuration
@@ -13,7 +15,7 @@ const config = {
 	},
 	devtool: "source-map",
 	output: {
-		path: path.resolve(__dirname, "client"),
+		path: path.resolve(__dirname, "public"),
 		filename: "[name]",
 		publicPath: "/"
 	},
@@ -60,6 +62,37 @@ const config = {
 		json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
 	},
 	plugins: [
+		new CleanupPlugin(),
+		new CopyPlugin([
+			{
+				from: "./node_modules/font-awesome/fonts/fontawesome-webfont.woff*",
+				to: "fonts/[name].[ext]"
+			},
+			{
+				from: "./client/js/loading-slow-alert.js",
+				to: "js/[name].[ext]"
+			},
+			{ // TODO: Build index.html with handlebars
+				from: "./client/*",
+				to: "[name].[ext]"
+			},
+			{
+				from: "./client/audio/*",
+				to: "audio/[name].[ext]"
+			},
+			{
+				from: "./client/img/*",
+				to: "img/[name].[ext]"
+			},
+			{
+				from: "./client/themes/*",
+				to: "themes/[name].[ext]"
+			},
+			{ // TODO: Build css with postcss
+				from: "./client/css/*",
+				to: "css/[name].[ext]"
+			},
+		]),
 		// socket.io uses debug, we don't need it
 		new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),
 		// automatically split all vendor dependencies into a separate bundle