Setup Vite for AWS Amplify
In this tutorial we are going to setup a React project for AWS Amplify using Vite (instead of create-react-app).
My Sob Story
I struggled a lot to get this working, with many sleepless nights and crying in the corner. After posting to both AWS Re:Post and Stack Overflow with no luck, I scoured the internet for countless hours. Found every article, post, tutorial, GitHub support page, Reddit post, etc. that existed containing the words “Vite” and “Amplify”. Finally pieced together a few different things to get this to work.
What is Vite?
Vite is a build tool and development server for modern web applications, particularly designed for building projects using JavaScript frameworks like React, Vue.js, and others. You can read more about it at their website.
Why not use Create-React-App?
“Vite” and “Create React App” (CRA) are both tools for building React applications, but they have different design philosophies and features. Vite makes it super easy to start developing React projects locally. Vite is known for its extremely fast development server. It uses native ES modules (ECMAScript modules) and does not perform bundling during development, resulting in quicker start times and faster Hot Module Replacement (HMR) updates. This speed can significantly improve the developer’s workflow and productivity.
