How to deploy AngularJS, Gulp, Bower and NPM packages full frontend app to digital ocean?

Question

I have a frontend application in AngularJS, gulp server with bower and npm packages. I want to deploy that application to digital ocean droplet and when I go to digitalocean provided IP, I get my app running in browser.

Also I want continuous deployment like capistrano in rails. Also my front end is talking to rails backend completely separate API app.

I am using Angular 1.5, Bower, NPM, Angular Material and GULP

Answer 1

• First You need to build all your files for production. (One for your code source JS and one for all your libraries used).
• a Server (Nginx,Apache...) to serve your compiled files (HTML,JS,CSS) on your VPS Instance.

So you have two choice, have a script who run all necessary build task in your server and finally deploy (copy/paste) it inside your server directory.

Or Build all your files locally and just push your compiled files to your server.

I think it's better to compile file on another server or on your local machine because you will use resource on your server and you will need to install all requirements building on your server machine.

Answer 2

DO has a nice tutorial on their website about using git (post-receive) hooks. Really simple, but very powerful. I'm using it myself to push code to the server, run the build scripts and copy the application to the web directory. See https://www.digitalocean.com/community/tutorials/how-to-set-up-automatic-deployment-with-git-with-a-vps for a tutorial on the git post-receive hook.