React app development skeleton with webpack and hot reload

This article describes a development stack with React and webpack to develop with your favorite code editor.


You should have node.js installed on your machine.

the short story:

>git clone

>cd Learn-React
>npm install
>npm link webpack-dev-server --save-dev
>node dev-server

navigate with your browser to : http://localhost:8080/

you should see "hello react" printed
then in an editor (notepad) change the ./src/App.jsx to return something new (“hello world”)
save the file
you should see "hello world" replaced without reloading the page

set a debugger; expression (for chrome) in the code and go to the browser, => you can now debug with the dev tools of chrome for example.

the longstory:

Create a repo on github (you should always do so… aren’t you) clone it and npm init
>git clone https://yourrepopath/yourporject.git

>npm init

..answer the questions

Install webpack react and dependencies to enable es6 features

>npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

>npm install react react-dom --save

>npm install babel-preset-react --save-dev

configure webpack for dev and debugging:

first install webpack-dev-server and react-hot-loader like so:

>npm install  web-pack-dev-server -g
>npm install react-hot-loader --save-dev

second create the config files


var path = require('path');
var webpack = require('webpack');

module.exports = {
	devtool: 'eval-source-map',
	entry: {
		main: [
	output: {
		filename: '[name].js',
		path: path.join(__dirname, "public"),
		publicPath: '/public/'
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoErrorsPlugin()
	module: {
		loaders: [
				test: /.jsx?$/,
				include: path.join(__dirname, 'src'),
				loader: 'react-hot!babel'


	presets: ['es2015', 'react']


var WebPackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var webpack = require('webpack');

new WebPackDevServer(webpack(config), {
	publicPath: config.output.publicPath,
	hot: true,
	historyApiFallback : true
}).listen(8080, 'localhost');

start the server

>npm link webpack-dev-server --save-dev  //this is done only one time

>node dev-server.js

That’s it, now you can code react components and changes to them are automatically reloaded to the browser.
Check the full code here

More info

For more info :
check this devtools and for hot loader, check this React Hot Loader Config

back to top

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s