#How to build and deploy an Astro project with Astro Actions to Vercel

4 messages · Page 1 of 1 (latest)

glossy prairie
#

my astro.config.mjs is currently configured like this. I have some controller that impleted with Astro actions. I am getting the following error in my Vercel deployments:

Running build in Washington, D.C., USA (East) – iad1
Cloning github.com/unbnd-operations/hahn-beerlay (Branch: dj/db-connection, Commit: 8ee5aa0)
Cloning completed: 754.053ms
Restored build cache from previous deployment (92Z4oAxrfw7wfsxUZcrey43f2VgA)
Running "vercel build"
Vercel CLI 37.4.0
Installing dependencies...
added 6 packages, removed 12 packages, and changed 27 packages in 6s
219 packages are looking for funding
  run `npm fund` for details
Running "npm run build"
> hahn-beerlay@0.0.1 build
> npm run prisma:generate && astro build
> hahn-beerlay@0.0.1 prisma:generate
> npx prisma generate
Prisma schema loaded from prisma/schema.prisma
✔ Generated Prisma Client (v5.18.0) to ./node_modules/@prisma/client in 132ms
Start by importing your Prisma Client (See: http://pris.ly/d/importing-client)
Tip: Curious about the SQL queries Prisma ORM generates? Optimize helps you enhance your visibility: https://pris.ly/tip-2-optimize
[config] Astro found issue(s) with your configuration:
  ! experimental  Invalid or outdated experimental feature.
Check for incorrect spelling or outdated Astro version.
See https://docs.astro.build/en/reference/configuration-reference/#experimental-flags for a list of all current experiments..
Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.
Learn More: https://vercel.link/missing-public-directory
lavish groveBOT
#

Hi @glossy prairie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message you're seeing indicates that Vercel is unable to find the output directory named "dist" after the build process. This is where Astro writes your final build to. The value can be either an absolute file system path or a path relative to the project root. By default, Astro sets this to "./dist" as per the Astro configuration reference (https://docs.astro.build/en/reference/configuration-reference/#outdir).

If you have changed the output directory in your astro.config.mjs file, you need to ensure that the directory is correctly specified. For example, if you have set a custom build directory, it should look like this:

{  
  outDir: './my-custom-build-directory'
}

Once you've ensured that your output directory is correctly set, you can deploy your Astro project to Vercel. You can do this either through the Vercel website UI or using Vercel’s CLI. Here are the steps for both methods as per the Astro deployment guide (https://docs.astro.build/en/guides/deploy/vercel/#how-to-deploy):

Website UI Deployment:

  1. Push your code to your online Git repository (GitHub, GitLab, BitBucket).
  2. Import your project (https://vercel.com/new) into Vercel.
  3. Vercel will automatically detect Astro and configure the right settings.
  4. Your application is deployed!

CLI Deployment:

  1. Install the Vercel CLI (https://vercel.com/cli) and run vercel to deploy.
npm install -g vercel
vercel
  1. Vercel will automatically detect Astro and configure the right settings.
  2. When asked Want to override the settings? [y/N], choose N.
  3. Your application is deployed!
#

If you're still encountering issues, it might be helpful to check the Node.js version you're using. The @astrojs/vercel adapter supports specific Node.js versions for deploying your Astro project on Vercel. You can view the supported Node.js versions on Vercel by clicking on the settings tab for a project and scrolling down to the “Node.js Version” section. More information can be found in the Vercel documentation (https://vercel.com/docs/functions/serverless-functions/runtimes/node-js#default-and-available-versions).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: