One of the benefits of using webpack is access to webpack's dev server and its hot module replacement functionality.
The webpack dev server with HMR will apply changes from the code (or styles!) to the browser as soon as you save whatever file you're working on. You won't need to reload the page, and your data will still be there. Start foreman as normal (it boots up the Rails server and the webpack HMR dev server at the same time).
foreman start -f Procfile.dev
Open your browser to localhost:3000. Whenever you make changes to your JavaScript code in the client
folder, they will automatically show up in the browser. Hot module replacement is already enabled by default.
Note that React-related error messages are possibly more helpful when encountered in the dev server than the Rails server as they do not include noise added by the React on Rails gem.
As you add more routes to your front-end application, you will need to make the corresponding API for the dev server in client/server.js
. See our example server.js
from our tutorial.