Github Actions Deploy Angular to Server

Karthik Ponnam
3 min readApr 29, 2020

Hello All,

As a developer, it will always be a repetitive task for us to run deploy command and then zip the files and connect to sftp > upload > unzip. some times we find it hard to do so. and some cases it will be slow may be of various reasons like pc configurations, Internet speed and other

So recently GitHub has launched Github Actions which will help us to automate tasks

So now we are going to see how to build an Angular project then deploy it to a server using ssh

Let’s get started

Let's prepare our project in GitHub and ready to deploy

Configure GitHub workflow

Once our project is ready we need to configure our GitHub workflow

To configure create a folder named .github inside it workflows now inside this workflows directory, we are going to create a new file which will hold our yml code to build and deploy

The first line of code will tell the Workflow name

Code on > push > branch will tell on what action you want to run the job for more details about that visit this link Workflow Syntax

In above code initially, we create a job and tell it to which operating system to be used and what is your working directory if your project code is in a subdirectory

Her we are going to use ubuntu and setting my work-directory to ./ as it's completely optional but I am leaving it here as some may face a problem with it

Once we are done with this we create steps to perform one by one

so in these first two steps we are using two actions first one uses full to clone your project. the second one is used to set us nodejs environment for us in the allocated space for us

We setup cache for our node modules using actions/cache@v1 action

in these lines of code we install dependencies from our packages.json and then we install @angular/cli finally, we run ng build --prod to build our code

next, we delete any files in the server from our hosting location so we can write new files

here if you see we have some variables ${{ secrets.SSH_PASS }} we are coming from GitHub secrets you can add them in the project settings > secrets

In the above lines of the code, we execute some Linux commands which will compress our files to app.tar.gz then connect to the server via SCP and upload it to our hosting location then uncompress the file and finally delete the app.tar.gz

Output

Thanks for your time.

Hope you like it, if yes clap & share

--

--

Karthik Ponnam

❤️ to Code. Full Stack Developer, Flutter, Android Developer, Web Development, Known Languages Java, Python so on.,