Vercel Not Rendering CSS, Images, and Other Static Files After Deployment (Works Locally) – Tried Several Fixes

The project works perfectly on localhost, with all CSS, images, and JavaScript files loading correctly. However, when deploying the project on Vercel, the CSS does not render, images fail to load with 404 errors, and some JavaScript files are not executing correctly. I’ve tried multiple approaches to fix the issue, including modifying the paths in index.html and updating the vercel.json configuration, but nothing seems to work.

Repository Link:

Here is the link to my GitHub repository:

https://github.com/FadyFathey/digitalize-v.2.git

Deployment Link:

Here is the link to the latest deployment on Vercel:

https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app

Issue Description:

1. Locally: Everything works perfectly as expected. The CSS, JavaScript, images, and all other static files load and render properly.

   Here is how the page looks locally:

   

2. On Vercel:

After deployment to Vercel, the CSS, images, and some other static files do not load. I receive a basic unstyled version of the webpage without any images.

Here is how the page looks after deployment on Vercel:

I tried several approaches to solve the issue:

1. Modified the file paths:

Initially, I was using relative paths for my CSS, images, and JavaScript files, such as:

<link rel="stylesheet" href="assets/css/main.css">

<img src="assets/img/logo.png" alt="Logo">

I then tried both absolute paths(/assets/css/main.css) and relative paths (./assets/css/main.css), but neither worked on Vercel, although they worked fine locally.

2. Edited vercel.json:

I modified the vercel.json configuration to properly route the static files (CSS, JS, images) and exclude them from the SPA routing.

but Not working

like :

{
  "rewrites": [
    {
      "source": "/(.*)", 
      "destination": "/html/digitalize/index.html"
    }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

3. Checked console errors:

The console showed errors like:

MIME type mismatch: CSS files were served as text/html instead of text/css.

404 errors for images and other static assets.

full console and you and you can check on demo live

The stylesheet https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css".

Uncaught SyntaxError: expected expression, got '<' (appearing for every JS file, e.g., bootstrap.bundle.min.js, jquery.js, etc.)

Failed to load resource: the server responded with a status of 404 (Not Found) for images (e.g., https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/img/logo.png)

I was expecting the website to render properly, with all CSS, images, and JavaScript files loading and functioning correctly, just as they do when running the project locally.

You need to sign in to view this answers