AWS Amplify: getting started with Vite

Mon Mar 20 2023

When it comes to starting a new React app on Amplify, the Amplify docs suggest using Create React App. But now, there's a new player in town: Vite. Vite is a great alternative for creating single-page React applications. However, Create React App has some of the best pre-configured and battle-tested browser polyfills for web applications that need broad support across browsers, particularly in corporate environments.

Despite this, for projects that want to embrace the latest and greatest, Vite provides some definite advantages. However, some changes to the default Vite project start need to be done to support the use of the AWS SDK. Issue #3673.

##Scaffolding Your Vite Project To start off with typescript use --template react-ts

With NPM:

$ npm create vite@latest my-vue-app --template react

With Yarn:

$ yarn create vite my-vue-app --template react

With PNPM:

$ pnpm create vite my-vue-app --template react

Then follow the prompts!

Once the project is created there add the following

index.html in the <body> tag

      // AWS Amplify needs this to work. See
      const isBrowser = () => typeof window !== "undefined";
      const isGlobal = () => typeof global !== "undefined";
      if (!isGlobal() && isBrowser()) {
        var global = window;

Also, add a resolve object to the vite.config.js

resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser",

Micah Redwood created a repository with how your project should look after following these steps and can be used as a reference.

However, the process is simple if you have an existing create-react app and want to migrate to Vite. I have found 2 great articles that break them through the steps and once the project is using Vite it will still need the 2 code fixes to be able to work on Amplify.

Migrating your Create React App project to Vite

Migrating from Create React App (CRA) to Vite

AmplifyCreate React AppVite React projectsAWS SDK

Copyright © 2023 - All right reserved