Step 1.4 - Letting Webpack know React and ReactDOM are external

React and ReactDOM are being brought in by Hyperloop, so we need to let Webpack know that these libraries are external so we do not end up with more than one copy of React running. Note that you will also need to do this for your production environment.

Step 1.5 - Building the webpack bundle

You will need to do this step whenever you make any changes to Webpack or add additional libraries though Yarn.

Run the following commands in your console:

rm -rf tmp/cache/
bin/webpack
rake environment

Note in the above, you should always delete your cache before building your webpack assets. rake environment will recompile Hyperloop.

In the future, when you will add a new library with webpack, it can happen that it is not correctly loaded. So, in this case, we advise to delete the node_modules directory, re-install libraires, re-generate the webpack file and clear Hyperloop cache and browser cache:

Step 1.8 - Adding CSS pack files to the asset pipeline

Add this line:

//app/assets/stylesheets/application.css
*= require client_only.css

Note: if you prefer that your CSS pack files being directly packed into the client_only.js you can modify the config/webpack/ config files and run the rm -rf tmp/cache/; bin/webpack; rake environment again.

Part 2 - Implementing the helloworld app

Step 2.1 - Creating the Helloworld component

Run the hyperloop generator:

rails g hyper:component Helloworld

You can view the new Component created in /app/hyperloop/components/

Step 2.2 - Updating Helloworld component code

Copy and paste this code into the component file you've just generated: