How To Deploy an Angular/Node app

Question

I have a simple Angular 4 frontend as well as a node backend which is hosted separately on Heroku.

I deploy my Angular app by running ng build and copying over the contents of the dist folder to the server.

I have since then decided to integrate the backend into the front end so it's all just one project instead of two.

I can easily run node server.js on the root and it runs perfectly on my localhost.

But how can I deploy this to my server? I obviously can't just ng build and copy over the dist folder because that only builds the client folders and files.

Could I just copy over the server folder which holds the routes as well as the server.js file along with the client files and then somehow tell the server to run server.js when the site is loaded?

I use FileZilla to transfer my files onto the server.

Questions:

• How do I deploy my angular/node app with FileZilla?
• Which files/folders to I copy over with the client files?

Answer 1

1. If you are using Angular CLI, run ng build command to generate the dist folder.
2. Copy the dist folder to the backend server nodejs project.
3. Serve the dist folder using your Nodejs code.

4. If you are using ExpressJS. This can be done in a single line

   app.use(express.static('dist'));

5. Install Heroku CLI and follow the tutorial to deploy your app: Heroku NodeJS Tutorial