Deploy a Vite site

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

Getting started

In this step, you will create a new Vite site. If you have already created a site, you can jump to the next step.

Create a new Vite site:

1# Using YARN
2yarn create vite
4# Using npm
5npm create vite@latest

Then follow the prompts! See create-vite for details on each supported template.

Next, change into the new directory:

1cd 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

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

1git init
2git remote add origin # or your git repository location
3git add .
4git commit -m 'initial commit'
5git push origin main

Deploying the site to Amplify Hosting

To use Amplify Hosting, visit the Amplify Console and click GET STARTED under Amplify Hosting.

Vite Hosting with Amplify Console - Console view

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

Vite Hosting with Amplify Console - Choosing your Git provider

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

Vite Hosting with Amplify Console - Choosing your Git repo and branch

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

Finally, click Save and deploy.

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

Vite Hosting with Amplify Console - Deployment complete

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.

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