gem-hunter
Language: JavaScript
[OUTDATED] Starter template for React with webpack. Doesn't focus on simplicity! NOT FOR BEGINNERS!
Starter template for react and webpack.
Just clone this repo and change the origin git remote.
npm install
Install vagrant
vagrant up
vagrant ssh
cd /vagrant
# start the webpack-dev-server
npm run dev-server
# wait for the first compilation is successful
# in another terminal/console
# start the node.js server in development mode
npm run start-dev
# open this url in your browser
http://localhost:8080/
The configuration is webpack-dev-server.config.js.
It automatically recompiles and refreshes the page when files are changed.
Also check the webpack-dev-server documentation.
# start the webpack-dev-server in HMR mode
npm run hot-dev-server
# wait for the first compilation is successful
# in another terminal/console
# start the node.js server in development mode
npm run start-dev
# open this url in your browser
http://localhost:8080/
The configuration is webpack-hot-dev-server.config.js.
It automatically recompiles when files are changed. When a hot-replacement-enabled file is changed (i. e. stylesheets or React components) the module is hot-replaced. If Hot Replacement is not possible the page is refreshed.
Hot Module Replacement has a performance impact on compilation.
# build the client bundle and the prerendering bundle
npm run build
# start the node.js server in production mode
npm run start
# open this url in your browser
http://localhost:8080/
The configuration is webpack-production.config.js.
The server is at lib/server.js
The production setting builds two configurations: one for the client (build/public) and one for the serverside prerendering (build/prerender).
Assets in public are also served.
After a production build you may want to visualize your modules and chunks tree.
Use the analyse tool with the file at build/stats.json.
Many file types are preconfigured, but not every loader is installed. If you get an error like Cannot find module "xxx-loader", you'll need to install the loader with npm install xxx-loader --save and restart the compilation.
(for a multi page app)
make-webpack-config.js (var entry).app (xxxRoutes.js, xxxStoreDescriptions.js, xxxStores.js).commonsChunk in webpack-production.config.js and add <script src="COMMONS_URL"></script> to app/prerender.html.Change devtool property in webpack-dev-server.config.js and webpack-hot-dev-server.config.js to "source-map" (better module names) or "eval-source-map" (faster compilation).
SourceMaps have a performance impact on compilation.
devtool line in webpack-production.config.js.build\public\debugging is access controlled, i. e. by password.SourceMaps have a performance impact on compilation.
SourceMaps contains your unminimized source code, so you need to restrict access to build\public\debugging.
Coffeescript is not installed/enabled by default to not disturb non-coffee developer, but you can install it easily:
npm install coffee-redux-loader --savemake-webpack-config.js add ".coffee" to the var extensions = ... line.Copyright (c) 2012-2015 Tobias Koppers