Nuxt.js: Watch and reload api folder

Created on 10 Oct 2017 · 9Comments · Source: nuxt/nuxt.js

How to make nuxt watch for "non standard" directories and recompile / reload itself, and more specifically for dirs with additional server apis?

I have my express api in ~/api/. Since I reference the directory in serverMiddleware with '~/api', I would expect Nuxt to reload when I make some changes to the files in that dir, but it doesn't.

You can reproduce it easily with the "auth routes" example. Any change in the api folder doesn't trigger the rebuild action. Since the initial build is not exactly fast, having to restop / restart the server manually for every change in the site api can become boring easily.

I'm simply using npm run dev that fires nuxt, I don't have any direct control on either nodemon (if it's used internally) or on webpack (that I'm pretty sure is). I tried adding watch: [ '~/api/*.js'], watch: [ '~/api/index.js'], watch: [ '~/api/**/*.js'] to build in nuxt.conf.js but with no luck.

_{This question is available on Nuxt.js community (#c1634)}

help-wanted

Source

pistacchio

Most helpful comment

I installed nodemon (npm install --save-dev nodemon)

Then I changed package.json
```javascript
{
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\""
}
}

AlexRadch on 20 Nov 2017

👍6

All 9 comments

@pistacchio So I tried the auth routes example and added the following to nuxt.config.js:

module.exports = {
  build: {
    watch: ['api']
  }
}

Now when saving /api/index.js I can see nuxt reload in the Terminal logs, however, since it's running an express server... the express server still needs to be reloaded to reflect the changes.

I was also testing out using concurrently too:

yarn add concurrently --dev

Then in package.json

{
  "scripts": {
    "dev": "concurrently \"nuxt\" \"nodemon ./api\""
  }
}

This will reload the express app on save.

stursby on 10 Oct 2017

👍3

This has helped, thank you very much )

pistacchio on 11 Oct 2017

I installed nodemon (npm install --save-dev nodemon)

Then I changed package.json
```javascript
{
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\""
}
}

AlexRadch on 20 Nov 2017

👍6

thanks for the above, however it doesn't reload the page as it would with a vue file. nuxt makes use of webpack-hot-middleware for hot reloading, maybe this can be used?