Techie BabajiLearn to Code. Build Real Skills.
Microsoft Azure · Delivery

Deploying React Applications

Azure Static Web Apps hosts single-page apps globally with free SSL, preview environments for pull requests and optional APIs.

Advanced 5 min Lesson 24 of 28
Before you start:React: Production Build
0/28 in Microsoft Azure
On this page · 5 min · Advanced

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Advanced
Updated
Oct 29, 2026

Related tutorials

Interview questions

Learning objectives#

  • Create a Static Web App linked to GitHub
  • Configure the build for Vite
  • Add SPA route fallback
  • Add a custom domain

Explanation#

Static Web Apps builds your app with GitHub Actions and serves the output from a global network.

For Vite, the app is at the repository root and the build output is dist.

Client-side routes such as /products/1 need a fallback so the server returns index.html instead of 404 — configured in staticwebapp.config.json.

Pull requests get their own preview URLs automatically, which makes reviews easy.

Code example: SPA fallback configuration#

JSONpublic/staticwebapp.config.json Illustrative
{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/assets/*", "/*.{png,jpg,svg,ico,css,js}"]
  },
  "globalHeaders": {
    "X-Content-Type-Options": "nosniff",
    "Referrer-Policy": "strict-origin-when-cross-origin"
  }
}
Expected output
Deep links like https://<app>.azurestaticapps.net/products/1 load correctly, while real files under /assets are served directly.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. Putting the file in public/ copies it into dist on build.
  2. navigationFallback rewrites unknown routes to index.html so React Router can handle them.
  3. Excluded patterns are served as real files.
  4. Global headers add basic security headers to every response.

Real-world use case#

A React portfolio or dashboard deployed on every push to main, with PR previews for review — on a generous free tier.

Common mistakes#

No navigation fallback

Refreshing /dashboard returns 404 because the file does not exist. Add the fallback.

Secrets in VITE_ variables

Anything prefixed VITE_ is bundled into public JavaScript. Keep secrets on the server.

Best practices#

  • Set output location to dist for Vite
  • Configure navigationFallback for SPAs
  • Use PR preview environments
  • Keep API keys on the server (e.g. Azure Functions API)

Remember this#

Vite → app location /, output dist.

SPA needs fallback to index.html.

VITE_ variables are public.

Practice exercise#

Your task: Which values would you set in the Static Web Apps workflow for a Vite app in the repo root?

Show solution
YAML Illustrative
app_location: "/"
output_location: "dist"

Mini quiz#

Deploying React Applications quizMultiple choice Question 1 of 1

Why does a SPA need a navigation fallback?

Score so far: 0/0

Want more? Practise all Microsoft Azure MCQs · Microsoft Azure interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.