Razzle on dev mode does not update the server code on change

[k4mr4n]

I set up the razzle as a package inside my monorepo.

• root
  - web (razzle)
  - components (some dumb components)
  - API (some API calls)
  with any change on other packages the razzle client-side gets updated but the server-side still works with the old build of the packages and sometimes throws errors due to incompatibility so I have to restart the whole server each time to see the changes.

How can I put the razzle server config on watch mode?

[fivethreeo]

Are you using some kind of async initialization of express or other server? If so you may need to make razzle send sigterm to the server process. https://github.com/fivethreeo/razzle-prisma-graphqlcodegen-urql-formik-jwt/blob/main/razzle.config.js#L63

[k4mr4n]

It worked! thanks

I'm using typescript in the API package. and vite for the components package to build.
I have them on the watch mode so when I make a change I see it on the web (razzle) package.

Thank you 🙏

[k4mr4n]

@fireyy I went back to the codebase again and noticing that the solution did not work.
there are two issues:
1: on the razzle package when I update my code for example removing a component and then refresh the page. the page still has the component on the initial load (the server did not update after saving the changes) but the client did update and now I have messed up styles. so the solution would be rs<enter> on the terminal

2: other packages are on watch mode and changing them clear their dist folder which causes a crash to the razzle start command. and then after a few seconds, I can see the changes after a refresh on the page.

please let me know if I could implement a better setup with razzle and other packages 🙏

[fivethreeo]

1. Hard to say why without any more info. Are you using the sigterm fix?
2. If dist is deleted i guess the server reloads but crashes when importing because the packages are not rebuilt yet.

[fivethreeo]

2. maybe set https://webpack.js.org/configuration/watch/#watchoptionsaggregatetimeout

[fivethreeo]

2. or somehow wait for rebuild of the packages with a webpack plugin

[k4mr4n]

@fireyy I used the sigterm fix but it did not change the behavior.

About the 1:

1: on the razzle package when I update my code for example removing a component and then refresh the page. the page still has the component on the initial load (the server did not update after saving the changes) but the client did update and now I have messed up styles. so the solution would be rs on the terminal

I found out that issue happened because of the react-refresh plugin and containing it only to web fixed the problem

Here is my razzle config:

modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      webpackOptions, // the modified options that will be used to configure webpack/ webpack loaders and plugins
    },
  }) {
    if (target === 'web') {
      // client only
    }
    if (target === 'node') {
      // server only
    }
    if (dev) {
      // dev only
      if (target === 'node') {
        // to update the node server with each change on other packages
        webpackOptions.startServerOptions.signal = 'SIGTERM'
      }

      if (target === 'web') {
        // insert react-refresh babel plugin into the razzle
        const babelOptions = webpackConfig.module?.rules[0]?.use?.[0].options
        babelOptions.plugins = [
          ...(babelOptions?.plugins || []),
          require.resolve('react-refresh/babel'),
        ]

        // react-refresh for webpack
        webpackConfig.plugins.push(new ReactRefreshWebpackPlugin())
      }
    } else {
      // prod only
    }

    // You can pass your env variables here.
    webpackConfig.plugins.push(
      new webpack.EnvironmentPlugin([
    // ...some vars
      ]),
    )

    // webpack 5 does not support node polyfills out of the box anymore
    webpackConfig.plugins.push(new NodePolyfillPlugin())
    return webpackConfig
  }

On 2

other packages are on watch mode and changing them clear their dist folder which causes a crash to the razzle start command. and then after a few seconds, I can see the changes after a refresh on the page.

So my monorepo has 3 packages

• components: I'm using vite to build it and it contains some dumb components created by tailwindcss
• API-package: Im using only typescript to build and compile this and it contains some hooks and API calls using react and graphql
• web-package: where Im using razzle to enable the SSR and importing and using other two packages.

Based on the above razzle config I also tried adding

webpackConfig.watchOptions: {
    aggregateTimeout: 5000,
  },

But it did not work and rebuild the server and client again instantly.

Any idea on how to manage this monorepo with a better development experience or any other best practices which you might suggest?

[fivethreeo]

For react-refresh just set options.enableReactRefresh to true in razzle options. Also make sure you don’t have anonymous exports because react refresh can’t handle that.

[fivethreeo]

I think maybe razzle adds a poll for code updates. Could try removing that from the server entry.

[k4mr4n]

@fivethreeo thank you for the response
options.enableReactRefresh worked too so I removed my own implementation.
but on the polling topic do you know if there is an option for that on the razzle or should I add my own dev-server to the razzle config?

[fivethreeo]

Try removing https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfigAsync.js#L488 somehow

HMR really is magic or bad voodoo ;)

[k4mr4n]

removing the line did not work but I tried another solution that worked for me
I had an issue with updating the components package which was getting build and watched by vite and take 10s.
replacing vite with tsc + tailwind-cli build made the build much faster and now my monorepo has a good experience on changing and watching all packages

Thank you