Publishing Angular Web App on Cloudflare Pages 2024

Publishing Angular Web App on Cloudflare Pages 2024

ยท

3 min read

I recently got into the hassle of trying to publish my Angular web app into Pages. None of the tutorial on the web helped me so I decided to come up with a simple twist. If you recently experienced the same thing, this is what finally works for me so it might help.

On the IDE ๐Ÿ’ป

Try to run

npx ng build --c production

This is to check whether the build can run locally on your system. The idea being if it can't run locally, then it will most probably won't run on the cloud.

The --c production flag is there to indicate that it is a production setting that should be run by the ng build. You can also run --configuration production if you want the long version (--c is a shortened version of --configuration). Npx is there because I use Node. Refer to this discussion on Stackoverflow to learn more.

P.s. Do not run ng build --prod as it has been deprecated. โ€ผ๏ธ

If you're using Node

Run node -v

PS A:\Code\> Node -v
v20.11.1

Note whatever number showed up. For me, it is 20.11.1. This indicates your Node version.

If you are using anything else..

Just try to find your environtment version.


On Cloudflare Pages ๐Ÿ›œ

Use this configuration:

Details:

SettingsValueChangeable?
Project nameXYES (Note the value because the exact same value needs to go into the Build output directory after /dist)
Production branchmain or masterYES (according to the branch you push your code, usually main or master)
Framework presetAngular (Angular CLI)NO
Build commandnpm run buildPROBABLY (if you use Yarn or something, haven't tried)
Build output directorydist/X/browserYES (according to your project name) and NO (keep the /browser behind it)

P.s. Do not use npx ng build --c production --watch. Your deployment does not need to wait for a code changes (--watch) as Pages will take care of that and rebuild after every commit to your repo. โ€ผ๏ธ

After that, open the Environment variables (advanced) and Add new variable

Variable name: NODE_VERSION (or change like YARN VERSION)
Value: Depends on the number shown on your environtment node -v.

Finally, click SAVE AND DEPLOY.

You should be good to go. For a simple, one page app, it should be deployed between 1-2 minutes. If anything goes longer than that, you might have a problem. That's the steps which have been succesful for me. I hope this helps! ๐Ÿ˜

ย