concurrently VS Nodemon.io

Before we begin, it's essential to ensure that we have Tailwind CSS and Concurrently installed. Tailwind CSS utility classes will be used for styling our project and will not affect the functionality. Concurrently will allow us to run our React frontend and server file simultaneously on our machines. For now, knowing the purpose that Concurrently serves is enough. We will see how to make it work later in the article.

To efficiently develop and test these applications, it’s essential to run React and Express servers simultaneously. One option is to manually start each server using separate terminal windows or tabs, but this approach is cumbersome and inefficient. An option is to use the concurrently or npm-run-all  CLI tools designed to run multiple npm-scripts in parallel or sequentially.

Let's configure our scripts in the package.json file to launch JSON-Server, to make the process easier we will use Concurrently, an NPM package that allow us to run multiple commands simultaneously.

[1] https://metatype.dev [2] https://github.com/metatypedev/metatype/blob/main/whiz.yaml [3] https://actix.rs/docs/actix/actor/ [4] https://github.com/open-cli-tools/concurrently

Lastly if you want to run your dev build tool and backend as a single command you could try something like pm2 (https://www.npmjs.com/package/pm2) or concurrently (https://www.npmjs.com/package/concurrently). This isn't necessary but might be a nice-to-have. NPM workspaces could help you organize this with a common package.json file too. (https://docs.npmjs.com/cli/v7/using-npm/workspaces)

We attempted to use a combination of tsc --watch, concurrently and Nodemon, but started to run into things breaking left and right, e.g.

Now, the tsconfig.vitest.json seems to be the most "complete" (it will check app files as well as test files), so it's a good choice if you really had to choose one config and run with it (and you still get type checking in the IDE for each config). But, this doesn't include the files from tsconfig.config.json, and as an app grows, the "app" and "vitest" configs may diverge, so wouldn't it be best to use something like concurrently or npm-run-all to run vue-tsc against all 3 configs?

nodemon - enables automatic reload of your server after code change docs

Then, install nodemon (in the VSCode terminal also), which, to my understanding, automatically refreshes the server you'll be sending requests to, whenever you make a change. Using plain node.js, you'd have to manually stop and restart the server after every change.

That's already pretty good, but as you already know it's a PITA to work with this during development. You will have to rebuild your Docker images whenever you change your code, even though your apps will probably support hot-reloading out of the box (or with something like Nodemon if not).

Are you moving your projects to use ES Modules but you are facing some unexpected issues? You are not alone in this fight. In this tutorial, you will learn how to set up nodemon along with ts-node.

We can now use npm run dev to start the server using nodemon, which enables hot refreshing on changes.

Welcome to my blog, where we dive into the intriguing world of Node.js development and tackle one of the common stumbling blocks many developers encounter: the "Nodemon Error - nodemon.ps1 cannot be loaded because running scripts is disabled on this system." If you've ever come across this error while working with Nodemon, fear not! In this article, we will explore the causes behind this issue, understand why scripts are disabled on certain systems and most importantly, provide you with practical solutions to overcome this obstacle and keep your development workflow seamless. So, let's embark on this troubleshooting journey together and empower ourselves to conquer the Nodemon Error!

You’ll need to restart the server using node index.js whenever you change any project file. You can also use Nodemon to automate this.

nodemon will be required to monitor for any changes in our source code and automatically restart our server.