loading...
Cover image for Add Hot Reload to React Rails 6

Add Hot Reload to React Rails 6

nodefiend profile image chowderhead ・1 min read

Photo Cred : Moritz Jager

Assumptions

  • Your running Rails 6
  • You have a React Component Entry Point
  • You have webpack installed in your Rails Repo

Install Dependencies:

yarn add react-hot-loader

Configure Plugins

babel.config.js

...
plugins: [
      'react-hot-loader/babel',
]
...

Modify Root Component

app.js


import React from "react"
import { hot } from 'react-hot-loader'

class App extends React.Component {
  render () {
    return (
      <React.Fragment>
        <Main/>
      </React.Fragment>
    );
  }
}

export default hot(App);

Thats it!

Now we just need to import hot into our base/root component and wrap our export in it.

make sure your running the rails server -p 3000 and also ./bin/webpack-dev-server in another window

This is literally all i needed to do to get hot reloading working for my project.

leave a comment below if you have any issues , and we can try and figure it out!

Posted on Nov 3 '18 by:

nodefiend profile

chowderhead

@nodefiend

code is my paint and the interwebs is my canvas. [https://nodefiend.github.io]

Discussion

markdown guide