# Getting started with deploying an app to Amplify Hosting To help you understand how Amplify Hosting works, the following tutorials walk you through building and deploying applications created using common SSR frameworks that Amplify supports. **Topics** + [Deploy a Next.js app](getting-started-next.md) + [Deploy a Nuxt.js app](get-started-nuxt.md) + [Deploy an Astro.js app](get-started-astro.md) + [Deploy a SvelteKit app](get-started-sveltekit.md) # Deploy a Next.js app to Amplify Hosting This tutorial walks you through building and deploying a Next.js application from a Git repository. Before you begin this tutorial, complete the following prerequisites. **Sign up for an AWS account** If you are not already an AWS customer, you need to [create an AWS account](https://portal.aws.amazon.com/billing/signup#/start/email) by following the online instructions. Signing up enables you to access Amplify and other AWS services that you can use with your application. **Create an application** Create a basic Next.js application to use for this tutorial, using the [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) instructions in the *Next.js documentation*. **Create a Git repository** Amplify supports GitHub, Bitbucket, GitLab, and AWS CodeCommit. Push your `create-next-app` application to your Git repository. ## Step 1: Connect a Git repository In this step, you connect your Next.js application in a Git repository to Amplify Hosting. **To connect an app in a Git repository** 1. Open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. If you are deploying your first app in the current Region, by default you will start from the **AWS Amplify** service page. Choose **Deploy an app** at the top of the page. 1. On the **Start building with Amplify** page, choose your Git repository provider, then choose **Next**. For GitHub repositories, Amplify uses the GitHub Apps feature to authorize Amplify access. For more information about installing and authorizing the GitHub App, see [Setting up Amplify access to GitHub repositories](setting-up-GitHub-access.md). **Note** After you authorize the Amplify console with Bitbucket, GitLab, or AWS CodeCommit, Amplify fetches an access token from the repository provider, but it *doesn’t store the token* on the AWS servers. Amplify accesses your repository using deploy keys installed in a specific repository only. 1. On the **Add repository branch** page do the following: 1. Select the name of the repository to connect. 1. Select the name of the repository branch to connect. 1. Choose **Next**. ## Step 2: Confirm the build settings Amplify automatically detects the sequence of build commands to run for the branch you are deploying. In this step you review and confirm your build settings. **To confirm the build settings for an app** 1. On the **App settings** page, locate the **Build settings** section. Verify that the **Frontend build command** and **Build output directory** are correct. For this Next.js example app, the **Build output directory** is set to `.next`. 1. The procedure for adding a service role varies depending on whether you want to create a new role or use an existing one. + To create a new role: 1. Choose **Create and use a new service role**. + To use an existing role: 1. Choose **Use an existing role**. 1. In the service role list, select the role to use. 1. Choose **Next**. ## Step 3: Deploy the application In this step you deploy your app to the AWS global content delivery network (CDN). **To save and deploy an app** 1. On the **Review** page, confirm that your repository details and app settings are correct. 1. Choose **Save and deploy**. Your front end build typically takes 1 to 2 minutes, but can vary based on the size of the app. 1. When the deployment is complete, you can view your app using the link to the `amplifyapp.com` default domain. **Note** To augment the security of your Amplify applications, the *amplifyapp.com* domain is registered in the [Public Suffix List (PSL)](https://publicsuffix.org/). For further security, we recommend that you use cookies with a `__Host-` prefix if you ever need to set sensitive cookies in the default domain name for your Amplify applications. This practice will help to defend your domain against cross-site request forgery attempts (CSRF). For more information see the [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) page in the Mozilla Developer Network. ## Step 4: (Optional) clean up resources If you no longer need the app you deployed for the tutorial, you can delete it. This step helps ensure that you aren't charged for resources that you aren't using. **To delete an app** 1. From the **App settings** menu in the navigation pane, choose **General settings**. 1. On the **General settings** page, choose **Delete app**. 1. In the confirmation window, enter **delete**. Then choose **Delete app**. ## Add features to your app Now that you have an app deployed to Amplify, you can explore some of the following features that are available to your hosted application. **Environment variables** Applications often need configuration information at runtime. These configurations can be database connection details, API keys, or parameters. Environment variables provide a way to expose these configurations at build time. For more information, see [Environment variables](environment-variables.md). **Custom domains** In this tutorial, Amplify hosts your app for you on the default `amplifyapp.com` domain with a URL such as `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. When you connect your app to a custom domain, users see that your app is hosted on a custom URL, such as `https://www.example.com`. For more information, see [Setting up custom domains](custom-domains.md). **Pull request previews** Web pull request previews offer teams a way to preview changes from pull requests (PRs) before merging code to a production or integration branch. For more information, see [Web previews for pull requests](pr-previews.md). **Manage multiple environments** To learn how Amplify works with feature branches and GitFlow workflows to support multiple deployments, see [Feature branch deployments and team workflows](multi-environments.md). # Deploy a Nuxt.js app to Amplify Hosting Use the following instructions to deploy a Nuxt.js application to Amplify Hosting. Nuxt has implemented a preset adapter using the Nitro server. This enables you to deploy a Nuxt project without any additional configuration. **To deploy a Nuxt app to Amplify Hosting** 1. Sign in to the AWS Management Console and open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. On the **All apps** page, choose **Create new app**. 1. On the **Start building with Amplify** page, choose your Git repository provider, then choose **Next**. 1. On the **Add repository branch** page, do the following: 1. Select the name of the repository to connect. 1. Select the name of the repository branch to connect. 1. Choose **Next**. 1. If you want Amplify to be able to deliver app logs to Amazon CloudWatch Logs, you must explicitly enable this in the console. Open the **Advanced settings** section, then choose **Enable SSR app logs** in the ** Server-Side Rendering (SSR) deployment** section. 1. Choose **Next**. 1. On the **Review** page, choose **Save and deploy**. # Deploy an Astro.js app to Amplify Hosting Use the following instructions to deploy an Astro.js application to Amplify Hosting. You can use an existing application, or create a starter application using one of the official examples that Astro provides. To create a starter application, see [Use a theme or starter template](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template) in the *Astro documentation*. To deploy an Astro site with SSR to Amplify Hosting, you must add an adapter to your application. We do not maintain an Amplify owned adapter for the Astro framework. This tutorial uses the `astro-aws-amplify` adapter that was created by a member of the community. This adapter is available at [github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) on the GitHub website. AWS does not maintain this adapter. **To deploy an Astro app to Amplify Hosting** 1. On your local computer, navigate to the Astro application to deploy. 1. To install the adapter, open a terminal window and run the following command. This example uses the community adapter available at [github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify). You can replace *astro-aws-amplify* with the name of the adapter that you are using. ``` npm install astro-aws-amplify ``` 1. In the project folder for your Astro app, open the `astro.config.mjs` file. Update the file to add the adapter. The file should look like the following. ``` import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; import awsAmplify from 'astro-aws-amplify'; import sitemap from '@astrojs/sitemap'; // https://astro.build/config export default defineConfig({ site: 'https://example.com', integrations: [mdx(), sitemap()], adapter: awsAmplify(), output: 'server', }); ``` 1. Commit the change and push the project to your Git repository. Now you are ready to deploy your Astro app to Amplify. 1. Sign in to the AWS Management Console and open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. On the **All apps** page, choose **Create new app**. 1. On the **Start building with Amplify** page, choose your Git repository provider, then choose **Next**. 1. On the **Add repository branch** page, do the following: 1. Select the name of the repository to connect. 1. Select the name of the repository branch to connect. 1. Choose **Next**. 1. On the **App settings** page, locate the **Build settings** section. For **Build output directory** enter **.amplify-hosting**. 1. You must also update the app's frontend build commands in the build specification. To open the build specification, choose **Edit YML file**. 1. In the `amplify.yml` file, locate the frontend build commands section. Enter **mv node\$1modules ./.amplify-hosting/compute/default** Your build settings file should look like the following. ``` version: 1 frontend: phases: preBuild: commands: - 'npm ci --cache .npm --prefer-offline' build: commands: - 'npm run build' - 'mv node_modules ./.amplify-hosting/compute/default' artifacts: baseDirectory: .amplify-hosting files: - '**/*' cache: paths: - '.npm/**/*' ``` 1. Choose **Save**. 1. If you want Amplify to be able to deliver app logs to Amazon CloudWatch Logs, you must explicitly enable this in the console. Open the **Advanced settings** section, then choose **Enable SSR app logs** in the ** Server-Side Rendering (SSR) deployment** section. 1. Choose **Next**. 1. On the **Review** page, choose **Save and deploy**. # Deploy a SvelteKit app to Amplify Hosting Use the following instructions to deploy a SvelteKit application to Amplify Hosting. You can use your own application, or create a starter app. For more information, see [Creating a project](https://kit.svelte.dev/docs/creating-a-project) in the *SvelteKit documentation*. To deploy a SvelteKit app with SSR to Amplify Hosting, you must add an adapter to your project. We do not maintain an Amplify owned adapter for the SvelteKit framework. In this example, we are using the `amplify-adapter` created by a member of the community. The adapter is available at [github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter) on the GitHub website. AWS does not maintain this adapter. **To deploy a SvelteKit app to Amplify Hosting** 1. On your local computer, navigate to the SvelteKit application to deploy. 1. To install the adapter, open a terminal window and run the following command. This example uses the community adapter available at [github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter). If you are using a different community adapter, replace *amplify-adapter* with the name of your adapter. ``` npm install amplify-adapter ``` 1. In the project folder for your SvelteKit app, open the `svelte.config.js` file. Edit the file to use the `amplify-adapter` or replace *'amplify-adapter'* with the name of your adapter. The file should look like the following. ``` import adapter from 'amplify-adapter'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: vitePreprocess(), kit: { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported, or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter() } }; export default config; ``` 1. Commit the change and push the application to your Git repository. 1. Now you are ready to deploy your SvelteKit app to Amplify. Sign in to the AWS Management Console and open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. On the **All apps** page, choose **Create new app**. 1. On the **Start building with Amplify** page, choose your Git repository provider, then choose **Next**. 1. On the **Add repository branch** page, do the following: 1. Select the name of the repository to connect. 1. Select the name of the repository branch to connect. 1. Choose **Next**. 1. On the **App settings** page, locate the **Build settings** section. For **Build output directory** enter **build**. 1. You must also update the app's frontend build commands in the build specification. To open the build specification, choose **Edit YML file**. 1. In the `amplify.yml` file, locate the frontend build commands section. Enter **- cd build/compute/default/** and **- npm i --production**. Your build settings file should look like the following. ``` version: 1 frontend: phases: preBuild: commands: - 'npm ci --cache .npm --prefer-offline' build: commands: - 'npm run build' - 'cd build/compute/default/' - 'npm i --production' artifacts: baseDirectory: build files: - '**/*' cache: paths: - '.npm/**/*' ``` 1. Choose **Save**. 1. If you want Amplify to be able to deliver app logs to Amazon CloudWatch Logs, you must explicitly enable this in the console. Open the **Advanced settings** section, then choose **Enable SSR app logs** in the ** Server-Side Rendering (SSR) deployment** section. 1. Choose **Next**. 1. On the **Review** page, choose **Save and deploy**.