CODEWITHSUNDEEP
javascriptdeploymentvercelastrojs
Josephine
Josephine

Reputation: 3

Astro Deployment Works Locally, Breaks in Vercel

I have a blog-like project in Astro that works perfectly locally. When I deploy it on Vercel, the images under src won't load. My project tree looks as follows:

.  
└── src/  
    ├── content/  
    │   ├── projects/  
    │   │   ├── images/  
    │   │   │   └── image-example.png  
    │   │   └── project-example.md  
    │   └── config.ts  
    └── pages/  
        ├── project/  
        │   └── [slug].astro  
        ├── tags/  
        │   └── [tag].astro  
        └── index.astro

I tried moving all the imgaes to public, which made them load but incredibly slowly, and when I try to click into any tag, blog post, etc., I get this: enter image description here or this: enter image description here

For whatever reason, the favicon also refuses to load when deployed to Vercel even though it shows up as the project icon and locally. Not sure if this is related to a larger problem. Would appreciate any help.

Upvotes: 0

Views: 213

Answers (1)

John W
John W

Reputation: 11

Please check astro.config.mjs file. Since your website is working fine locally, make sure base path is configured properly for cloud env.

export default defineConfig({
    ...
    server: {
        port: 3000,
    },
    base: process.env.NODE_ENV === 'production' ? '/' : '/',
})

Upvotes: 0

Related Questions