2

I have a monorepo with two apps:

  • The web app (Next.js)
  • The UI library (Tailwind, which uses Microbundle)

The only way I managed to make the web app see the changes I make to the UI library is by:

  • Making the changes
  • Rebuild the UI library (in this case, I'm using microbundle watch)
  • Manually restart the Next.js server

My question is: how can I automatically restart the Next.js server every time the files within ui/dist are recreated (because they are rebuilt every time a change is made)?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Guilherme Oderdenge
  • 4,935
  • 6
  • 61
  • 96
  • Not entirely sure, but you might be able to customise the webpack config https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config? – evolutionxbox Sep 22 '21 at 16:51

1 Answers1

3

You can use nodemon to watch any files and restart a node app, the Next.js app in this instance, when they're modified.

First, create a nodemon.json file in the Next.js project folder with the following contents, replacing the path to your ui/dist folder accordingly.

{   
    "ignore": ["node_modules", ".next"],
    "watch": ["path-to/ui/dist/**/*"],
    "ext": "js json",
    "exec": "next dev"
}

Then, you'll have to replace your dev script to run nodemon instead.

"scripts": {
    "dev": "nodemon",
    ...
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • 1
    Also this can be easily used with [`concurrently`](https://www.npmjs.com/package/concurrently) if the OP wants to execute both `microbundle watch` and `nodemon` in a single command. (A `dev` script for concurrently needs to be added in the __base__ package.json of the monorepo then.) – brc-dd Sep 23 '21 at 09:47