Deploy Astro to AWS Amplify: A Step-by-Step Guide
LaunchFast Logo LaunchFast

Deploy Astro to AWS Amplify: A Step-by-Step Guide

Rishi Raj Jain
Deploy Astro to AWS Amplify

In this guide, you will learn how to deploy an Astro SSR project to AWS Amplify. You will go through the process of setting up a new Astro project, enabling server-side rendering using AWS Amplify adapter, and finally deploying it to AWS Amplify.

Table Of Contents

Prerequisites

You’ll need the following:

Create a new Astro application

Let’s get started by creating a new Astro project. Open your terminal and run the following command:

Terminal window
npm create astro@latest my-app

npm create astro is the recommended way to scaffold an Astro project quickly.

When prompted, choose:

  • Empty when prompted on how to start the new project.
  • Yes when prompted if plan to write Typescript.
  • Strict when prompted how strict Typescript should be.
  • Yes when prompted to install dependencies.
  • Yes when prompted to initialize a git repository.

Once that’s done, you can move into the project directory and start the app:

Terminal window
cd my-app
npm run dev

The app should be running on localhost:4321.

Next, in your first terminal window, run the command below to install the necessary libraries and packages for building the application:

Terminal window
npm install dotenv

The libraries installed include:

  • dotenv: A library for handling environment variables.

Getting Started with the AWS Amplify Adapter for Astro

Before deploying your Astro project, you need to install the astro-aws-amplify adapter. This is easily done via the Astro CLI:

Terminal window
npm install astro-aws-amplify

The libraries installed include:

  • astro-aws-amplify: An adapter that prepares Astro websites to be deployed on AWS Amplify.

Once the adapter is installed, you’ll need to add it to your astro.config.mjs file. Open the file and add the following code:

astro.config.mjs
import { defineConfig } from 'astro/config';
import awsAmplify from 'astro-aws-amplify';
export default defineConfig({
output: "server",
adapter: awsAmplify(),
});

The additions do the following:

  • Imports default export of astro-aws-amplify.
  • Uses the above import as the adapter of your Astro application.
  • Sets output to server to enable server-side rendering compatible output.

Then, create a amplify.yml at the root of repository with the following code:

version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env >> .env
- npm run build
- mv node_modules ./.amplify-hosting/compute/default
- mv .env ./.amplify-hosting/compute/default/.env
artifacts:
baseDirectory: .amplify-hosting
files:
- '**/*'
cache:
paths:
- node_modules/**/*

The code above does the following:

  • Uses preBuild commands to install the dependencies of your Astro project.
  • Uses build commands to:
    • Store all the environment variables into .env file at the root of the project.
    • Build your Astro application.
    • Move the node_modules directory and .env file to Amplify’s compute directory.

Deploy to AWS Amplify

The code is now ready to deploy to AWS Amplify. Use the following steps to deploy:

  • Start by creating a GitHub repository containing your app’s code.

  • Then, navigate to the AWS Amplify Dashboard and click on Get Started under Host your web app section.

Host your web app in AWS Amplify
  • Select GitHub as the source of your Git repository.
GitHub as code source in AWS Amplify
  • Link the new project to the GitHub repository you just created.
Link Repo in AWS Amplify
  • Give a name to your project, and click on Advanced Settings.
Name the project in AWS Amplify
  • In Advanced Settings, update the Environment Variables to match those in your local .env file, and PORT as 3000. Click Next to proceed.
Add Environment Variables in AWS Amplify
  • Click Save and Deploy to deploy your website.
Deploy to AWS Amplify
  • Grab the deployment URL under the Domain title in the succesful build information.
Grab Deployment URL in AWS Amplify

Conclusion

Yay! You’ve now an Astro project that automatically deploys to AWS Amplify upon Git push.

If you have any questions or comments, feel free to reach out to me on Twitter.

Learn More Astro vs Next.js: Choosing the Right Framework in 2024
Astro vs Next.js: Choosing the Right Framework in 2024 October 30, 2024
6 Essential Features Every Web Starter Kit Should Include
6 Essential Features Every Web Starter Kit Should Include October 26, 2024
Launch Fast with Astro 4.16
Launch Fast with Astro 4.16 October 23, 2024