[PROD-DEPLOYMENT] Skill Tree Frontend in Cloudflare

[satyam73]

[PROD-DEPLOYMENT] Skill Tree of Cloudflare

Branch - main Repo - skill-tree-frontend

Environment Variables

NODE_VERSION = 20.11.1 YARN_VERSION = 4.1.1 NEXT_PUBLIC_APP_ENV = production

Here are the steps for deploying the frontend in Cloudflare with Next js static build export:

• Go to https://www.cloudflare.com/ and login with your credentials.
• Go to Workers and Pages in sidebar (image for reference)
• Click on create application button
• There is Workers and Pages in tabs, click on Pages
• Click on Connect to Git button and give necessary permission required for this repository
• If the permission is already setup with Git or you setted up, the repository will show here as netlify-skilltree is coming
• Select the project and click on Begin Setup
• Add this configuration in form
  • Production branch - main
  • Framework preset - Next JS (Static HTML Export)
  • Build command -

    yarn run build

  • Build output directory -

    out

    

• Fill this in Environment variables section

NODE_VERSION = 20.11.1 YARN_VERSION = 4.1.1 NEXT_PUBLIC_APP_ENV = production

• Then click on Save and Deploy button

• Hurray🥳🥳, we've deployed our site to Cloudflare

• Click on Continue to project button

• Now head over to url coming under Production heading if everything is working fine

• Yep we can see the url and our site in action. Nice✨

• Next step is to configure our domain on Cloudflare

Domain will be - https://skilltree.realdevsquad.com

Please follow this guide for adding custom domain - https://developers.cloudflare.com/pages/configuration/custom-domains/

[satyam73]

Closing this since the task got completed.

Here's the deployed link - https://skills.realdevsquad.com/