Vercel deployment downloads a file instead of showing the website

Help
1

I’ve tried and tried to fix this before, and I never could, because this has also been happening to my other site as well and I just can’t figure out why it’s happening. I assume it’s from the vercel.json or the index.html but I thought that someone would help me with it. Anybody know how to fix this?

Here is the index.html:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Oxanium:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <script type="module" crossorigin src="/assets/index-CquVPvE_.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CwpLOrDF.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

and here is the vercel.json:

{
“version”: 2,
“public”: true,
“cleanUrls”: true,
“trailingSlash”: false,
“rewrites”: \[
{ “source”: “/(.\*)”, “destination”: “/index.html” }
\],
“headers”: \[
{
“source”: “/index.html”,
“headers”: \[
{
“key”: “Content-Type”,
“value”: “text/html”
}
\]
}
\]
}
6

Welcome, @tt5myguy1!

This issue typically occurs when the server doesn’t recognize your files as HTML content. Here are a few things to try:

  1. Remove the headers section temporarily and use this minimal config:
{
  \rewrites\: [
    { \source\: \/(.*)\, \destination\: \/index.html\ }
  ]
}
  1. Make sure index.html is in the root of your deployment (not in a subdirectory). You can verify this in your Vercel dashboard under the Source tab of your deployment.
  2. Remove the rewrites temporarily to see if your index.html loads at the root URL. This will help isolate if the issue is with the rewrites or the file itself.

Let us know how you get on!

7

1: I removed the headers section and tried redeploying and it still didn’t work. 2: I made sure that it was in the root of the development, and it was. 3: I removed the rewrites (and I brang back the header section) and it failed completely saying it was an invalid vercel.json

8

Do you have a git repo we can look at?

9

Yes, here is the bitbucket repository used to deploy this: Bitbucket

10

Thanks! Spotted a few problems:

  1. vercel.json doesn’t specify a build command
  2. Your Express server uses httpServer.listen() at server/index.ts:88, which is designed for traditional Node.js servers but doesn’t work in Vercel’s serverless environment
  3. Vercel needs Express apps to be exported as serverless functions

You have have to update vercel.json to properly configure the build and create a serverless wrapper:

  {
    "version": 2,
    "buildCommand": "npm run build",
    "outputDirectory": "dist/public",
    "rewrites": [
      {
        "source": "/api/(.*)",
        "destination": "/api/index"
      },
      {
        "source": "/(.*)",
        "destination": "/api/index"
      }
    ]
  }

And create api/index.ts to export your Express app as a serverless function.

This might be helpful:

12

Thank you so much! I fixed it so now it’ll run! Thanks for the help!

13

I’m glad it worked :slight_smile:

See you around the community!