├── .babelrc
├── .gitignore
├── README.md
├── app
├── App.css
├── App.js
├── index.tmpl.html
├── main.css
└── main.js
├── package.json
├── webpack.config.js
└── webpack.production.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015"],
3 | "env": {
4 | "development": {
5 | "plugins": [["react-transform", {
6 | "transforms": [{
7 | "transform": "react-transform-hmr",
8 | // if you use React Native, pass "react-native" instead:
9 | "imports": ["react"],
10 | // this is important for Webpack HMR:
11 | "locals": ["module"]
12 | }]
13 | // note: you can put more transforms into array
14 | // this is just one of them!
15 | }]]
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | React App Advanced Boilerplate
2 | =====================
3 |
4 | React project template with advanced Webpack setup.
5 |
6 | ### Objective
7 |
8 | While the original Pro React book [App Boilerplate](https://github.com/pro-react/react-app-boilerplate) is purposefully simple to show the minimal setup needed to create React projects with Webpack and Babel, this is a more complete setup. It is based on the Appendix A (entirelly dedicated to Webpack) and features JavaScript and CSS bundling, Hot Module Replacement, automatic HTML generation and a separate production configuration with optimization and caching.
9 |
10 | ### Usage
11 | **Clone this repository**
12 | ```
13 | git clone git@github.com:pro-react/react-app-advanced-boilerplate.git
14 | ```
15 |
16 | **Install**
17 | ```
18 | npm install
19 | ```
20 |
21 | **Start the application in development mode**
22 | ```
23 | npm start
24 | ```
25 |
26 | Open http://localhost:8080 in your browser.
27 |
28 | Static files are served from the `public` folder, project JavaScript files are bundled from the `app` folder.
29 |
30 | **When ready, build for production**
31 | ```
32 | npm run build
33 | ```
34 |
35 | This will generate a minimized bundle.js file on the `build` folder.
36 |
--------------------------------------------------------------------------------
/app/App.css:
--------------------------------------------------------------------------------
1 | .root {
2 | background-color: #eee;
3 | border: 3px solid #ccc;
4 | }
5 |
--------------------------------------------------------------------------------
/app/App.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import styles from './App.css';
3 |
4 | class App extends Component{
5 | render() {
6 | return (
7 |
8 |
Hello World
9 |
10 | );
11 | }
12 | }
13 |
14 | export default App
15 |
--------------------------------------------------------------------------------
/app/index.tmpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Sample Project
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/app/main.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | -ms-text-size-adjust: 100%;
4 | -webkit-text-size-adjust: 100%;
5 | }
6 | *, *:before, *:after {
7 | box-sizing: inherit;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13 | }
14 |
15 | h1, h2, h3, h4, h5, h6, p, ul {
16 | margin: 0;
17 | padding: 0;
18 | }
19 |
--------------------------------------------------------------------------------
/app/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {render} from 'react-dom';
3 | import App from './App';
4 | import './main.css';
5 |
6 |
7 | render(, document.getElementById('root'));
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-sample-project",
3 | "version": "1.1.0",
4 | "description": "Sample webpack project",
5 | "scripts": {
6 | "start": "node_modules/.bin/webpack-dev-server --progress",
7 | "build": "NODE_ENV=production node_modules/.bin/webpack --config ./webpack.production.config.js --progress"
8 | },
9 | "author": "Cássio Zen",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "autoprefixer": "^6.3.6",
13 | "babel-core": "~6.7.*",
14 | "babel-loader": "~6.2.*",
15 | "babel-plugin-react-transform": "^2.0.2",
16 | "babel-preset-es2015": "~6.6.*",
17 | "babel-preset-react": "~6.5.*",
18 | "css-loader": "^0.23.1",
19 | "json-loader": "^0.5.4",
20 | "extract-text-webpack-plugin": "^1.0.1",
21 | "html-webpack-plugin": "^2.15.0",
22 | "postcss-loader": "^0.8.2",
23 | "react-transform-hmr": "^1.0.4",
24 | "style-loader": "^0.13.1",
25 | "webpack": "~1.12.*",
26 | "webpack-dev-server": "~1.14.*"
27 | },
28 | "dependencies": {
29 | "react": "^15.0.0",
30 | "react-dom": "^15.0.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
3 |
4 | module.exports = {
5 | devtool: 'eval-source-map',
6 |
7 | entry: __dirname + "/app/main.js",
8 | output: {
9 | path: __dirname + "/build",
10 | filename: "bundle.js"
11 | },
12 |
13 | module: {
14 | loaders: [
15 | {
16 | test: /\.json$/,
17 | loader: "json"
18 | },
19 | {
20 | test: /\.js$/,
21 | exclude: /node_modules/,
22 | loader: 'babel'
23 | },
24 | {
25 | test: /\.css$/,
26 | loader: 'style!css?modules!postcss'
27 | }
28 | ]
29 | },
30 |
31 | postcss: [
32 | require('autoprefixer')
33 | ],
34 |
35 | plugins: [
36 | new HtmlWebpackPlugin({
37 | template: __dirname + "/app/index.tmpl.html"
38 | }),
39 | new webpack.HotModuleReplacementPlugin(),
40 | new webpack.NoErrorsPlugin()
41 | ],
42 |
43 | devServer: {
44 | colors: true,
45 | historyApiFallback: true,
46 | port: process.env.PORT||8080,
47 | inline: true,
48 | hot: true
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
4 |
5 | module.exports = {
6 | entry: __dirname + "/app/main.js",
7 | output: {
8 | path: __dirname + "/build",
9 | filename: "[name]-[hash].js"
10 | },
11 |
12 | module: {
13 | loaders: [
14 | {
15 | test: /\.json$/,
16 | loader: "json"
17 | },
18 | {
19 | test: /\.js$/,
20 | exclude: /node_modules/,
21 | loader: 'babel'
22 | },
23 | {
24 | test: /\.css$/,
25 | loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
26 | }
27 | ]
28 | },
29 |
30 | postcss: [
31 | require('autoprefixer')
32 | ],
33 |
34 | plugins: [
35 | new HtmlWebpackPlugin({
36 | template: __dirname + "/app/index.tmpl.html"
37 | }),
38 | new webpack.DefinePlugin({
39 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
40 | }),
41 | new webpack.optimize.OccurenceOrderPlugin(),
42 | new webpack.optimize.UglifyJsPlugin(),
43 | new ExtractTextPlugin("[name]-[hash].css")
44 | ]
45 | }
46 |
--------------------------------------------------------------------------------