https://github.com/reactjsresources/react-webpack-redux

Simple React Webpack Babel Starter Kit with Redux
https://github.com/reactjsresources/react-webpack-redux

Last synced: about 2 months ago
JSON representation

Simple React Webpack Babel Starter Kit with Redux

• Host: GitHub
• URL: https://github.com/reactjsresources/react-webpack-redux
• Owner: ReactJSResources
• License: mit
• Created: 2017-12-25T22:37:54.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-03T17:37:06.000Z (over 6 years ago)
• Last Synced: 2024-04-08T16:00:31.179Z (9 months ago)
• Language: JavaScript
• Size: 2.43 MB
• Stars: 6
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        



    
Simple React Webpack Babel Starter Kit




[![CircleCI](https://circleci.com/gh/ReactJSResources/react-webpack-babel/tree/master.svg?style=svg)](https://circleci.com/gh/ReactJSResources/react-webpack-babel/tree/master)

[![Dependency Status](https://img.shields.io/david/ReactJSResources/react-webpack-babel.svg)](https://david-dm.org/dylang/npm-check)

Tired of complicated starters with 200MB of dependencies which are hard to understand and modify? This is for you!

### What were using

* React 16

* Webpack 3

* React Router 4

* SASS

* Babel Cli

* Hot Module Reloading

* Jest 21 

* Enzyme 3 for testing

### Features

* 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.

* [Webpack Dashboard Plugin](https://github.com/FormidableLabs/webpack-dashboard) on dev server.

### To run

* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system.

* Fork and clone the project:

```

git clone https://github.com/ReactJSResources/react-webpack-babel.git

```

* Then install the dependencies:

```

npm install

```

* Run development server:

```

npm start

```

* Or you can run development server with [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard):

```

npm run dev

```

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

### To test

To run unit tests:

```

npm test

```

Tests come bundled with:

* Jest

* Enzyme

* React Test Utils

* React Test Renderer

### To build the production package

```

npm run build

```

### Running build locally

If you are using Mac/Linux simply run the following command inside public directory:

```

python -m SimpleHTTPServer 8000

```

### Nginx Config

Here is an example 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 / {

		try_files $uri $uri/ /index.html;

	}

	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 run linting, run:

```

npm run lint

```

### Notes on importing css styles

* styles having /src/ in their absolute path considered part of the application and exported as local css modules.

* other styles considered global styles used by components and included in the css bundle directly.

### Contribute

Please contribute to the project if you know how to make it better, including this README :)