Desplegar una app SvelteKit en Amplify

Si estás buscando crear una aplicación web en Sveltekit y desplegarla en la nube AWS de Amplify, estás en el lugar correcto. En este tutorial, te guiaré paso a paso para crear y desplegar una App Sveltekit en Amplify en menos de 4 minutos.

Paso 1: Crear la App Sveltekit

Comencemos creando nuestra aplicación Sveltekit ejecutando el comando «npm create svelte«, junto con el nombre de la carpeta. Asegúrate de seleccionar «demo app», «typescript», «eslint» y «prettier» en las opciones de configuración.

npm create svelte app-name

Paso 2: Instalar las dependencias

Una vez creada la carpeta, abre Visual Studio Code y ejecuta el comando «npm i» para instalar las dependencias necesarias.

npm i

Paso 3: Inicializar el proyecto en Amplify

Ejecutemos el comando «amplify init» para crear el proyecto. Asegúrate de elegir «No» cuando se te pregunte si deseas utilizar la configuración por defecto, ya que necesitaremos cambiar el directorio de build. Luego, selecciona tu perfil de AWS o ingresa tu Access Key.

amplify init

Paso 4: Instalar adaptador estático

Mientras Amplify crea los recursos en la nube, instalamos la dependencia de desarrollo «adapter-static» para poder subir un sitio web estático.

npm i -D @sveltejs/adapter-static

Paso 5: Configurar Sveltekit para Amplify

Dentro de la configuración de Sveltekit, cambiamos el import del adaptador automático por nuestro adaptador estático y agregamos la opción «fallback = index.html» para que todas las páginas apunten al index.html.

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter({
			fallback: 'index.html'
		})
	}
};

export default config;

Paso 6: Agregar el hosting en Amplify

Una vez que Amplify ha terminado de crear los recursos, agregamos el hosting con el comando «amplify add hosting», seleccionando «hosting en Amplify con manual deployment» en este caso.

amplify add hosting

Paso 7: Desplegar la aplicación

Ahora, desplegamos la aplicación con el comando «amplify publish» junto con la opción «–y» para confirmar automáticamente las preguntas. Esperamos a que se complete el proceso.

amplify publish --y

Este proceso crea los recursos en la nube necesarios para hospedar el sitio web. Se crea un bucket de S3 para almacenar los archivos, un CDN para distribuir el contenido y un certificado SSL para garantizar la seguridad del sitio web.

Paso 7.1: Agregar una reescritura en Amplify

Mientras se crean los recursos, podemos agregar una reescritura en Amplify para que todas las páginas apunten al index.html. Asegúrate de configurarla como tipo 200 para que funcione como una PWA.

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

Paso 8: Comprobar la App Sveltekit

¡Felicidades! Ahora tienes tu App Sveltekit desplegada en la nube de AWS de Amplify, lo que significa que tienes una alta disponibilidad y tu aplicación puede manejar una gran cantidad de tráfico.

Si deseas ver un tutorial en video sobre cómo crear y desplegar una aplicación SvelteKit en Amplify, te invito a que revises el siguiente video:

En este video, se muestra paso a paso cómo realizar el proceso que hemos descrito anteriormente y se proporcionan consejos útiles para asegurarse de que tu aplicación se despliegue de manera efectiva en la nube de AWS. ¡Esperamos que te sea de ayuda!