concurrently VS watchexec

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?

Hi, I am using Watchexec (https://github.com/watchexec/watchexec/releases) to monitor folder changes, but I want to exclude some folders. What parameter should I use to perform the route exclusions?

Use https://github.com/watchexec/watchexec

There's something similar to this called watchexec, which you can have a look at https://github.com/watchexec/watchexec

Or use watchexec which will do 95% of what you need and you're not tied to nodejs.

watchexec

I use watchexec to automatically run the code when saved, you should customise this to your liking.

OTOH PowerShell will not keep watching and is one of the requirements. In the past I've successfully used watchexecrepo and inotifywaitrepo.

I prefer watchexec as it's cross-platform.

Not specifically for frontend but a handy tool for quickly setting up auto-runners, auto-testers, auto-linters, auto-formattere etc etc. watchexec