{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/restarting-development-environment/","result":{"data":{"markdownRemark":{"id":"b86c187a-37cf-513b-aaf3-2441ff6daf74","html":"
Description of the situation
\n

During the work with the static site based on Gatsbyjs, I got an issue. Every time when I needed to restart the development server I had a request to change the port. For example, 8000 port is busy let's try on port 8001 then port 8002, etc.

\n

This situation occurred when the structure of markdown files changed during the development process, which forced me to reload the environment for updating queries in GraphQL. Then in the terminal, I saw this message

\n
Something is already running at port 8000\n\n? Would you like to run the app at another port instead? › (Y/n)\n
\n

I agreed and the project was launched on a new port, after which I had to change the port in the browser tab or open a new one.

\n

Usually, I have open a lot of tabs on the browser. together with them I also open a tab for work with Netlify CMS. So, every change of port forced me to open a new tab. That means in my browser appear more tabs and I spend a lot of time finding a correct tab.

\n

This difficult and take a lot of time which I can spend with benefit. So I began to look for the solution

\n
Solution of the situation
\n

So, the solution is the following, you need to partially expand package.json, which offers GatsbyJS with its command.

\n

First of all, you need to add to your local environment a few npm packages nodemon and kill-port as the development dependencies:

\n
npm install nodemon kill-port --save-dev\n
\n

By default, nodemon is used to communicate with the Node server, and in this context, we will use its --exec property which will allow us to run commands in the terminal. For example:

\n
nodemon --exec \"your command here\"\n
\n

kill-port library which stops all processes on the specified port. For example:

\n
kill-port --port 8000\n
\n

By default GatsbyJS application works on 8000 port. So, before the next running of the development environment, we need to kill the 8000 port\nIf you have another port configured, then you need to replace its value for the kill-port command.

\n
kill-port --port 8000 && gatsby develop\n
\n

This is generally enough. but there is one inconvenient moment. This command we will need to enter every time when we need to restart the project. We can use the history of the terminal but it's not comfortable

\n

Therefore, it makes sense to place this command in the file package.json. And it will look something like this:

\n
// package.json\n\n\"scripts\": {\n    ...\n    \"dev\": \"nodemon --exec 'kill-port --port 8000 && gatsby develop' --watch gatsby-node.js --watch package.json --watch gatsby-config.js\"\n}\n
\n

Now when you execute this command the port will be automatically \"killed\" and started with the updated environment

\n

But there is last one point that is also desirable to consider when restarting the development environment, especially when changing the structure of markdown files. We need to clean the cache that generates GatsbyJS before startup the project.

\n

For this purpose in GatsbyJS, there is a special command gatsby clean, therefore I suggest changing the command in package.json together with \"killing\" of port I suggest clearing a cache of our project

\n
// package.json\n\n\"scripts\": {\n    ...\n    \"dev\": \"nodemon --exec 'kill-port --port 8000 && gatsby clean && gatsby develop' --watch gatsby-node.js --watch package.json --watch gatsby-config.js\"\n}\n
\n

Ready! Now when you restart the development environment, the port will not change, and the collections for GraphQL will always be fresh. You just need to execute the following command

\n
// npm\nnpm run dev\n\n// yarn\nyarn dev\n
\n

That's all!

","frontmatter":{"title":"Difficulty with replacing the port in Gatsby JS development environment","heading":"Difficulty with replacing the port in Gatsby JS development environment","subheading":null,"templateKey":"blog-post","date":"November 21, 2020","inner_article":true,"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcasSAH/xAAWEAEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQEAAQUCLFuf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAGBABAAMBAAAAAAAAAAAAAAAAAQAQEUH/2gAIAQEAAT8hR0QuK//aAAwDAQACAAMAAAAQdA//xAAWEQEBAQAAAAAAAAAAAAAAAAABECH/2gAIAQMBAT8QTZ//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAn/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARITFBYf/aAAgBAQABPxAmglZvUVtI+ZHmf//Z","aspectRatio":3,"src":"/static/23e577b774051f2d479f6a881c7fbe64/2ba53/fullsizerender.jpg","srcSet":"/static/23e577b774051f2d479f6a881c7fbe64/4d5f3/fullsizerender.jpg 240w,\n/static/23e577b774051f2d479f6a881c7fbe64/ea161/fullsizerender.jpg 480w,\n/static/23e577b774051f2d479f6a881c7fbe64/2ba53/fullsizerender.jpg 960w,\n/static/23e577b774051f2d479f6a881c7fbe64/bd316/fullsizerender.jpg 1440w,\n/static/23e577b774051f2d479f6a881c7fbe64/1be16/fullsizerender.jpg 1920w,\n/static/23e577b774051f2d479f6a881c7fbe64/1a54e/fullsizerender.jpg 3691w","sizes":"(max-width: 960px) 100vw, 960px"}}},"category":"solutions","tags":["gatsbyjs","terminal"]}},"categories":{"edges":[{"node":{"frontmatter":{"title":"Cheat Sheets"},"fields":{"slug":"/blog/category/cheat-sheets/"}}},{"node":{"frontmatter":{"title":"Solutions"},"fields":{"slug":"/blog/category/solutions/"}}},{"node":{"frontmatter":{"title":"Web Development"},"fields":{"slug":"/blog/category/web-development/"}}},{"node":{"frontmatter":{"title":"Overviews"},"fields":{"slug":"/blog/category/overviews/"}}}]}},"pageContext":{"id":"b86c187a-37cf-513b-aaf3-2441ff6daf74"}},"staticQueryHashes":["116749357","4080856488"]}