如何实现一条命令同时启动Node Server与Angular 4应用？

Great question! Getting your Angular frontend and Node backend to spin up together with a single command is totally doable, and it’ll make your dev workflow way smoother. Here’s a step-by-step guide to set this up:

1. Organize Your Project Structure (Optional but Recommended) #

First, let’s keep things clean by separating your frontend and backend code. If you haven’t already, rearrange your project like this:

• client/: Your Angular 4 app (created with Angular CLI)
• server/: Your Node.js backend files (server.js, routes, models, etc.)
• package.json: Root-level package file to manage all scripts

If you already have an Angular app, just move it into the client folder. For the Node side, create the server folder and put all your backend code there.

2. Install concurrently to Run Multiple Processes #

We’ll use a tool called concurrently to run both the Node server and Angular dev server at the same time. Install it as a dev dependency in your root directory:

npm install concurrently --save-dev

3. Configure npm Scripts #

Update your root package.json with these scripts to tie everything together:

"scripts": {
  "start": "concurrently \"npm run server\" \"npm run client\"",
  "server": "node server/server.js",
  "client": "cd client && ng serve --proxy-config proxy.conf.json"
}

• npm start: This is your main command—it’ll launch both servers at once.
• npm run server: Starts just the Node backend.
• npm run client: Starts the Angular dev server with proxy settings (we’ll set that up next).

4. Set Up Angular Proxy for API Calls #

Since your Angular app runs on http://localhost:4200 and Node on (say) http://localhost:3000, we need to proxy API requests from Angular to Node to avoid CORS issues.

Create a proxy.conf.json file in your client folder with this content:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

This tells Angular to forward any request starting with /api to your Node server on port 3000.

Make sure your Node server is listening on port 3000 (adjust if you use a different port):

// server/server.js
const express = require('express');
const app = express();
const PORT = 3000;

// Example API route
app.get('/api/hello', (req, res) => {
  res.send('Hello from Node!');
});

app.listen(PORT, () => {
  console.log(`Node server running on http://localhost:${PORT}`);
});

5. Test It Out! #

Now, just run npm start from your project root. You’ll see both servers start up:

• Angular will serve your app at http://localhost:4200
• Node will run at http://localhost:3000
• Any API calls from Angular to /api/... will automatically route to Node.

That’s it! This setup keeps your code organized and lets you launch both parts of your app with one command.

内容的提问来源于stack exchange，提问作者Shubham Agarwal Bhewanewala