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.