Auto Refresh Page (React With Ruby On Rails) - ruby-on-rails

Question

client folder where the react code sitsI am Using react with ruby on rails, I have created a separate folder named client for react code on the root. but whenever I changed something in the react i have to go to the page and refresh it manually, is there any way where I can automatically refresh the page whenever I can make any change in the code?

Answer 1

If you are using create-react-app then it should be available through that package. If you are building your own environment with Webpack, you can use Hot Module Replacement. https://webpack.js.org/guides/hot-module-replacement/
Edit:
Here are some example files from a project I made containing relevant code.
Webpack
const webpack = require('webpack');
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
resolve(__dirname, "src") + "/index.jsx"
],
output: {
filename: 'app.bundle.js',
path: resolve(__dirname, 'build'),
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: '#source-map',
devServer: {
hot: true,
contentBase: resolve(__dirname, 'build'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/,
options: {
emitWarning: true,
configFile: "./.eslintrc.json"
}
},
{
test: /\.(png|gif|jp(e*)g|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8000,
name: 'images/[hash]-[name].[ext]'
}
}
},
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: [
["es2015", {"modules": false}],
"react"
],
plugins: [
"react-hot-loader/babel",
"styled-jsx/babel"
]
}
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template:'template.ejs',
appMountId: 'react-app-root',
title: 'Project Name',
filename: resolve(__dirname, "build", "index.html"),
}),
]
};
Mainly, the entry, devServer, module.plugins and plugins at the bottom have the hot reloading code.
package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"lint": "eslint src/index.jsx src/**/*.jsx; exit 0",
"lint-fix": "eslint src/index.jsx src/**/*.jsx --fix; exit 0"
},
"repository": {
"type": "git",
"url": "url"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "url"
},
"homepage": "relevant-url",
"dependencies": {
"eslint": "^5.0.1",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.6",
"npm": "^6.1.0",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router-dom": "^4.0.0",
"styled-jsx": "^2.2.7",
"url-loader": "^0.6.2"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint-loader": "^2.0.0",
"html-webpack-plugin": "^2.29.0",
"react-hot-loader": "^3.0.0-beta.7",
"webpack": "^3.4.0",
"webpack-dev-server": "^2.5.0"
}
}
The hot reloading packages in the devDependencies
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { AppContainer } from 'react-hot-loader';
import { HashRouter } from 'react-router-dom';
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<HashRouter>
<Component/>
</HashRouter>
</AppContainer>,
document.getElementById('react-app-root')
);
};
render(App);
/*eslint-disable */
if (module.hot) {
module.hot.accept('./components/App', () => {
render(App);
});
}
/*eslint-enable */
Notice the AppContainer component imported from react-hot-loader that wraps your app in ReactDOM.render. Also, sometimes eslint can interfere with hot reloading which is why it is disabled and then enabled again at the bottom of the file.
I hope this helps.