RRWBB

Yet another Setup

For another project

React 16.9.0 | redux | Webpack 4 | Babel 7 | Bulma

What is this?

This is a starter pack for build front end application of any (probably) complexity.

Why you might need this?

Because it can save a lot of time when you need to start your next project.

Motivation

My goal was to create setup for future projects without too much of "black box" solutions and with support of all required features for differrent needs. So there is no SSG, just webpack and babel. I also wanted to have clear, explicit and decoupled configs. It should also be optimized and use modern best practices. I couldn't find setup that could do all of that the way i want it, so i made this one.

I mostly borrow all the ideas from all around the Internet (especially from react-boilerplate) and put them all together.

Features

  • React

    16.9.0 With hooks support

  • Redux with persist support

    Persist for some crutial states

  • Redux saga with data-preload on server side

    For manageable side effects

  • React router connected to redux

    For better history experience

  • Reducer and saga injectors

    Logic (and code!) around store can grow very fast, so i wanted to exclude it from main bundle. It is also a good idea to not overwhelm all pages with all saga watchers. This logic mostly taken from react-boilerplate.

  • Code splitting with @loadable/component

    Simple as it is: reduce main bundle size. We can also prefetch/preload components for better user experience.

  • SSR with code splitting support

    For better SEO support

  • i18n

    With separate json loading for every language

  • Dev server with HMR

    Run by webpack-[dev|hot|hot-server]-middlewares for fast and convenient development

  • Helmet

    For better SEO support

  • Scss with code splitting support

    For styling. Code splitting helps with css size optimization

  • Css load optimization

    Even this bundle uses Bulma with several components imported, main .css file size is around ~20Kb without gzip (around ~170Kb without purge css).
    Purge css is disabled in dev mode

  • Basic scaffolding

    With amazing plop generator you can add pages and components quickly

  • SPA build

    Separate SPA build for static hosting

    See example (hosted for free by Netlify)

Performance

  • Pass Google Lighthouse with green scores

    Lighthouse score

    Using just $5/mo droplet on Digitalocean and free Cloudflare service

  • Low rate of unused code

    Lighthouse score

TODO

  • Test coverage

  • Add storybook

  • More sample pages

  • Better requests handler

  • PWA

Usage

Install: 

npm i

Start dev server: 

npm run dev

Build and start prod server: 

npm run prod

Build and analyze bundle size: 

npm run analyze

Build without start: 

npm run build

Separate start command (should make build first): 

npm run start:prod

Generate page: 

npm run gen page

Generate component: 

npm run gen component

Extract intl lexems to JSON files: 

npm run extract-intl

Check code style: 

npm run lint

Fix code style: 

npm run lint:fix

SPA build: 

npm run build:spa

SPA local server: 

npm run start:spa