Is it possible to hot reload (without refreshing the page) in symfony + react project?

Question

I tried in webpack encore to configure dev-server for hot reload. After making changes and pressing ctrl + s, the page refreshes and you can see the changes. But is it possible to make the changes visible without refreshing the page? The application is put in docker containers.

let config = Encore.getWebpackConfig();

config.cache = {
  type: 'filesystem',
  cacheDirectory: `${__dirname}/.webpack-cache`,
};
config.devServer = {
  host: '0.0.0.0',
  port: 8080,
  hot: true,
  watchFiles: ['assets/**/*'],
  liveReload: false,
  open: false,
  allowedHosts: 'all',
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  devMiddleware: {
    writeToDisk: false,
  },
  client: {
    overlay: false,
    logging: 'info',
    progress: true,
  },
};

module.exports = config;

after writing this code I thought that hot reload would work without refreshing the page

Shiladitya · Accepted Answer · 2024-09-10 07:28:21Z

let config = Encore.getWebpackConfig();

config.cache = {
  type: 'filesystem',
  cacheDirectory: `${__dirname}/.webpack-cache`,
};
config.devServer = {
  host: '0.0.0.0',
  port: 8080,
  hot: true,
  watchFiles: ['assets/**/*'],
  liveReload: true,
  open: false,
  allowedHosts: 'all',
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  devMiddleware: {
    writeToDisk: false,
  },
  client: {
    overlay: false,
    logging: 'info',
    progress: true,
  },
};

module.exports = config;

You forgot to update the liveReload key to true. Also check the watchFiles: ['assets/**/*']. It should point to src folder,

Reference: Document

Sample code`

.configureDevServerOptions(options => {
    options.liveReload = true;
    options.static = {
        watch: false
    };
    options.watchFiles = {
        paths: ['src/**/*.php', 'templates/**/*'],
    };
})`

Hope this will help you

Collectives™ on Stack Overflow

Is it possible to hot reload (without refreshing the page) in symfony + react project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related