5 Minute Tutorial - Deploying Nuxt to AWS
Tags: nuxt, aws, vue, awsamplify
Published: 2020-10-12 13:08:02

---
title: 5 Minute Tutorial - Deploying Nuxt to AWS
published: true
description: How to deploy a Nuxt app to AWS using Amplify Hosting
tags: nuxt, aws, vue, awsamplify
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/47u52vdyscb49c0ny3vz.jpg
---

[Amplify hosting](https://docs.amplify.aws/guides/hosting/git-based-deployments/q/platform/js) enables you to deploy websites and web apps to AWS's global edge CDN with only a few clicks.

In this tutorial you'll learn how to deploy a static or SPA (Single Page Application) NuxtJS app to AWS using Amplify static site hosting in two ways:

1. Git-based hosting
2. Using the Amplify CLI

## Git-based hosting

### Step 1

Visit the [Amplify Console](https://console.aws.amazon.com/amplify/home) and click __GET STARTED__ under __Deploy__ to connect a new app.

### Step 2

Choose your Git provider and click __Continue__.

### Step 3

In the next screen, choose your repository and branch and click __Next__.

### Step 4

#### For a static site

In the __App build and test settings__ view, click __Edit__ and do the following:

1. Set the __build__ command to: `yarn run generate`
2. Set the `baseDirectory` location to be `dist`
3. Click __Save__
4. Click __Next__

#### For an SPA

Keep the existing build settings and click __Next__.

### Step 5

Click __Save and deploy__.

Once your site has successfully deployed, you should see three green checkmarks.

![Successful deployment](https://dev-to-uploads.s3.amazonaws.com/i/oet2umg65bzlcarq8e1d.png)

To view the live site, click on the automatically generated URL given to you by the Amplify Console.

### Video walkthrough

Here is a video walkthrough of how to deploy a static Nuxt site using Amplify hosting from a Git repository:

{% youtube x9sOlLi2Hvo %}

## Using the Amplify CLI

> To deploy using the CLI, you must first install and configure the Amplify CLI. To view a video walkthrough of how to do this, click [here](https://www.youtube.com/watch?v=fWbM5DLh25U)

### Step 1

Initialize a new Amplify project in the root of your NuxtJS app.

#### For a static site

```sh
amplify init

> When prompted for the Build Command, use: npm run generate
# Choose default options for the other prompts
```

#### For an SPA

```sh
amplify init

# Choose all of the defaults when prompted
```

### Step 2

Add hosting using the `add` command:

```sh
amplify add hosting

? Select the plugin module to execute: Hosting with Amplify Console
? Choose a type: Manual deployment
```

### Step 3

Deploy the site using the `publish` command:

```sh
amplify publish
```

🎉 Congratulations! Your site has officially been deployed to AWS.

You can view the hosting service at any time to add additional features like custom domains, access control, and more by visiting the [Amplify Console](https://console.aws.amazon.com/amplify/) or using the `console` command:

```sh
amplify console
```

### Step 4

You can deploy updates to your app at any time by again running the `amplify publish` command.

### Video walkthrough

Here is a video walkthrough of how to deploy a static Nuxt site using the Amplify CLI:

{% youtube hk1ZmBD7n60  %}