将现有的nodejs服务器应用程序与现有的angular2 / 5客户端应用程序合并

Question

I have built an angular5 client app and a nodejs (using express) server app working on ports 4200 and 3000 respectively. Now I want to merge them both in a single app as a deliverable.

Will just copying the angular folder into nodejs work? Not sure how to go about it.

Answer 1

From a code organizing perspective. For development, keep each app in its own folder, something like

nodejs
angular-app

In production,

nodejs
  public
    angular-dist-folder

Deployment scripts can handle this for you, you should avoid doing manual copy pasting of stuff, It is important to keep code organized, it is absolutely important and vital for the success and health of any project.

Edit: I ld like to add, modern JS projects makes use of some sort of file system watchers, Ex fs.watch . Keeping apps in separate directories, prevents the unnecessary rerun of processes during development.

Answer 2

In your angular folder, run ng build --watch . This will build your project and create a dist folder. Also, it will watch for any code changes and rebuild.
You can copy this dist folder in your node project's public folder and make a few changes in your server.js file to integrate that.

You can use nodemon server.js to look for changes in node project.

Below are the changes which I made in my server.js to make it work.

app.use(express.static(path.join(__dirname, 'public/dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/dist/index.html'));
});