https://github.com/tom910/react-webpack-boilerplate

React+Redux+Router+Webpack+Babel+Hot Loader+Postcss
https://github.com/tom910/react-webpack-boilerplate

Last synced: about 1 month ago
JSON representation

React+Redux+Router+Webpack+Babel+Hot Loader+Postcss

• Host: GitHub
• URL: https://github.com/tom910/react-webpack-boilerplate
• Owner: Tom910
• Created: 2016-01-31T21:08:41.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-02T12:41:10.000Z (almost 9 years ago)
• Last Synced: 2023-02-27T22:06:51.322Z (almost 2 years ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Simple React+Redux+Webpack+Postcss Boilerplate

Boilerplate for modern web application

## Features

- [x] [Webpack](https://webpack.github.io)

- [x] [React](https://facebook.github.io/react/)

- [x] [React Transform HMR](https://github.com/gaearon/react-transform-hmr)

- [x] [Redux](https://github.com/rackt/redux)

- [x] [React Router Redux](https://github.com/rackt/react-router-redux)

- [x] [Babel](https://babeljs.io/)

- [x] [Autoprefixer](https://github.com/postcss/autoprefixer)

- [x] [PostCSS](https://github.com/postcss/postcss)

- [x] [CSS modules](https://github.com/outpunk/postcss-modules)

- [x] [cssnext](https://github.com/MoOx/postcss-cssnext)

- [x] [cssnano](https://github.com/ben-eb/cssnano)

### Directory Layout

```

.

├── /dist/                      # The folder for compiled output

├── /node_modules/              # 3rd-party libraries and utilities

├── /app/                       # The source code of the application

│   ├── /actions/               # Action creators that allow to trigger a dispatch to stores

│   ├── /components/            # React components

│   ├── /constants/             # Constants (action types etc.)

│   ├── /containers/            # React page

│   ├── /reducers/              # Redux reducers

│   ├── /store/                 # Stores contain the application state and logic

│   ├── /utils/                 # DevTools and history settings

│   ├── /index.js               # Entry point scripts

│   ├── /menu.js                # Menu application

│   ├── /routes.js              # Application routes

├── /webpack/                   # Webpack configs

│   ├── /common.config.js       # main config webpack

│   ├── /dev.config.js          # developing modification webpack config

│   ├── /prod.config.js         # production modification webpack config

│   ├── /server.config.js       # Launches the development web server with "live reload"

│   ├── /server.babel.js        # Babel transpiler for node.js

├── /static/                    # Static content (plain html, manifest.json, images)

│── package.json                # The list of 3rd party libraries and utilities

│── .eslintrc                   # ESLint config

```

## Getting started

1. Clone this repo using `git clone https://github.com/tom910/react-webpack-boilerplate.git`.

2. Run `npm install` to install the dependencies.

3. Run `npm start` to start the local web server.

4. Go to `http://localhost:3000` and you should see the app running!

## Building & Deploying

Run `npm run build:production`, which will compile all the necessary files in a `dist` folder.

## Webpack profiler

Run `npm run profiler`, which will compile all the necessary files a `stats.json`. The result can be seen https://webpack.github.io/analyse/

## TODO

- [ ] normal test app

- [ ] react-helmet

- [ ] ServiceWorker

- [ ] Unit Test

- [ ] FontFaceObserver

# License

MIT