Hassan Sani
Hassan Sani (inidaname)


Hassan Sani (inidaname)

Deploying your Angular project to DigitalOcean for Free

Deploying your Angular project to DigitalOcean for Free

Hassan Sani's photo
Hassan Sani
·Mar 30, 2021·

3 min read

This is part of a series on how to deploy your Angular application to cloud servers for free.

First on this series is DigitalOcean

DigitalOcean released a feature called App Platform, simplifying the deployment of your project with few clicks, this gives you the chance to host 3 free static sites.

So let me list prerequisites, before we try out DigitalOcean

With all these in place let start.

On DigitalOcean's main page, at the top right, click on create, this will give you a drop-down list of menu to select

Digital Ocean's home page

Select Apps from the menu list

Menu drop-down

This will navigate to the app platform displaying 3 major git hosts for you to select one. Select the git service where your code is hosted, in this case, we are using GitHub. Apps Platform page

This will navigate you to GitHub's authorization page, select your profile name GitHub authorization page

Authorize and install DigitalOcean's service to your GitHub profile, choose whichever access you want to grant DigitalOcean, for this article I will choose all repository, (you may not want to do this for your profile). DigitalOcean on github

Now select from the dropdown of your repositories, the name of the app you want to deploy, for this article I am using a demo repository called cloud-free (I'm not good with naming things), select the branch you will want to deploy, mine is main branch Repository list

Now, you get to configure your deployment commands, DigitalOcean will auto-detect the source code's environment. Important: change the type to Static Site, and edit the Output directory to the dist/app-name, replace app-name with the name of your Angular App mine is cloud. Like I said, 'not good with naming' Configure Your deployment

At this point, you get to select the billing option for your app, by default it should be on the starter section it's free for us. Billing option

Now your app is deploying, go for a break, make sure you are staying hydrated, drink a lot of water and hey before I forget if you not already following me, why don't you do that now, but again you are taking a break so you can choose not to. Deployment in progress

Okay, let get back here and check, you should see Deployed successfully! Deployed Successful

We are Done!

Click on Live App and you should see you app Application screenshot

Stay here I will be writing about another cool service you can use in the next article.

Share this