From 3f2a017583b474eba52bf664d68cff7411d49f58 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Tue, 3 Oct 2017 13:52:31 +0300 Subject: [PATCH] Create public folder with webpack --- .eslintignore | 5 +---- .gitignore | 9 +-------- .npmignore | 4 ++-- .nycrc | 3 +-- .stylelintrc.yml | 1 - package.json | 7 ++++--- scripts/build-fontawesome.js | 28 ---------------------------- src/server.js | 6 +++--- test/tests/build.js | 31 +++++++++++++++++++++++++++++++ webpack.config.js | 35 ++++++++++++++++++++++++++++++++++- 10 files changed, 77 insertions(+), 52 deletions(-) delete mode 100644 scripts/build-fontawesome.js create mode 100644 test/tests/build.js diff --git a/.eslintignore b/.eslintignore index c0557f7d..f261dd2e 100644 --- a/.eslintignore +++ b/.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/ diff --git a/.gitignore b/.gitignore index 3c7c410b..8852bbab 100644 --- a/.gitignore +++ b/.gitignore @@ -4,11 +4,4 @@ package-lock.json .nyc_output/ coverage/ - -# 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 +public/ diff --git a/.npmignore b/.npmignore index f26486f2..5a294a1e 100644 --- a/.npmignore +++ b/.npmignore @@ -6,8 +6,8 @@ .* !.lounge_home -client/js/bundle.vendor.js.map -client/views/ +client/ +public/js/bundle.vendor.js.map coverage/ scripts/ test/ diff --git a/.nycrc b/.nycrc index 99b69780..03b56c0a 100644 --- a/.nycrc +++ b/.nycrc @@ -1,8 +1,7 @@ { "all": true, "exclude": [ - "client/js/bundle.js", - "client/js/bundle.vendor.js", + "public/", "test/", "webpack.config.js" ], diff --git a/.stylelintrc.yml b/.stylelintrc.yml index 558be353..5d8cafba 100644 --- a/.stylelintrc.yml +++ b/.stylelintrc.yml @@ -1,7 +1,6 @@ extends: stylelint-config-standard ignoreFiles: - - coverage/**/*.css - client/css/bootstrap.css rules: diff --git a/package.json b/package.json index c900ecac..f13b9c7e 100644 --- a/package.json +++ b/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" } } diff --git a/scripts/build-fontawesome.js b/scripts/build-fontawesome.js deleted file mode 100644 index 74be669a..00000000 --- a/scripts/build-fontawesome.js +++ /dev/null @@ -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."); - } - }); - }); -}); diff --git a/src/server.js b/src/server.js index 0190fc2c..d8f5adad 100644 --- a/src/server.js +++ b/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; diff --git a/test/tests/build.js b/test/tests/build.js new file mode 100644 index 00000000..dc446ef6 --- /dev/null +++ b/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; + }); +}); diff --git a/webpack.config.js b/webpack.config.js index afacb60d..8c05eccf 100644 --- a/webpack.config.js +++ b/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