template react + redux

Template for bootstraping (and learning) a web app based on: react + redux + babel + webpack + browser-synch.

Note this project is work in progress and missing:

testing
CSS Framework (left out intentionally, but further studies should be done in this area)

For more information about learning react + redux, please refer to the document React-Redux.md

Getting started

In order to start the project we will be using npm scripts:

install

npm install

start

npm start

build (builds in dev mode and starts server) *TDB

npm run build

build development mode

npm run build:watch

build production mode

npm run build:prod

I'd preffer to not have to install webpack globally and have all the necessary dependencies stated in the package.json file. In this way, whenever the project is ported to another machine/VM/docker container, etc the project will be self sufficient to both: run in production mode and developer mode.

Project structure

src: source code of the project itself
www: destination folder (static front-end)

.
├── README.md
├── package.json
├── src
│   ├── favico.ico
│   ├── index.ejs
│   ├── index.js
│   └── style
│       ├── main.scss
│       └── style.css
├── webpack.config.js
└── www
    ├── all.css
    ├── all.js
    ├── favico.ico
    └── index.html

Dependencies

Overall view

The best way to have an overall view is to check the package.json file, here below commented:

{
  "dependencies": {
    "webpack",                      // webpack (core library) 
    "path",                         //  - tool: path resolving (@webpack.config.js)
    "css-loader",                   //  - loader: returns css code, resolves imports and url(...)
    "sass-loader",                  //  - loader: converts sass to css
    "node-sass",                    //  - dependecy: required by 'sass-loader'
    "extract-text-webpack-plugin",  //  - plugin: no need to include extensions on require/import
    "html-webpack-plugin"           //  - plugin: creates a new index.html
    "react",                        // react (core library)
    "react-dom",                    //   - glue between react and DOM
    "babel-core",                   // babel (core library)
    "babel-loader",                 //   - loader: so webpack can use babel
    "babel-preset-es2015",          //   - preset: ECMA Script 2015 compatibility
    "babel-preset-react",           //   - preset: for JSX compatibility
    "browser-synch",                // browser-synch (core library)
    "browser-synch-webpack-plugin", //   - plugin: so webpack can use browser-synch
  }
}

NOTE: do not use the file above as package.json since strict JSON does not addmit comments.

webpack.config.js

used for:

Bundle all js files into one ('all.js')
Bundle all css/scss files into one ('all.css')
Create index.html from an EJS template
Run a developer server using browser-synch

How?

Specify an entry point, and then webpack will calculate all the dependencies that this file requires (including css files: see loaders). Then specify an output point, where all the files will be bundled together to. See webpack.config.js here divided into parts:

basic config

var config = {
  // NOT sure what this does??
  debug: true,
  
  // ENTRY point, in our case ./src/index.js 
  entry: [
    path.resolve( __dirname, 'src/index')
  ],
  
  // OUTPUT point, save all files into a dir "www" and bundle all JS code into "all.js"
  output: {
    path: path.resolve( __dirname, 'www'),
    filename: 'all.js'
  },
  ...
};

module-loaders:

- scss

...
// Convert '.SCSS, .SASS, .CSS' files into '.CSS' and bundle
module: {
      loaders: [
          { test: /\.(scss|sass|css)$/, loader: ExtractTextPlugin.extract('css!sass') },
      ]
  },
...

- babel

...
// preset 'react': Convert '.JSX, .JS' files into '.JS' and bundle
// preset 'es2015': Convert ES6 to ES5
module: {
      loaders: [
          { test: /\.(jsx|js)$/, loaders: ['babel'], exclude: /node_modules/ },
      ]
  },
...

plugins:

- html

// Creates an HTML page based on a .EJS template
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Project Title',
      favicon: 'src/favico.ico',
      template: 'src/index.ejs'
    }),
    ...
  ]
  ...
};

- extract

// Moves all css files into one
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
  ...
  plugins: [
    new ExtractTextPlugin('all.css', {
      allChunks: true
    })
  ],
  ...
};

- browsersynch

// Web server for testing the production build on multiple, synched windows (also diff devs)
// Note: see port 3001 for browsersynch options
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

var config = {
  ...
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      server: { baseDir: ['www'] }
    })
  ],
  ...
};

resolve

// Makes possible to used `require('file')` without the extension being specified 
var config = {
  ...
  resolve: {
    extensions: ['', '.js', '.json', '.scss', '.css']
  }
};

TBD:

https://www.npmjs.com/package/image-webpack-loader

check image optimizations

jgrecoarroyo / template_reactredux