react-webpack-babel

Simple React Webpack Babel Starter Kit

Tired of complicated starters with 200MB of dependencies which are hard to understand and modify?

Try this is a simple React, Webpack and Babel application with nothing else in it.

What's in it?

• Simple src/index.jsx and src/index.css (local module css).
• Webpack configuration for development (with hot reloading) and production (with minification).
• CSS module loading, so you can include your css by import styles from './path/to.css';.
• Both js(x) and css hot loaded during development.

To run

• You'll need to have git and node installed in your system.
• Fork and clone the project:

> $ git clone THIS_REPO_URL

• Then install the dependencies:

> $ npm install

• Run development server:

> $ npm start

Open the web browser to http://localhost:8888/

To build production package

> $ npm run build

Nginx Config

Here is the suggested Nginx config:

server {
	# ... root and other options

	gzip on;
	gzip_http_version 1.1;
	gzip_types text/plain text/css text/xml application/javascript image/svg+xml;

	location ~ \.html?$ {
		expires 1d;
	}

	location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
		access_log off;
		log_not_found off;
		expires max;
	}
}

Eslint

There is a .eslint.yaml config for eslint ready with React plugin. To use it, you need to install additional dependencies though:

> npm install --save-dev eslint eslint-plugin-react

To do the actual linting, run:

> npm run lint

Notes on importing css styles

• styles having /src/ in their absolute path are considered part of the application and exported as local css modules.
• styles having /node_modules|global/ in their absolute path are considered global styles used by many components and are included in the css bundle directly.

Contribute

Please contribute to the project if you think this can be done better in anyway even for this README :)