Azure Static Web App returns 404

Question

I created Azure Static Web App back in 2020 when static apps were in preview. Since then my static site worked fine until today when I found out it returns 404. I can't even tell for how long site was broken (not really checking it too often). My site consist of single hand-made index.html, css and couple of other files.

I tried to redeploy, GitHub actions doesn't reveal anything suspicious:

2022-04-06T14:33:11.4765237Z App Directory Location: '/public' was found.  
2022-04-06T14:33:11.4765914Z No Api directory specified. Azure Functions will not be created.  
2022-04-06T14:33:11.4766325Z Looking for event info  
2022-04-06T14:33:12.5658043Z Starting to build app with Oryx  
2022-04-06T14:33:12.5667037Z 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  
2022-04-06T14:33:12.5667637Z ---Oryx build logs---  
2022-04-06T14:33:13.1445987Z Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx  
2022-04-06T14:33:13.1451757Z You can report issues at https://github.com/Microsoft/Oryx/issues  
2022-04-06T14:33:13.1460436Z Oryx Version: 0.2.20220323.2, Commit: ..., ReleaseTagName: 20220323.2  
2022-04-06T14:33:13.1471542Z Build Operation ID: ...  
2022-04-06T14:33:13.1476310Z Repository Commit : ...  
2022-04-06T14:33:13.1715495Z Detecting platforms...  
2022-04-06T14:33:13.2014391Z Could not detect any platform in the source directory.  
2022-04-06T14:33:13.2299959Z Error: Could not detect the language from repo.  
2022-04-06T14:33:15.2343958Z ---End of Oryx build logs---  
2022-04-06T14:33:15.2345213Z 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.  
2022-04-06T14:33:15.2391132Z Finished building app with Oryx  
2022-04-06T14:33:15.2880586Z Found and validated 'routes.json' within build artifacts folder.  
2022-04-06T14:33:15.2991625Z Either no Api directory was specified, or the specified directory was not found. Azure Functions will not be created.  
2022-04-06T14:33:15.5923587Z Zipping App Artifacts  
2022-04-06T14:33:15.6138575Z Done Zipping App Artifacts  
2022-04-06T14:33:15.6139069Z Uploading build artifacts.  
2022-04-06T14:33:17.0394074Z Finished Upload. Polling on deployment.  
2022-04-06T14:33:19.7194561Z Status: InProgress. Time: 2.6797575(s)  
2022-04-06T14:33:34.9339064Z Status: Succeeded. Time: 17.8915461(s)  
2022-04-06T14:33:34.9339676Z Deployment Complete :)  
2022-04-06T14:33:34.9341608Z Visit your site at: https://yadayadayada.azurestaticapps.net  

(for version with staticwebapp.config.json I'm of course getting output regarding detection of new config and not using routes.json; at the beginning, I was using preview version of Azure/static-web-apps-deploy but now having v1)

My current routes.json looks like this:

{  
  "routes": [  
  {  
    "route": "/*",  
    "serve": "/index.html",  
    "statusCode": 200  
  }],  
  "defaultHeaders": {  
    "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline' cdn.jsdelivr.net *.mapy.cz",  
    "x-frame-options": "deny",  
    "feature-policy": "accelerometer 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none'",  
    "permissions-policy": "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"  
  }  
}  

I just discovered routes.json is deprecated and staticwebapp.config.json should be used (https://learn.microsoft.com/en-us/azure/static-web-apps/configuration) - so I created:

{  
  "routes": [  
    {  
      "route": "/example",  
      "rewrite": "/example.html"  
    }  
  ],  
  "navigationFallback": {  
    "rewrite": "index.html",  
    "exclude": [".well-known/*", "css/*"]  
  },  
  "globalHeaders": {  
    "Content-Security-Policy": "default-src https: 'unsafe-eval' 'unsafe-inline' cdn.jsdelivr.net *.mapy.cz",  
    "Feature-Policy": "accelerometer 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none'",  
    "Permissions-Policy": "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()",  
    "X-Frame-Options": "deny"  
  }  
}  

... but even with this setup, it still doesn't work and I'm getting 404.

Structure of my repository is following:

/  
├─ .github/  
│  ├─ azure-static...yml  
├─ public/  
│  ├─ .well-known/  
│  │  ├─ security.txt  
│  ├─ css/  
│  │  ├─ style.css  
│  ├─ index.html  
│  ├─ robots.txt  
│  ├─ routes.json  
│  ├─ staticwebapp.config.json  
├─ .gitignore  

My GitHub actions job looks like this - notice app_location to be set to "public" - matching public directory name where my static content is:

jobs:  
  build_and_deploy_job:  
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')  
    runs-on: ubuntu-latest  
    name: Build and Deploy Job  
    steps:  
      - uses: actions/checkout@v2  
        with:  
          submodules: true  
      - 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_YADA_YADA_YADA }  
          repo_token: ${ secrets.GITHUB_TOKEN } # Used for Github integrations (i.e. PR comments)  
          action: "upload"  
          ###### Repository/Build Configurations ######  
          app_location: "public"  
          ###### End of Repository/Build Configurations ######  

Could anyone help me figure out what am I doing wrong, what do I miss?

Answer 1

I wasn't able to solve it, technical support was clueless. The easiest option is to just ditch your old deployment and start with new one.

Answer 2

Has there been any progess on this issue ?

I find that no matter what I do with my config, I'm still getting 404 on the default page (index.html)

Dropping and recreating the site completely doesn't resolve it. How can we get some resolution on this as it's quite frustrating and seems to be impossible to figure out what's actually going on.

I'm using Vitepress, everything works as expected when run locally, but when deployed to Azure Static Websites, I get 404's on the main site URL, and then even directly navigating to the page (/index.html) it shows the 404 until i SHIFT+REfresh (which is a browser cache issue even though I've defined no caching.

Do I have to open a support ticket for this ? WOuld that even do any good based on the feedback above that support hasn't been able to fix it.

Answer 3

I didn't touch anything for several weeks and suddenly I start getting 404 as well...

Solve it by upgrading my subscription to "pay as you go".

There was message in subscription:
"Your free credit has expired. Upgrade to keep going with your account."

Answer 4

Looks like the issue still exists. Azure Static Apps, Free Tier.

Same situation, editing staticwebapp.config.json doesn't help. Actually, in my case I get a 404 error for some of my CSS/JS files, but in a random order - sometimes they work, then I hit refresh - 404 error.

Switching to Standard Tier doesn't help either.

I've managed to solve this only by wiping out everything and redeploying from scratch. Looks like a CDN issue to me.

Answer 5

Framework: Angular 17
CICD: Github Actions
Azure Service: Azure Static Web Apps

I had this issue and was able to resolve it. I currently am deploying an angular 17 app to azure static web app and was getting the 404 errors. What resolved it for me was the following config file that had to be placed in my repo directory, or where ever the app is located if github actions has a directory specified.

The key part that resolved it was placing the robot.txt and sitemap.xml in the src directory and working with it from there. There are people online who are doing it with the files in the assets folder and it was causing issues. So here are the two configs needed for Angular deployment via Github Actions to Azure Static Web App

"build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/emotion",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/robots.txt",
              "src/sitemap.xml"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css"
            ],
            "scripts": []
          },

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": [
      "/robots.txt",
      "/sitemap.xml",
      "/images/*.{png,jpg,gif}",
      "/css/*"
    ]
  },
  "routes": [
    {
      "route": "/robots.txt",
      "serve": "/robots.txt",
      "statusCode": 200
    },
    {
      "route": "/sitemap.xml",
      "serve": "/sitemap.xml",
      "statusCode": 200
    }
  ]
}