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?

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?

• javascript
• node.js
• angular

• 1 I suggest you look into a Continuous Integration / Continuous Deployment platform like Travis and CircleCI. You can give the mands to execute before deployment and they will do the heavy lifting for you. – tbking Commented May 12, 2017 at 7:38

2 Answers 2

1. If you are using Angular CLI, run ng build mand 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

You don't need to build the node app. Node runtime can pile the javascript on the fly.

The build step in angular packages up your code into one file. There is no equivalent in node as there isn't any point. The reason angular minifies and packages a file is so you can download it quickly. You never download the code from node.

On Heroku it's really easy, you don't need to copy anything over just run git push heroku master from the root of your node folder as per the instructions here https://devcenter.heroku./articles/getting-started-with-nodejs#deploy-the-app

Just make sure that in your package.json you have all the modules you rely on. It might work locally if you have npm modules installed globally but they also need to be in the package.json so heroku can download them by running npm install