Deploying an Astro App

In this guide, you will learn how to deploy an Astro application step by step. We’ll cover setting up your project, configuring it for deployment, and deploying it to a hosting provider.

Prerequisites

You’ll need the following:

Node.js 18 or later
A GitHub account
A hosting provider such as Vercel or Netlify

Create a new Astro application

First, create a new Astro project using the following command:

npm create astro@latest my-app

Follow the prompts and select the following options:

Empty for the project template.
Yes for TypeScript.
Strict for TypeScript settings.
Yes to install dependencies.
Yes to initialize a Git repository.

Navigate to the project directory and start the development server:

cd my-app
npm run dev

Your app should now be running at localhost

Configure Deployment Settings

Before deploying, ensure that your project is configured correctly. Add a package.json script for building your application:

"scripts": {
  "build": "astro build",
  "preview": "astro preview"
}

Deploy to Vercel

To deploy to Vercel, install the CLI tool:

npm install -g vercel

Then, deploy your project:

vercel

Follow the prompts, and your site will be live in seconds!

Deploy to Netlify

For Netlify, install the CLI tool:

npm install -g netlify-cli

Then, deploy your project:

netlify deploy --prod

This will generate a live URL for your Astro application.

Conclusion

In this guide, you learned how to deploy an Astro application using Vercel and Netlify. Now, your project is live and ready for users!

(Demo) Deploying an Astro App: A Step-by-Step Guide