React boilerplate

Fast builder for your SPA projects.

Easily configure and add webpack modules and style your app without any stress with styled-components

Navigation

• Installation
• Boilerplate Concept
• File location
• Build production
• Aliases
• Used plugins
• The idea behind the example

Installation

0. Clone the branch you need

1. cd to react-starter folder.

2. Install webpack dependencies via npm npm i or yarn yarn install.

3. Start your web server yarn start || npm run start.

Concept

All your webpack modules are in webpack folder. You can easily call the module you need in webpack.config.js file.

const rules = [babel(), images(), fonts(), anyOtherModule()];

const common = merge([
  {
    // ...
    module: {
      rules,
    },
  }
]);

There are 2 modes you can work with: production and development which are declared in package.json file.

According to version 4 of styled-components, global styles are now declared through the createGlobalStyle and imported into the top component of the application. Check our src/layout/ folder.

File location

.
├── src/                    # App folder with all developer stuff
│   ├── components/         # All components used in the project
│   ├── layout/             # Laout the entire app is stored in one place
│   ├── pages/              # Pages that use components/
│   ├── static/             # Used to store fonts, icons, images
│   └── ...
├── webpack/                # Modules you can easily add to config
├── webpack.config.js       # All webpack settings
└── ...

Build production

To build a production version of your app you need to type

npm run build || yarn build

This will create dist folder where everything will be compressed and minified.

Aliases

If you need to configure your custom aliases you don't need .env file or something like eslint-import-resolver-babel-root-import. All you need is set aliases in webpack.config.js file.

// webpack.config.js
const common = merge([
  {
    entry: {
      index: './src/index.js',
    },
    // ...
    resolve: {
      extensions: ['.js', '.jsx'],
      modules: ['node_modules'],
      alias: {
        src: path.resolve(__dirname, 'src'),
      },
    },
  }
]);

/*
  src
  |- pages
    |- MyComponent
      |- index.js
  |- actions
    | index.js
*/


import actionName from 'src/actions';

const MyComponent = () => ();

Used plugins

• HtmlWebpackPlugin
• CleanWebpackPlugin
• MiniCssExtractPlugin
• HotModuleReplacementPlugin
• OccurrenceOrderPlugin
• UglifyJsPlugin
• OptimizeCssAssetsPlugin

The idea behind the example

Show one of the possible webpack configurations

Also remind me stuff :D