404 when you refresh React Page on Static Web App

This happens because React uses client-side routing, while Azure Static Web Apps serves static files. When you refresh /login, Azure tries to find a physical /login file, which doesn’t exist, so it returns 404.

This is common with apps using React Router.

Step 1: Add a staticwebapp.config.json file to your project

You need to tell Azure to redirect all routes to index.html so React can handle routing.

Create this file in your build output folder or project root:

staticwebapp.config.json

Step 2: Add this configuration

{

  "navigationFallback": {

    "rewrite": "/index.html",

    "exclude": ["/images/*", "/css/*", "/js/*", "/assets/*"]

  }

}

or 

{

  "navigationFallback": {

    "rewrite": "/index.html"

  }

}

Then rebuild and deploy again.

swa deploy ./dist --deployment-token YourTokenHere --env production

After Deployment

Now these will work on refresh:

/login

/dashboard

/profile

/settings

Deploy Angular/React Application to Azure Static Web App from Visual Studio Code

Step 1: Build your React project

Open the terminal in VS Code and run:

npm install

npm run build

Step 2: Get Deployment Token

• Go to Microsoft Azure Portal.
• Open your Azure Static Web App
• Click Deployment Token
• Copy the token

Step 3: Install Azure Static Web Apps CLI

Install the CLI tool:

npm install -g @azure/static-web-apps-cli

This installs SWA CLI.

Step 3: Deploy the build folder

Run this command inside your project folder.

swa deploy ./dist --deployment-token ABC123XYZ

Your URL changed because the deployment was created as a preview environment instead of production.

 If you want to deploy on a real URL, then run the command.

swa deploy ./dist --deployment-token TokenHere --env production

Your site will be available at:

https://your-app-name.azurestaticapps.net