Deploying Angular app to Azure static web app from gitlab CI/CD pipeline

Question

I have repository in GitLab for my angular application.

I'm trying to deploy Angular app to Azure Static Web App using CI/CD in Gitlab.

I'm not able to find a proper documentation or blog related to this, Please note I'm not a DevOps guy, I'm a developer trying to learn.

I tried writing the .yml script for build and deploy, the build succeeded but the deploy step was somewhat tricky and did not succeed.

so followed this link from Microsoft :-

https://learn.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=angular

After following the steps provided in the above mentioned link the pipeline succeeded but with some errors like this

Could not detect any platform in the source directory.
Error: Could not detect the language from repo.
---End of Oryx build logs---

the job succeeded & when I followed the link I see blank web page but with tab showing the name and icon of the project(attached an image).

What am I doing wrong here? I suspected it to be the application path but not sure

Here is the .yml script I used from the link with some changes

stages:
   - build
   - deploy

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'
  OUTPUT_PATH: '$CI_PROJECT_DIR/dist/hero'

build:
  stage: build
  image: node:18.15.0-bullseye
  script:
    - npm install
    - npm run build --prod
    - ls
  artifacts:
    paths:
      - $OUTPUT_PATH

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."
    - ls

Here is some log of the pipeline build during deploy step:-

Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---
Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues
Oryx Version: 0.2.20221103.1, Commit: a2c65dde152b749fea395f4d1242ea9350942258, ReleaseTagName: 20221103.1
Build Operation ID: |RWFxHLm8/Jk=.8298183e_
Repository Commit : eebef19bd060ae45bb50710be46a56b052fc83d4
Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.
---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
Finished building app with Oryx
No Api directory specified. Azure Functions will not be created.
Either no Api directory was specified, or the specified directory was not found. Azure Functions will not be created.
Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.

Answer 1

Found a working solution, after tweaking around the code for a while my colleague helped me find the solution

I had to change variable APP_PATH: '$CI_PROJECT_DIR/src' remove the /src and only keep the $CI_PROJECT_DIR

The updated Yaml looks like this:-

stages:
   - build
   - deploy

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'
  OUTPUT_PATH: '$CI_PROJECT_DIR/dist/hero'

build:
  stage: build
  image: node:18.15.0-bullseye
  script:
    - npm install
    - npm run build
    - ls
  artifacts:
    paths:
      - $OUTPUT_PATH

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy:latest
  script:
    - echo "App deployed successfully."
    - ls

for newbies make sure you have added the variable $DEPLOYMENT_TOKEN in GitLab.

Hope this helps.