Implemente una SvelteKit aplicación para Amplify Hosting

Utilice las siguientes instrucciones para implementar una SvelteKit aplicación en Amplify Hosting. Puede usar su propia aplicación o crear una aplicación inicial. Para obtener más información, consulte Crear un proyecto en la SvelteKit documentación.

Para implementar una SvelteKit aplicación con SSR Amplify Hosting, debes agregar un adaptador a tu proyecto. No mantenemos un adaptador propiedad de Amplify para el SvelteKit marco. En este ejemplo, utilizamos el amplify-adapter creado por un miembro de la comunidad. El adaptador está disponible en github.com/gzimbron/amplify-adapter en el sitio web. GitHub AWS no realiza el mantenimiento de este adaptador.

Para implementar una SvelteKit aplicación en Amplify Hosting

1. En su computadora local, navegue hasta la SvelteKit aplicación que desee implementar.

2. Para instalar el adaptador, abra una ventana de terminal y ejecute el siguiente comando. En este ejemplo, se usa el adaptador comunitario disponible en github.com/gzimbron/amplify-adapter. Si utilizas un adaptador comunitario diferente, sustitúyelo amplify-adapter con el nombre de su adaptador.

   npm install amplify-adapter

3. En la carpeta de proyectos de tu SvelteKit aplicación, abre el svelte.config.js archivo. Edita el archivo para usarlo amplify-adapter o reemplazarlo 'amplify-adapter' con el nombre del adaptador. El archivo debe tener un aspecto similar al siguiente.

   import adapter from 'amplify-adapter';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
                 
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
           // Consult https://kit.svelte.dev/docs/integrations#preprocessors
           // for more information about preprocessors
           preprocess: vitePreprocess(),
   
           kit: {
                   // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
                   // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
                   // See https://kit.svelte.dev/docs/adapters for more information about adapters.
                   adapter: adapter()
           }
   };
   
   export default config;

4. Confirma el cambio y envía la aplicación a tu repositorio de Git.

5. Ahora está listo para implementar su SvelteKit aplicación en Amplify.

   Inicie sesión en AWS Management Console y abre la consola Amplify.

6. En la página Todas las aplicaciones, elija Crear nueva aplicación.

7. En la página Comenzar a crear con Amplify, elige tu proveedor de repositorios de Git y, a continuación, selecciona Siguiente.

8. En la página Añadir ramificación de repositorio, haga lo siguiente:

   1. Selecciona el nombre del repositorio al que deseas conectarte.

   2. Seleccione el nombre de la rama del repositorio a la que desee conectarse.

   3. Elija Next (Siguiente).

9. En la página de configuración de la aplicación, busque la sección Configuración de compilación. En Build, introduzca el directorio de salidabuild.

10. También debes actualizar los comandos de compilación de la interfaz de la aplicación en la especificación de compilación. Para abrir la especificación de compilación, selecciona Editar YML archivo.

11. En el amplify.yml archivo, localice la sección de comandos de compilación de la interfaz. Introduzca - cd build/compute/default/ y. - npm i --production

    El archivo de configuración de compilación debería tener el siguiente aspecto.

    version: 1
    frontend:
        phases:
            preBuild:
                commands:
                    - 'npm ci --cache .npm --prefer-offline'
            build:
                commands:
                    - 'npm run build'
                    - 'cd build/compute/default/'
                    - 'npm i --production'
                  
        artifacts:
            baseDirectory: build
            files:
                - '**/*'
        cache:
            paths:
                - '.npm/**/*'
                

12. Seleccione Guardar.

13. Si quieres que Amplify pueda enviar registros de aplicaciones a Amazon CloudWatch Logs, debes habilitarlo de forma explícita en la consola. Abre la sección de configuración avanzada y, a continuación, selecciona Habilitar los registros de SSR aplicaciones en la sección de implementación de Server-Side Rendering (SSR).

14. Elija Next (Siguiente).

15. En la página Revisar, elija Guardar e implementar.