Explora las ventajas de usar Vite para tu aplicación React en Amplify, con instrucciones paso a paso para configurarlo y recursos para ayudarte a migrar desde Create React App.
Cuando se trata de comenzar una nueva aplicación React en Amplify, los documentos de Amplify sugieren utilizar Create React App. Pero ahora, hay un nuevo contendiente en la ciudad: Vite. Vite es una excelente alternativa para crear aplicaciones React de una sola página. Sin embargo, Create React App tiene algunos de los mejores polyfills preconfigurados y probados en batalla para aplicaciones web que necesitan amplio soporte en navegadores, particularmente en entornos corporativos.
A pesar de esto, para proyectos que desean adoptar lo último y lo mejor, Vite ofrece algunas ventajas definitivas. Sin embargo, se deben realizar algunos cambios en el inicio del proyecto Vite predeterminado para admitir el uso del SDK de AWS. Issue #3673.
##Andamiaje de tu proyecto Vite
Para comenzar con Typescript, usa --template react-ts
Con NPM:
$ npm create vite@latest my-vue-app --template react
Con Yarn:
$ yarn create vite my-vue-app --template react
Con PNPM:
$ pnpm create vite my-vue-app --template react
¡Luego sigue las indicaciones!
Una vez creado el proyecto, agrega lo siguiente
index.html en la etiqueta <body>
<script>
// AWS Amplify necesita esto para funcionar. Ver https://github.com/aws/aws-sdk-js/issues/3673
const isBrowser = () => typeof window !== "undefined";
const isGlobal = () => typeof global !== "undefined";
if (!isGlobal() && isBrowser()) {
var global = window;
}
</script>
Además, agrega un objeto resolve en el vite.config.js
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser",
},
},
Micah Redwood creó un repositorio con cómo debería verse tu proyecto después de seguir estos pasos y se puede usar como referencia.
https://github.com/micah-redwood/vite-amplify-demo
Sin embargo, el proceso es simple si ya tienes una aplicación create-react y deseas migrar a Vite. Encontré 2 excelentes artículos que te guiarán a través de los pasos y, una vez que el proyecto esté utilizando Vite, aún necesitará las 2 soluciones de código para poder funcionar en Amplify.