bengrunfeld / expack Goto Github PK

Express and Webpack boilerplate application

License: MIT License

HTML 3.87% JavaScript 92.66% CSS 3.47%

expack's Introduction

Expack - Express and Webpack Boilerplate

Expack is the bare-bones Express and Webpack boilerplate with ES6+ babel transpilation, ESLint linting, Hot Module Reloading, and Jest test framework enabled.

Expack has two build modes: Development and Production.

When you run npm run buildDev, Javascript, HTML, and CSS files are unminified and not uglified, meaning that you can easily inspect them in Chrome Dev Tools. Hot Module Reloading is enabled via webpack-dev-middleware and webpack-hot-middleware.

When you run npm run buildProd, Javascript, HTML, and CSS files are all minified and uglified, and images are encoded as Base64 directly into your CSS file, which results in less calls to the server for image files.

Google App Engine Flex Deployment

Expack can be deployed directly to Google App Engine Flex with the command npm run deploy. IMPORTANT: Currently app.yaml is configured to use minimal resources to save on cost, which is great for development but terrible for production. Please review and update app.yaml to suit your own needs.

Installation & Usage

git clone https://github.com/bengrunfeld/expack.git
cd expack
npm install

npm run buildDev        // for development
    // OR
npm run buildProd

npm start               // navigate to localhost:8080 for local dev

For testing

npm test                // runs test
npm run coverage        // generates a coverage report

Security

Please ensure that your version of Node and NPM are up to date, and run npm audit after installation to ensure that no vulnerabilities exist. If they do, follow the audits instructions on how to resolve them.

expack's People

Stargazers

Watchers

expack's Issues

Building is failed

I cloned the repo, and tried to build it,
npm run buildDev

It Results:

> [email protected] buildDev /home/sahilbansal/Downloads/expack-master
> rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js

Hash: 582bd3137d42f12577c7
Version: webpack 4.28.3
Time: 421ms
Built at: 05/06/2019 4:03:38 PM
    Asset      Size  Chunks             Chunk Names
server.js  10.4 KiB  server  [emitted]  server
Entrypoint server = server.js
[./src/server/server-dev.js] 928 bytes {server} [built]
[./webpack.dev.config.js] 1.34 KiB {server} [built]
[express] external "express" 42 bytes {server} [built]
[html-webpack-plugin] external "html-webpack-plugin" 42 bytes {server} [built]
[path] external "path" 42 bytes {server} [built]
[webpack] external "webpack" 42 bytes {server} [built]
[webpack-dev-middleware] external "webpack-dev-middleware" 42 bytes {server} [built]
[webpack-hot-middleware] external "webpack-hot-middleware" 42 bytes {server} [built]
Hash: e23a78602af73e67abac
Version: webpack 4.28.3
Time: 1020ms
Built at: 05/06/2019 4:03:40 PM
                               Asset       Size  Chunks             Chunk Names
                        ./index.html  357 bytes          [emitted]  
dfe07a62c3eb4990566f19a74aa53aef.jpg    106 KiB          [emitted]  
                             main.js    137 KiB    main  [emitted]  main
                         main.js.map    145 KiB    main  [emitted]  main
Entrypoint main = main.js main.js.map
[0] multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000 ./src/index.js 40 bytes {main} [built]
[./node_modules/css-loader/index.js!./src/css/style.css] ./node_modules/css-loader!./src/css/style.css 549 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&timeout=20000] (webpack)-hot-middleware/client.js?path=/__webpack_hmr&timeout=20000 7.59 KiB {main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.26 KiB {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/css/style.css] 1.06 KiB {main} [built]
[./src/img/bg.jpg] 82 bytes {main} [built]
[./src/index.js] 223 bytes {main} [built]
[./src/js/logger.js] 101 bytes {main} [built] [1 warning]
    + 14 hidden modules

WARNING in ./src/js/logger.js
Module Warning (from ./node_modules/eslint-loader/index.js):

/home/sahilbansal/Downloads/expack-master/src/js/logger.js
  1:27  error  Unexpected console statement  no-console
  1:27  error  'console' is not defined      no-undef

✖ 2 problems (2 errors, 0 warnings)

 @ ./src/index.js 1:0-37 4:0-10
 @ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000 ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/html/index.html] 346 bytes {0} [built]

Don't you have any plans to upgrade this to latest Node.js?

If you can, please upgrade this to latest build of Node.js.

hot module reloading

WHen make changes in html file. browser changes gets reflected after manual refresh.

How to integrate routes in this?

Could some please explain, how to add some more routes in this boilerplate?

express could not find file in memory ... another issue solved it

after npm install and webpack on the 2 config files , i run and get following errs ....

Error: no such file or directory
at MemoryFileSystem.readFileSync (/home/rob/src/node-speech/node_modules/memory-fs/lib/MemoryFileSystem.js:114:10)
at MemoryFileSystem.(anonymous function) [as readFile] (/home/rob/src/node-speech/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)
at eval (webpack:///./src/server/server-dev.js?:29:29)
at Layer.handle [as handle_request] (/home/rob/src/node-speech/node_modules/express/lib/router/layer.js:95:5)
at next (/home/rob/src/node-speech/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/home/rob/src/node-speech/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/home/rob/src/node-speech/node_modules/express/lib/router/layer.js:95:5)
at /home/rob/src/node-speech/node_modules/express/lib/router/index.js:281:22
at param (/home/rob/src/node-speech/node_modules/express/lib/router/index.js:354:14)
at param (/home/rob/src/node-speech/node_modules/express/lib/router/index.js:365:14)
Er

line 29 block is: app.get('*'

your new code :

app.get('*', (req, res, next) => {

  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, (err, result) => {

soliution_ref

error 'console' is not defined

Hi Ben, your boilerplate works fine! thanks for sharing.
I'm receiving this error during the dev build (seems to me doesn't compromise the funcrioning):

.../src/js/logger.js
1:27  error  Unexpected console statement  no-console
1:27  error  'console' is not defined

Material components

Could you include material components in this example.
https://material.io/develop/web/docs/getting-started/
I'll try but I can not make it work, i need your help, please.

Can't run (buildDev, buildProd) : Cannot read 'properties' of undefined

Dear Ben,

I'm unable to run the boilerplate

Steps

Downloaded and unzipped
Placed in some "~/projects/" folder
Deleted package-lock.json
ran npm install
ran npm run buildDev (buildProd sends same error)

Error Message

> [email protected] buildProd /Users/eliastouil/Google Drive/Programmation/paintball-iot/xyz-faker
> rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js

/Users/eliastouil/Google Drive/Programmation/paintball-iot/xyz-faker/node_modules/webpack-cli/bin/config-yargs.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                           ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/Users/eliastouil/Google Drive/Programmation/paintball-iot/xyz-faker/node_modules/webpack-cli/bin/config-yargs.js:89:48)
    at /Users/eliastouil/Google Drive/Programmation/paintball-iot/xyz-faker/node_modules/webpack-cli/bin/webpack.js:60:27
    at Object.<anonymous> (/Users/eliastouil/Google Drive/Programmation/paintball-iot/xyz-faker/node_modules/webpack-cli/bin/webpack.js:515:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] buildProd: `rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] buildProd script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eliastouil/.npm/_logs/2018-12-29T02_13_25_019Z-debug.log
Eliass-MacBook-Pro:xyz-faker eliastouil$

Thank you for your help

upgrade babel version

use the cli command: npx babel-upgrade --write
then upgrade package version numbers in package.json