CODEWITHSUNDEEP
reactjsweb-deploymentvitevercel
Mohanad Alrwaihy
Mohanad Alrwaihy

Reputation: 21

Vercel Output Source did not serve Public folder dir

I am using React in this project with Vite.

I have two assets folders inside the Public folder 👇

When I run the build command vite build the dist includes the images and icons folders from the Puclic and it works fine.

Build Files Image

Here is my vite.config.ts 👇

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name.split('.')[1]
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img'
          }
          return `assets/${extType}/[name]-[hash][extname]`
        },
      },
    },
  },
})

But in Vercel when I depoly the page the Images and icons are not found 404.

In Vercel I can see that the Output Source shows a second assests file that I can't access instead of the images and icons folders.

Vercel Output Source Image

Is this a problem in the build command in Vercel? or do I need to change the build options in vite.config.ts ?

Upvotes: 1

Views: 3096

Answers (1)

Mohanad Alrwaihy
Mohanad Alrwaihy

Reputation: 21

I reached out to Vercel Support and they helped me figure out the problem which was an easy fix.

Vercel is case sensitive on folders names so If you have a Public folder it should be lowercase.

Correct

  • public ✅

Wrong:

  • Public ❌

Git might not detect file changes when you rename a folder from uppercase to lower case so I used this git config command to detect the changes 👇

git config core.ignorecase false

Upvotes: 1

Related Questions