Webpacker 3 modern front-end example todo app

Dependency

• Rails 5.2
• Webpacker 3.5.5

Features

• No Sprockets. Using webpacker for overall asset management.
• Both React client app and normal Rails MVC.
• Full npm support for sprinkles including import statement.
• CSRF protection for API call.
• Add hash suffix to static asset filenames for production(cache-buster).
• Apply bootstrap CSS both server and client side.
• TypeScript support for sprinkles and client app.
• Flux for client architecture using React Redux with static type checking.
• Using CSS Modules for client compoents styling.
• Faster UI development using Storybook.
• Simple API and comprehensive message for assertion by power-assert.
• Component testing written by TypeScript using mocha and enzyme.
• Automatic code formatting using pretteir
• Static code analysis using TSLint
• Code size analysis using webpack-bundle-analyzer.
• Using lodash and just actually imported functions are bundled by webpack's tree-shaking.
• Using Babel to transpile esnext.
• Hot Module Replacement for development.

Out of the scope

• Server side rendering
• Client side routing

How to run

yarn install
bundle install
bin/rails db:setup
bin/rails db:migrate
foreman start

Then open http://localhost:3000/

How to deploy

Run webpacker to build.

RAILS_ENV=production bin/rails webpacker:compile

Then compiled assets will be generated to public/packs/. Copy these files to public directory and run server.

Run client side unit tests

yarn test

Show storybook client UI catalog

yarn storybook

Run client code formatting

yarn prettier

Run client code lint

yarn lint

Bundle size analysis

public/packs/report.html is generated after build finished.