react_on_rails:install generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for
-R is that
redux is off, and the default of
-b is that
skip-bootstrap is off.
rails generate react_on_rails:install --help for descriptions of all available options:
rails generate react_on_rails:install [options]
-R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example. Default: false
[--ignore-warnings], [--no-ignore-warnings] # Skip warnings. Default: false
-f, [--force] # Overwrite files that already exist
-p, [--pretend], [--no-pretend] # Run but do not make any changes
-q, [--quiet], [--no-quiet] # Suppress status output
-s, [--skip], [--no-skip] # Skip files that already exist
The react_on_rails:install generator integrates webpack with rails with ease. You
can pass the redux option if you'd like to have redux setup for you automatically.
Passing the --redux generator option causes the generated Hello World example
to integrate the Redux state container framework. The necessary node modules
will be automatically included for you.
Then you may run
Another good option is to create a simple test app per the Tutorial.
Understanding the Organization of the Generated Client Code
The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of
client/app/bundles. This encourages for modularity of domains.
Inside of the generated "HelloWorld" domain you will find the following folders:
startup: This contains the entry point files for webpack. It defaults to a single file that is used for server and client compilation, but if these need to be different, then you can create two webpack configurations with separate endpoints.
containers: "smart components" (components that have functionality and logic that is passed to child "dumb components").
components: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
You may also notice the
app/lib folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
If you have used the
--redux generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under