Images in public folder display 404 once deployed to vercel?
In my recent Sitecore XM to Sitecore XMC migration project, I found that assets (like Scripts, Styles, Fonts) especially, Images under the public folder weren't getting picked after vercel deployment.
Public assets:
This was a hair-splitting experience and is harder if you don't have many hairs to split! Anyway, becomes even more difficult if your css styles/files refer to the assets. To be clear about the context, the images were picked up locally but after deployment to vercel, they weren't appearing in the page. In other words, the image (url) itself wasn't found after deployment. Here is an example:
Local:
Post-deployment:
Demo:
I then found that vercel is linux-based and hence case-sensitive. As a result, this is what worked for me:
1. Delete the Images folder and push to github
2. Vercel deployment fired
3. Add the new images folder (with case-sensitivity referred in css code) to the file system and push to github
4. New vercel deployment fired
I'm unsure if its just me but when I just renamed and pushed the images folder to github, the images wouldn't be picked on deployment. So, that is the reason I have specified the steps above. In other words, I needed two vercel deployments. One to completely wipe-out the Images folder and next to add the renamed images folder. If you have a better approach, you can let me know.
Summary: When you work with Vercel, ensure public assets folders follow proper case-sensitivity while referring in code. Since images are the most scattered assets in the code, in my opinion, it is better to keep an eye on those. That way, you won't be affected by vercel's linux-based behaviour.

Comments
Post a Comment