3 Replies - 442 Views - Last Post: 25 August 2017 - 07:40 PM

#1 harro.rm  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 63
  • Joined: 18-June 16

Completely lost on how to deploy Angular 2 + Express application

Posted 24 August 2017 - 09:25 PM

I've looked at a lot of posts, examples, etc but there is not one coherent example on how to deploy an application that uses both Angular 2/4 and Express.

For express: normally can be served using a command like: node server.js
For angular: ng serve

Combining both doesn't seem to work for me, and I am completely lost.

My folder structure:
client/
server/
dist/
    |_client/
    |_server/


If I run this following npm command: tsc -p ./server && node dist/server/app
It fails because there is no node_module found within dist/server - tsc doesn't compile node_modules.

If I run this command: ng serve --aot
Then the Angular app is served but not the Express server.

My question: How do I compile both Typescript of Angular 2/4 and Express and run both?

In addition, how to deploy this to production? Again, there is almost no clear examples on how to do this. I was able to piece some things together, but does not work either!

Issue with deploying to production: I put the contents of dist/ (e.g dist/client/ and dist/server/) in /usr/share/nginx/html
But when I access localhost:80 - I get forbidden. So I try localhost:80/client which loads but it fails to find the webpack'd files.

Can anyone help me out?

Is This A Good Question/Topic? 0
  • +

Replies To: Completely lost on how to deploy Angular 2 + Express application

#2 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4238
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Completely lost on how to deploy Angular 2 + Express application

Posted 25 August 2017 - 03:44 AM

From what I can tell, ng serve is just a handy development server for Angular 4 projects. You'd definitely not want that running on production servers.

Angular doesn't actually care much about the HTTP server it's being deployed on. It's front-end code, so it's essentially isolated from whatever NodeJS/NGINX/Apache/IIS/etc... setup you are using on the back-end to serve the project. - You just build the Angular project, and then deploy that on whatever HTTP server you choose.

In the case of Express, you'd have to set the NodeJS main script up so Express knows to serve the Angular code you build with ng build when requested. Then you would run the server in the typical Express way, whether that be with some sort of node main.js command, or some sort of NodeJS process management system.

With old-school HTTP servers like NGINX/Apache/IIS, you'd just copy the Angular build files into the web-root of your HTTP server, so it can be served as static content there. (A built Angular app is just some HTML and JS code, after all.)
Was This Post Helpful? 0
  • +
  • -

#3 harro.rm  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 63
  • Joined: 18-June 16

Re: Completely lost on how to deploy Angular 2 + Express application

Posted 25 August 2017 - 03:58 PM

It appears it was mostly me misunderstanding some things.. All of the examples and tutorials showed Angular 2/4 projects being served with a dev server, so I was confused and trying to do the same. But I didn't need to as Express did that for me.
Was This Post Helpful? 0
  • +
  • -

#4 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: Completely lost on how to deploy Angular 2 + Express application

Posted 25 August 2017 - 07:40 PM

You have to use ng build to get the `dist` folder that contains the compiled version of your entire project ( you will have to keep your project with it still.)
In the backend, you create the index.js route file in the route folder and you have to point your router exports to index.html that is in the dist folder, then you can run it as any other node.js web app.

(Linux) You use PM2 for node.js pre-deployment to help your app run constantly on the server, you will have to pick a server such as Ubuntu, Arch or Cent OS and then you use NGINX for proxy. Here is the tutorial

(Windows) You use IISNODE Or you can try this tutorial as well.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1