Deploy PAC-ID Landing Page on Azure

This guide walks you through deploying you PAC-ID landing page using Azure Static Web Apps.

What is Azure Static Web Apps?

Azure Static Web Apps is a fully managed service from Microsoft that makes it easy to deploy and host modern web applications. It is ideal for our purposes because:

Optimized for SPAs: Built-in navigationFallback handles PAC-ID deep links.

Flexible Routing: Rewrite rules, CORS headers, and 404 fallback via staticwebapp.config.json.

Free SSL & Global CDN: Fast, secure hosting without setup.

Zero Server Maintenance: Deploy without managing infrastructure.

CI/CD Ready: Integrates with GitHub Actions for automation.

Prerequisites

Before deploying to Azure, make sure you have the following items prepared.

  1. Branding assets You should have:
    • logo.png – the logo that appears on the landing page.favicon.ico – the browser tab icon.
    Either rename your own logo and favicon files to these names, or update the references in index.html if you want to use different filenames.
  2. Company-specific versions of the coupling_information_table and resolver_config and files ready:
    • coupling-information-table
      The legacy format currently used by the app. This must be adapted to the company’s devices / setup.
    • resolver_config.yaml (optional, but recommended)
      The new format. It is not strictly required yet, but it is the way forward; services will increasingly use this instead of the old table.
    You can use the resolver tester tools prepare those files:
    • https://webtools.labfreed.org/resolver-tester/v1
    • https://webtools.labfreed.org/resolver-tester/v2
  4. Azure account and subscription
    You need an Azure subscription to host the site as an Azure Static Web App.
    If you do not have one yet, create an account and subscription (free trial or pay-as-you-go) via the Azure sign-up flow: https://azure.microsoft.com/free.
    The Azure Static Web Apps documentation (including “Get started” links) is here: https://learn.microsoft.com/azure/static-web-apps/.
  5. GitHub account and repository
    You need a GitHub account to host the project source code and connect it to Azure Static Web Apps.
    If you do not have a GitHub account yet, create one at: https://github.com/signup.

Get the Resources

  1. Download and unpack
    Download https://labfreed.org/wp-content/uploads/2025/11/pac.issuer_landingpage.zip, unzip it, and update coupling-information-table and resolver_config.yaml for your company.
  2. Create a new GitHub repo
    • Go to GitHub → New repository.
    • Choose a name (e.g. pac.issuer_landingpage).
    • Do not add README/.gitignore/license.
    • Click Create repository.
  3. Upload the files via the GitHub web UI
    • On the new repo page, click “uploading an existing file”.
    • Drag/drop (or select) all files from the unzipped root folder:
      • index.html
      • favicon.ico
      • logo.svg
      • staticwebapp.config.json
      • coupling-information-table
      • resolver_config.yaml
  4. Commit
    • Enter a short message, e.g. “Initial PAC issuer landing page”.
    • Click Commit changes.

Now the repo’s root must show exactly those files, with your updated coupling-information-table and resolver_config.yaml.

Create the Azure Static Web App

  1. Go to the Azure Portal (https://portal.azure.com) and search for “Static Web Apps”.
  2. Click Create to create a new Static Web App.
  3. On the Basics tab:
    • Select your subscription.
    • Create or choose a resource group (e.g. rg-pac-landing).
    • Enter a name (for example pac-id-landing-labfreed).
    • Select a region close to your users.
    • Choose the Free plan to start. (You can upgrade later)
  4. In the Deployment or Source section:
    • Select GitHub as the deployment source.
    • Sign in with GitHub if necessary and authorize Azure.
    • Select your GitHub organization, repository and branch (main or whatever you use).
  5. In the Build details section:
    • Preset: choose No framework or Custom (this is a plain static HTML app).
    • App location: / (root folder with index.html).
    • Api location: leave empty (you don’t have an API).
    • Output location: / (no separate build output; your repo contents are the site).
  6. Click Review + create, then Create.

Azure will create:

  • The Static Web App resource.
  • A GitHub Actions workflow in your repository that builds and deploys the app on each push to the selected branch.

After the first deployment, you get a URL similar to:

  • https://<random-name>.azurestaticapps.net

Open that URL and verify:

  • The PAC landing page loads correctly.
  • /coupling-information-table returns your updated legacy config.
  • resolver_config.yaml is reachable at the expected path (either via direct file access or via a route defined in staticwebapp.config.json).

3. Configure a custom domain

If you own a domain (for example example.com), you can point a subdomain like pac.example.com to the Static Web App.

  1. In the Azure Portal, open your Static Web App resource.
  2. In the left menu, go to Custom domains.
  3. Click + Add and choose the option to use an external DNS provider (if your DNS is not managed by Azure DNS).
  4. Enter the hostname you want to use (for example pac.example.com).
  5. Azure will show the DNS records you must create:
    • Typically a TXT record for verification.
    • A CNAME record pointing pac.labfreed.com to your *.azurestaticapps.net hostname.
  6. Create these records in the DNS management interface of your domain registrar.
  7. Return to the Custom domains blade in the portal and complete the validation.

Once validation succeeds, Azure automatically issues a free TLS certificate and serves your site under the custom domain with HTTPS.

Posted in Tutorial

Leave a Comment