Starter template for react and webpack.
- Compilation with webpack
- React and jsx
- react-router
- Stylesheets can be CSS, LESS, SASS, Stylus or mixed
- Embedded resources like images or fonts use DataUrls if appropriate
- A simple flag loads a react component (and dependencies) on demand.
- Development
- Development server
- Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
- Uses SourceUrl for performance, but you may switch to SourceMaps easily
- Production
- Server example for prerendering for React components
- Initial data inlined in page
- Long Term Caching through file hashes enabled
- Generate separate css file to avoid FOUC
- Minimized CSS and javascript
- Also supports coffee-script files if you are more a coffee-script person.
- You can also require markdown or text files for your content.
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)
- Add an entry point to
make-webpack-config.js
(var entry
). - Add a new top-level react component in
app
(xxxRoutes.js
,xxxStoreDescriptions.js
,xxxStores.js
). - (Optional) Enable
commonsChunk
inwebpack-production.config.js
and add<script src="COMMONS_URL"></script>
toapp/prerender.html
. - Modify the server code to require, serve and prerender the other entry point.
- Restart compilation.
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.
- Uncomment the
devtool
line inwebpack-production.config.js
. - Make sure that the folder
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 --save
- In
make-webpack-config.js
add".coffee"
to thevar extensions = ...
line.