electronmon VS concurrently

Use electronmon to restart the Electron app when the main process code changes, and reload WebView for the renderer process.

electronmon: Like nodemon, but for the Electron process. Allows watching and reloading our Electron app.

concurrently npm package is a handy tool that lets you execute two processes at the same test, as to execute the E2E test you'll need to run the application as well, sometimes locally and sometimes remotely.

Similarly, npm run dev uses concurrently to manage all the various watch commands simultaneously.

We'll use concurrently to run the introspection, codegen, and Next.js dev server all together.

There's a package to speed this command up. Concurenct

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)