Azure Static Web Apps + Vite: JS served as text/html (MIME type wrong)

Question

I am deploying a Vite + React application to Azure Static Web Apps using GitHub Actions.

The deployment completes successfully, but when I open the site I get a blank page. The browser DevTools shows this error:

Failed to load module script:
Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html".

This means Azure is returning index.html instead of the built JS files.

---

Project structure

/ (repo root)
  public/
  src/
  dist/       <- generated by Vite build
     index.html
     assets/

---

Vite build works correctly

Running:

npm run build

produces the expected Vite output in dist/.

---

staticwebapp.config.json

Located at the repo root:

{
  "mimeTypes": {
    ".js": "text/javascript",
    ".mjs": "text/javascript",
    ".css": "text/css"
  },
  "routes": [
    { "route": "/*", "rewrite": "/index.html" }
  ]
}

---

GitHub Actions workflow

- name: Deploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    action: "upload"
    app_location: "/"
    output_location: "dist"
    skip_app_build: true

---

Problem

Azure is serving all .js files with:

Content-Type: text/html

even though they exist inside dist/ and MIME types are configured.

---

Question

What exact app_location and output_location values should be used for a Vite app where the repository root contains the public, src, and dist folders?

And what causes Azure Static Web Apps to return index.html instead of actual JS files?

Answer 1

For your Vite + React application deployed to Azure Static Web Apps, the correct values for app_location and output_location in your GitHub Actions workflow should be as follows:

• app_location: This should point to the folder where your application code resides, which is the root of your repository. Therefore, set it to "/".
• output_location: This should point to the folder where the built files are generated by Vite, which is "dist" in your case.

Your GitHub Actions workflow should look like this:

- name: Deploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    action: "upload"
    app_location: "/"
    output_location: "dist"
    skip_app_build: true

Regarding the issue where Azure is serving .js files with a MIME type of text/html, this typically happens when the routing configuration is not set correctly. In your staticwebapp.config.json, the route rule you have:

{ "route": "/*", "rewrite": "/index.html" }

This rule rewrites all requests to index.html, which can cause the server to return index.html for requests to your JavaScript files.

To fix this, you should add specific routes for your static assets (like JavaScript and CSS files) to ensure they are served correctly. You can modify your staticwebapp.config.json to include routes that exclude your static assets from being rewritten to index.html.

Here’s an example of how you might adjust your configuration:

{
  "mimeTypes": {
    ".js": "text/javascript",
    ".mjs": "text/javascript",
    ".css": "text/css"
  },
  "routes": [
    { "route": "/dist/*", "serve": "/dist/*" },
    { "route": "/*", "rewrite": "/index.html" }
  ]
}

This configuration ensures that requests to files in the dist directory are served correctly without being rewritten to index.html.

---

References:

• Deploy your web app to Azure Static Web Apps (react)
• What is Azure Static Web Apps?
• Configure Azure Static Web Apps
• Troubleshooting deployment and runtime errors
• Example configuration file