How to deploy your Angular project to Cloudflare Pages for Free

Subscribe to my newsletter and never miss my upcoming articles

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.

Cloudflare's Main Page

Navigate to Cloudflare pages and select Create a project. Cloudflare pages

Click on Connect GitHub account. Create a Project page

This will navigate to GitHub's authorization page, select your profile name to continue. Screenshot from 2021-03-31 07-53-29.png

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.

Cloudflare service on GitHub

Now select the repositories, for this article I am using a demo repository called cloud-free (I'm not good with naming things).

Select Repository

Select the branch you will want to deploy, mine is main branch Select Branch to deploy.

Scroll down to configure your deployment commands, Cloudflare will provide a list of pre-configured builds options, select Angular CLI.

Configure Builds

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'

Build Commands

Finally, let go to commercials, your code is deploying, I took a very long break before writing this section, you should too. Deploying

Welcome back and your code up, click continue. Successfully deployed

And you are done now click on the visit site. Done

Here you are Visit your page

See you next time

No Comments Yet