Previously,
On how to deploy your Angular application to cloud servers for free. We took a look at deploying your Angular project to DigitalOcean
Hey, this is NOT some TV show but it fun adding it here.
Using Cloudflare
Cloudflare is a CDN provider and that's the much we need to know about them. Okay, early 2021, Cloudflare released a feature called Cloudflare pages to allow you to deploy your static sites for free.
Before I start with how you can use the service, here are the prerequisites
- Everything mentioned in the first article of this series.
- A Cloudflare Account, If you don't have one already just head over to cloudflare.com to create one.
- And your favourite TV show, I meant your favourite Me will be delighted if you would follow me and also subscribe to my newsletter, this is an optional prerequisite, and you can choose to ignore it as always.
With all these in place let start.
Head over Cloudflare and click on Pages, you will notice it's still in beta version as of this writing.
Navigate to Cloudflare pages and select Create a project.
Click on Connect GitHub account.
This will navigate to GitHub's authorization page, select your profile name to continue.
Authorize and install Cloudflare's service to your GitHub profile, choose whichever access you want to grant Cloudflare, for this article I will choose just the repository for the tutorial.
Now select the repositories, 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
.
Scroll down to configure your deployment commands, Cloudflare will provide a list of pre-configured builds options, select Angular CLI.
Cloudflare will auto-complete build commands ng build. Important: edit the Output directory to dist/app-name, replace app-name with the name of your Angular App, mine is cloud. Like I said, 'not good with naming'
Finally, let go to commercials, your code is deploying, I took a very long break before writing this section, you should too.
Welcome back and your code up, click continue.
And you are done now click on the visit site.
Here you are
See you next time