Angular v17 Deploy To GitHub Pages using GitHub Actions CI/CD (automated)

This is just a basic app that only contains relevant files to set up this type of deployment - not much else.

VIEW LIVE

OPTION 3

• PROs
  • automated deployments CI/CD
  • using a single github repo
• CONs
  • the code is public when using GitHub free
  • more involving setup, creating an additional branch, adding github actions, GH_TOKEN

Step 1:

• create a git repo, create a local folder for the repo, init (github commands)

Step 2:

• create a your Angular (v17) app & push to main branch

Step 3:

• add the build script command in package.json

"build:prod": "ng build --configuration=production --base-href=/<repoName>/"

Step 4:

• adjust oututPath in angular.json (dist)

Step 5:

• setup a personal acces token GH_TOKEN to use later (classic)

Step 6:

• create a main.yaml file in .github/workflows/main.yaml at root level
• refer to this project for placement and contents (adjust to match your project)

*using prebuilt github actions by James Ives github-pages-deploy-action

Step 7:

• create a new branch only for the contents of the dist folder
• erase everything apart fom the dist folder from that second branch and push the changes (I named my branch 'prod')
• verify that your 'main' branch contains your entire app, while the second branch only has the contents of the dist folder

Step 8:

• go back to the 'main' branch and push -> this should trigger the workflow from the main.yaml file

Step 9:

• setup github pages to use the second branch, the one that has only the contents of the dist folder