EasyIP2023 / default-react-rails

:stuck_out_tongue_winking_eye: React on Rails+React+Redux+Webpack+Bootstrap Web Application :stuck_out_tongue_winking_eye:

React Redux Rails Webpack Example

Web application that uses React on Rails + react + redux store + bootstrap v4 + Webpack v4 + ES7. It's a default react with rails web application example. I will add any new additions as need be. I only built this so that I could reference it later on when building other related web applications.

Installation/Usage

Be sure to have yarn and nodejs installed before usage

HMR

cd default-react-rails/
bundle && yarn
foreman start -f Procfile.hot

Static

Before running procfile static comment out the style-loader line in client/.bootstraprc it uses mini-css-extract-plugin. See file for reason why

styleLoaders:
#  - style-loader
  - css-loader
  - postcss-loader
  - sass-loader

cd default-react-rails
bundle && yarn
foreman start -f Procfile.static

Important npm packages can be found in client/package.json

To add packages just use

For development

cd client
yarn add <package name>@<version number> --dev

For dependences

cd client
yarn add <package name>@<version number> --dep

How Redux Works

This part is for me and for future references

Default Bash Commands For Installation

Commands came form react_on_rails gitbook

rails new my_app --webpack=react
# be sure to git commit changes
rails generate react_on_rails:install --redux
bundle && yarn

or

bundle exec rails webpacker:install
yarn add "rails/webpacker"
# because the installer has a bug that puts in an invalid version in your package.json.
bundle exec rails webpacker:install:react
yarn add --dev webpack-dev-server
rails generate react_on_rails:install --redux
bundle && yarn

Important Links

1. Facebook create react app

• Facebook code splitting
• Facebook analyzing bundles

2. Webpack code splitting
3. Shaka code react webpack rails tutorial
4. ReactJs docs

• ReactJs code splitting