Deploying Both the /browser and /server folders of an Angular SSR app to Azure Static Web Apps

Question

Branching off of the findings in this question, I am trying to deploy my Angular SSR app to Azure SWA. I have it currently running and deploying (using the GitHub Action here):

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_ROCK_04F7A950F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist/rardk-web/browser" # Built app content directory - optional
          app_build_command: "npm run prerender"
          ###### End of Repository/Build Configurations ######

My question is with these lines in particular:

output_location: "dist/rardk-web/browser" # Built app content directory - optional
app_build_command: "npm run prerender"

As I mentioned in the other question, my primary goal is for my dynamically-loaded blog posts (seen here for example) to preview when linked on social media platforms, Discord, etc. I believe it's the lack of SSR that prevents that currently. I have SSR set up and it runs locally and behaves as expected, but when deployed (via the aforementioned GitHub Action) it doesn't work properly. My suspicion is that the above lines specifying that I'm only deploying the /browser folder mean that I am not handling the server folder at all.

So - how do I properly deploy an Angular application with SSR, including both the browser folder and the server folder set up properly, to Azure SWA, if it's even possible?

Answer 1

Unfortunately, According to this Github issue, Angular SSR is not supported in Azure static web app. Its only supported in Next.Js app for Azure static web app.

Your method of deployment is correct with the Github actions, If you want you can add a separate build step for your Web app deployment:-

I tried your Github yml code and the deployment was successful and all the page parameters are loading successfully:-

As a workaround you can directly deploy your project in Azure Web app with Basic tier which will support SSR and many other advance Web app features like Monitoring, App service logging, Deployment slot, Kudu SSH access etc.

Reference to deploy angular app in Azure Web app.