Restarting gatsby develop on change to gatsby-node.js while developing source plugin

[isabellachen]

Summary

While developing a source plugin, I realise I have to ^c to escape the current build and gatsby develop again to see the console.logs in the terminal. Is there a way to get gatsby to run the gatsby-node.js file in the plugins/gatsby-source-eventbrite folder when I save changes instead of having to manually escape and run gatsby develop again?

I installed nodemon in the gatsby-source-eventbrite folder but I'm unsure how to configure it ... but I don't think it works this way since gatsby develop from the root passes in the config options and creates the nodes and such...

Relevant information

My folder structure source-eventbrite-site // gatsby develop from the root -- plugins ------ gatsby-source-eventbrite -------- gatsby-node.js // watch this file for changes

Environment (if relevant)

System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz Shell: 5.3 - /bin/zsh Binaries: Node: 10.1.0 - ~/.nvm/versions/node/v10.1.0/bin/node Yarn: 1.6.0 - /usr/local/bin/yarn npm: 6.0.1 - ~/.nvm/versions/node/v10.1.0/bin/npm Browsers: Chrome: 68.0.3440.106 Safari: 11.1.2 npmGlobalPackages: gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A

package.json

 {
  "name": "source-eventbrite-site",
  "description": "Source Eventbrite Site",
  "version": "1.0.0",
  "author": "Isa Chen <isachenx@gmail.com>",
  "dependencies": {
    "gatsby": "next",
    "gatsby-link": "next",
    "gatsby-plugin-react-helmet": "next",
    "npm-watch": "^0.3.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "watch": {
    "restart": "plugins/gatsby-source-eventbrite/*.js"
  },
  "scripts": {
    "watch": "npm-watch",
    "build": "gatsby build",
    "restart": "gatsby develop",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[zabute]

plugin code won't get hot-reloaded, AFAIK. But you could use watch if you're sick of manually restarting the dev server.

npm install watch kill-port --save-dev in your project root. . Add this to your npm scripts: "dev-plugins": "watch 'kill-port --port 8000 && gatsby develop' plugins "

Now you can npm run dev-plugins

It' will watch your plugins directory and will restart the dev server every time you make changes in the plugins directory.

[isabellachen]

@zabute I'm unable to get it to work :(

  "watch": {
    "restart": "plugins/gatsby-source-eventbrite/*.js"
  },
  "scripts": {
    "dev-plugins": "watch 'kill-port --port 8000 && gatsby develop' plugins ",
    "watch": "npm-watch",
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

[LekoArts]

@zabute There‘s no need for an extra package as gatsby-dev-cli has everything included: https://next.gatsbyjs.org/docs/how-to-contribute/#contributing-to-the-repo

The process described there makes it easier to develop a plugin.

[KyleAMathews]

@zabute nice solution! @isabellachen did you install the new dependencies first? Did you get an error when you ran the npm script? How did it not work?

Since @zabute provided a nice solution, I'll close this. @zabute it could make sense to add this to the plugin authoring docs somewhere as well https://next.gatsbyjs.org/docs/plugins/

[isabellachen]

My bad, I did not install kill-port. Solution works nicely :) Thanks :)

[isabellachen]

Although I'm unable to exit the process with ^C. Seems like I need to kill -9 the process in another terminal window. Not an issue, only wondering if it was the expected behaviour...?

[isabellachen]

@KyleAMathews Actually, the issues was that I was transpiling the code in plugins/src and chucking them out in the root of the gatsby-source-eventbrite, so @zabute 's solution was watching for changes in /src but the changes were not being reflected. I suppose the only solution is to develop in the gatsby-plugin-eventbrite folder and then at the end put the code in /src ...

[zebapy]

@LekoArts can you elaborate on how to use the gatsby dev cli to restart dev server on plugin changes? Is that what you're implying above?

edit: This is what I had to set up with npm-watch to get it to work. Granted I'm working on a local site plugin, not one to be published.

  "scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run dev",
    "restart": "kill-port --port 8000 && gatsby develop",
    "watch": "npm-watch restart",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "watch": {
    "restart": "plugins/**/*.js"
  },

If gatsby-node files can't be hot reloaded, it might be nice to add a flag like gatsby develop --watch-configs (lame label there but you get it) to restart gatsby develop when gatsby-*.js files change in root.