How to start the web side and Node.js service at the same time in a Vite project?

Tips for running web and Node.js services at the same time in Vite project

Vite is well received for its rapid development experience, but in some scenarios, developers need to run both front-end web applications and back-end Node.js services in the same project, for example, when the web side needs to access system resources that Node.js can handle. This article will explain how to achieve this in a Vite project.

Background: Due to the limitations of the browser security mechanism, front-end JavaScript code cannot directly access local system resources. As a server-side running environment, Node.js can easily accomplish this kind of operation. Therefore, developers hope to start the Vite front-end service and Node.js service simultaneously through one command, and communicate with the back-end through the front-end to indirectly access system resources.

Solution: We can use Vite's buildEnd hook to achieve this requirement. Start the Node.js service after the build is completed through a custom Vite plugin.

Here is a sample plugin that demonstrates how to start a Node.js process after the build is finished:

 const { exec } = require('child_process');

export default function myPlugin() {
  return {
    name: 'start-node-server',
    buildEnd() {
      exec('node server.js', (error) => { // Suppose your Node.js service entry file is server.js
        if (error) {
          console.error(`Failed to start Node.js service: ${error}`);
          return;
        }
        console.log('Node.js service started');
      });
    },
  };
}

Important tips:

• Production environment: This method is mainly suitable for development environments. Vite is a build tool, not a process manager, and it is not recommended to rely on Vite to manage Node.js processes in production environments. In a production environment, a professional process manager (such as PM2) should be used to manage Node.js services.
• Deployment: If your front-end application is deployed to a standalone static file server, then this plugin will only take effect in the local development environment.
• Server-side code: You need a separate server.js file to contain your Node.js server code. This file should listen for a port and handle requests from the front end.

Through the above method, you can conveniently start Vite front-end service and Node.js service in the development environment at the same time, thereby achieving the need for front-end access to system resources. Remember, production environment deployment requires the use of a professional process manager to ensure the stable operation of Node.js services.

The above is the detailed content of How to start the web side and Node.js service at the same time in a Vite project?. For more information, please follow other related articles on the PHP Chinese website!