Push Docker Image to Create Azure Container App

Push Docker Image either to Azure Container Registry (ACR), or you can directly upload Public Image of Docker Hub

Step 1: Create Azure Container App

1. In Azure Portal → Create a Resource → Container Apps.
2. Fill in: Name, Resource Group, Region
3. Environment: Create or select an existing one
4. Under Container, select Single container → Azure Container Registry/Docker Image.
5. Choose your registry, repository, and tag (e.g., latest).
6. Set CPU/Memory limits (e.g., 0.5 CPU, 1 GB RAM).
7. Configure Ingress:
8. Enable External if you want public access.
9. Set port (e.g., 8000) to match your Dockerfile.
10. Review + Create

You can change the same settings in the ingress as well.

You can update your image type and select "Image and Tag" and specify your image here.

You can update your variable under the container.

Click on the overview you can find the application URL

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