Webpacker 3 modern front-end example todo app
- No Sprockets. Using webpacker for overall asset management.
- Both React client app and normal Rails MVC.
- Full npm support for sprinkles including
- 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
Copy these files to public directory and run server.
Run client side unit tests
Show storybook client UI catalog
Run client code formatting
Run client code lint
Bundle size analysis
public/packs/report.html is generated after build finished.