How to deploy angular 7 project directly to my webserver, so that i shouldn't migrate my dist folder always after deployment?

Question

Currently, I am deploying my Angular 7 Project by using FileZilla to migrate my local files from ./dist folder to server public_HTMl. This is a quite tides job to carry in a daily basis, so I want to deploy my code directly to the server, when I hit ng build --prod then those compiled files have to be migrated directly to the server. Do anybody here who can help me to solve this problem?

To get rid of this problem I have tried lots of steps:

I was using bitbucket pipelines to execute my code, it came to be costly and I cannot run it as well, It took several hours but cannot give output for me.

I also tried by using new Git Repository even it's a good way but cannot give me the solution because when I deploy my code locally it creates a new folder every time while I execute a command.

So, I want to get help and deploy this code directly to the server that is going to host my application. Thank you all and hope all of you provide me good tips regarding this problem.

Answer 1

You can do it in the simple way. Create basic bash/sh script or windows executable and use rsync to do this automatically:

deploy.sh:

#!/bin/bash
ng build --prod
rsync -arvt ./dist remoteuser@remotehost:/var/www/remotedirectory

To avoid entering login and password every time add RSA public key to your remote machine(trusted host). You can combine this solution with Bitbucket pipelines , when the free plan ends I run this script manually from my developer machine.

bitbucket-pipelines.yml:

image: mycustomimage:latest
pipelines:
  default:
    - step:
        name: Build and deploy to production
        caches:
          - node
        deployment: production
        script:
          - npm install
          - npm install -g @angular/cli 
          - ng config -g cli.warnings.versionMismatch false
          - ./deploy.sh

Instead of a simple script you can use some more complex solution like Capistrano , Shipit or some other more advanced tool. All depends on your needs...

The simplest solution is always the best :)