React Webpack Boilerplate
Boilerplate to start your react project written in ES6 syntax using react, react-dom, react-router, reactive and web pack
- Webpack is configured to use Babel for transpiling ES6 codes
- The javascript build is split into bundles based on routing and dynamically loaded for each route
- Reactive JS is used to handle data stream in the example, alternatively you can swap it with Redux if you want to have simpler implementation
- All the raw assets (images, fonts, scss, css) are structured in folder
src/assets
. Once built, they are copied intobuild/assets
folder - All assets URLs are hashed so infinite caching can be enabled.
Note: It's not production ready, you will need to add extra webpack packages such as minifier, compression etc. The example given is for client only, if you want to also use server side loading, you will need to implememet your own logic
Usage
First, install NPM packages
npm install
Then Build
npm run build
Then run webpack dev server so all your on-the-fly changes are hot loaded into your browser, simply visit http://localhost:8080
npm start
Change default port
Change the port number to the number you want via changing var port = [port number]
in file webpack.server.js
Serving static client via Apache
Alternatively you can use Apache to serve your static files if you don't want to use webpack dev server. Simply point your DocumentRoot
to the build
folder, make sure you have AllowOverride
enable to use local .htaccess
file.
Then run below to auto update the build when making changes
npm run build-watch