In this guide you will learn how to deploy a Vite site with Amplify Hosting.

### Getting started

<Callout>

In this step, you will create a new Vite site. If you have already created a site, you can jump to the [next step](#creating-the-git-repository).

</Callout>

Create a new Vite site:

```sh
# Using YARN
yarn create vite

# Using NPM
npm create vite@latest
```

Then follow the prompts! See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for details on each supported template.

Next, change into the new directory:
```sh
cd amplify-vite
```

### Creating the Git repository

Next, create a new Git repository and copy the URI of the repository to your clipboard

![Vite Hosting with Amplify Console - Creating the repo](/images/hosting/vite/1.png)

Now, initialize the new repository within the root of your project and push the code to Git.

```sh
git init
git remote add origin git@github.com:username/project-name.git # or your git repository location
git add .
git commit -m 'initial commit'
git push origin main
```

### Deploying the site to Amplify Hosting

To use Amplify Hosting, visit the [Amplify Console](https://console.aws.amazon.com/amplify/home) and click __GET STARTED__ under __Amplify Hosting__.

![Vite Hosting with Amplify Console - Console view](/images/hosting/vite/2.png)

Next, choose the Git provider that you are using and click __Continue__:

![Vite Hosting with Amplify Console - Choosing your Git provider](/images/hosting/vite/3.png)

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

![Vite Hosting with Amplify Console - Choosing your Git repo and branch](/images/hosting/vite/4.png)

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

1. Set the `baseDirectory` location to be `dist`
2. Click __Save__
3. Click __Next__

![Vite Hosting with Amplify Console - Configuring the build settings](/images/hosting/vite/5.png)

Finally, click __Save and deploy__.

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

![Vite Hosting with Amplify Console - Deployment complete](/images/hosting/vite/7.png)

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

### Setting up rewrites for SPAs

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html, except for the specific file extensions specified in the regular expression.

To set up rewrites, follow the guide on AWS Amplify Hosting's [documentation](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa).

<Callout>
Make sure you list the file extensions used in your application (i.e. .json, .webp, etc.) in the regular expression.
</Callout>