Cómo desplegar una aplicación SvelteKit?

En este artículo, construirás una aplicación básica generadora de presupuestos usando SvelteKit y la alojarás usando Back4app Containers.

SvelteKit es un moderno marco de aplicaciones web que se basa en los principios del marco Svelte JavaScript. Ofrece a los desarrolladores una forma eficiente y elegante de crear aplicaciones web centradas en la sencillez y el rendimiento.

En 2020, SvelteKit fue creado por Rich Harris, el creador de Svelte, y en octubre de 2022, Rich Harris y su equipo se unieron a Vercel.

Al desplegar una aplicación SvelteKit, es útil utilizar los Back4app Containers. Back4app Containers es una plataforma que permite a los desarrolladores desplegar y gestionar aplicaciones en contenedores en la infraestructura de Back4app.

Se trata de un servicio basado en la nube que proporciona una forma sencilla y escalable de ejecutar aplicaciones en contenedores en producción.

¿Qué es SvelteKit?

SvelteKit es un framework web para construir aplicaciones web robustas y de alto rendimiento. Está construido sobre Svelte, un framework JavaScript ligero y reactivo.

SvelteKit proporciona una serie de funciones que facilitan el desarrollo y la implantación de aplicaciones web, como la renderización del lado del servidor (SSR), la generación de sitios estáticos (SSG), el enrutamiento del lado del cliente, etc.

Además, ofrece muchas ventajas, como simplicidad, flexibilidad, escalabilidad, rendimiento, etc. Sigue leyendo para aprender a desplegar la app SvelteKit.

Ventajas de SvelteKit

Estas son algunas de las ventajas de utilizar el framework SvelteKit:

Curva de aprendizaje sencilla

A la hora de elegir un framework front-end para el desarrollo web, uno de los factores críticos a tener en cuenta es la curva de aprendizaje asociada a dicho framework.

Una curva de aprendizaje pronunciada puede disuadir de adoptar un marco, mientras que una suave puede hacerlo más accesible y atractivo.

SvelteKit tiene una curva de aprendizaje suave, especialmente si estás familiarizado con HTML, CSS y JavaScript. Su sintaxis es sencilla e intuitiva, lo que facilita la comprensión y la creación de aplicaciones web.

Compatibilidad con TypeScript

TypeScript es un superconjunto de JavaScript con tipado estático que ha ganado popularidad en el mundo del desarrollo web. Aporta tipado fuerte, claridad de código y mejores herramientas a los proyectos JavaScript.

SvelteKit cuenta con una excelente compatibilidad con TypeScript, lo que permite escribir código de tipo seguro y detectar posibles errores durante el desarrollo. Esto mejora la calidad del código, la capacidad de mantenimiento y la colaboración dentro de los equipos de desarrollo.

Enrutamiento basado en archivos

El enrutamiento basado en archivos es una moderna función de desarrollo web que facilita la organización y gestión de rutas en tu aplicación. Funciona utilizando la gestión de archivos para determinar las rutas en lugar de utilizar una biblioteca de terceros.

SvelteKit utiliza un sistema de rutas basado en archivos. Organizas las rutas de tu aplicación creando archivos y carpetas, lo que facilita la gestión de la estructura de tu proyecto.

Comunidad y ecosistema

En el ámbito del desarrollo web, contar con una comunidad fuerte y solidaria, junto con un ecosistema próspero, es una ventaja significativa.

SvelteKit se beneficia del amplio ecosistema de Svelte, que incluye una comunidad cada vez mayor, una rica colección de componentes y bibliotecas reutilizables y una extensa documentación.

Limitaciones de SvelteKit

Aunque SvelteKit es un potente framework para crear aplicaciones web eficientes, tiene algunas limitaciones que debes tener en cuenta. Estas limitaciones incluyen:

Limitaciones de la renderización del lado del servidor (SSR)

La renderización del lado del servidor (SSR) es una técnica que permite a las aplicaciones web renderizar contenidos en el servidor y enviar HTML pre-renderizado al cliente. La SSR tiene varias ventajas, como la mejora del SEO, cargas iniciales de página más rápidas y mejor rendimiento en dispositivos de gama baja.

SvelteKit soporta el renderizado del lado del servidor. Sin embargo, carece de algunas funciones avanzadas de SSR disponibles en otros frameworks, como el control detallado del renderizado del lado del servidor o la compatibilidad con SSR en streaming.

Herramientas limitadas

Al tratarse de un marco relativamente nuevo, las herramientas de SvelteKit aún están evolucionando, y puede que no tengan el mismo nivel de madurez y conjunto de características que otros marcos.

Esto significa que puede haber cierta variabilidad en la configuración de desarrollo y las opciones de herramientas entre los diferentes proyectos SvelteKit. Esto puede dar lugar a menos opciones para tareas como la limpieza de código, las pruebas o la optimización de la compilación.

Ecosistema limitado

Un ecosistema limitado es una de las limitaciones de SvelteKit, y puede afectar a la experiencia de desarrollo y a las opciones disponibles. En comparación con frameworks más consolidados, SvelteKit tiene un ecosistema más pequeño de bibliotecas, herramientas y plugins.

Esto significa que puede que tengas que construir ciertas funcionalidades desde cero o confiar en soluciones soportadas por la comunidad. Es importante tener en cuenta el estado actual del ecosistema SvelteKit a la hora de decidir si utilizarlo para un proyecto.

Tamaño de la Comunidad

El tamaño de la comunidad puede influir significativamente en la experiencia de desarrollo y el apoyo disponible para un marco concreto.

Aunque la comunidad de SvelteKit está creciendo rápidamente, sigue siendo más pequeña que las comunidades en torno a otros frameworks importantes como React y Vue.js.

Esto puede significar menos recursos disponibles, una adopción más lenta de las nuevas funciones, menos recursos de aprendizaje y, potencialmente, tiempos de respuesta más largos para el apoyo de la comunidad.

Opciones de implantación de SvelteKit

Puedes desplegar aplicaciones SvelteKit en varias plataformas, incluyendo Infraestructura como Servicio (IaaS) y Contenedor como Servicio (CaaS).

Infraestructura como servicio (IaaS)

Las plataformas de infraestructura como servicio (IaaS) son servicios de computación en nube que proporcionan recursos informáticos virtualizados a través de Internet. Estos recursos incluyen máquinas virtuales, almacenamiento, redes y otros componentes fundamentales.

Las plataformas IaaS ofrecen una forma flexible y escalable de acceder y gestionar su infraestructura informática sin invertir en hardware físico ni mantenerlo.

También ofrecen servicios gestionados, copias de seguridad y recuperación en caso de catástrofe, seguridad y conformidad, y rentabilidad siguiendo un modelo de precios de pago por uso.

Algunos ejemplos de plataformas IaaS que puede utilizar para desplegar aplicaciones SvelteKit incluyen:

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

Contenedor como servicio (CaaS)

Las plataformas de contenedores como servicio (CaaS), también conocidas como plataformas de gestión de contenedores o plataformas de orquestación de contenedores, son servicios basados en la nube que simplifican la implantación, el escalado, la gestión y la orquestación de aplicaciones en contenedores.

Estas plataformas están diseñadas para agilizar el proceso de contenedorización y proporcionar una solución integral para la gestión de contenedores, lo que le permite centrarse en el desarrollo de sus aplicaciones sin las complejidades de la gestión de la infraestructura.

Puede desplegar sus aplicaciones SvelteKit utilizando plataformas CaaS. Algunas de estas plataformas son:

• Docker
• Kubernetes
• Back4App

Tenga en cuenta que estas son otras opciones de despliegue disponibles para las aplicaciones SvelteKit. La mejor plataforma para su aplicación dependerá de sus necesidades específicas, incluidas las consideraciones de rendimiento, escalabilidad y coste.

Proceso de implantación

Utilizando la plataforma Back4app CaaS, desplegar una aplicación SvelteKit es un proceso fácil y ágil que ofrece muchas ventajas.- El CaaS de Back4app se encarga de la infraestructura subyacente, para que usted pueda centrarse en crear sus aplicaciones.

¿Qué son los contenedores Back4app?

Back4App Containers, también conocido como “Back4App CaaS” (Containers as a Service), es una característica proporcionada por Back4App que permite a los desarrolladores desplegar y gestionar contenedores Docker en el entorno cloud proporcionado por Back4App.

Se trata de una solución de alojamiento de contenedores gestionada que simplifica el despliegue y la gestión de contenedores Docker en la nube.

Los Back4app Containers ofrecen escalabilidad, flexibilidad e integración con otros servicios de Back4App, lo que los hace adecuados para una amplia gama de aplicaciones y servicios.

Es una opción excelente para quienes desean aprovechar la contenedorización para sus proyectos minimizando la complejidad de la gestión de la infraestructura.

Introducción del proyecto

En este tutorial, crearás una sencilla aplicación generadora de citas con SvelteKit, utilizando una API de citas para obtener citas aleatorias y mostrarlas.

Para crear una aplicación SvelteKit, ejecute el siguiente comando en su terminal:

npm create svelte@latest quote-generator

Una vez ejecutado el comando, configura tu proyecto SvelteKit siguiendo las indicaciones que aparecen en el terminal.

Por ejemplo:

Como se ve en la imagen de arriba, el proyecto generador de presupuestos utilizará la sintaxis TypeScript, ESLint para el code linting, y Prettier para el formateo del código.

Ahora en su terminal, cambie su directorio actual al directorio del proyecto e instale las dependencias necesarias. Para ello, ejecuta los siguientes comandos en tu terminal:

cd quote-generator
npm install

Después de instalar las dependencias necesarias, abra el proyecto en su IDE favorito y comience a construir la aplicación.

Construir su aplicación

Cuando construyas tu aplicación, lo primero que tienes que hacer es definir los estilos globales y el diseño de la aplicación. Para definir los estilos globales de tu aplicación, crea una carpeta styles en el directorio src y añade un archivo global.css a la carpeta.

En el archivo global.css, escriba las siguientes líneas de código:

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

El bloque de código anterior configura algunos estilos básicos para tu aplicación. Importa la fuente Montserrat de Google Fonts.

También aplica los estilos predeterminados a todos los elementos, centra el contenido en el cuerpo y aplica estilos al elemento botón en sus estados predeterminado y hover.

Una vez que haya terminado de definir los estilos globales para su aplicación, debe aplicar los estilos a la aplicación.

Para ello, necesitas la ruta layout. SvelteKit proporciona un archivo +layout.s velte para ayudarte a definir diseños en tu aplicación. Puedes definir el layout de tu aplicación añadiendo el archivo +layout. svelte al directorio src/routes.

En el archivo +layout.svelte, importa tu archivo global.css para aplicar tus estilos globales a la aplicación.

Así:

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

El elemento slot crea un espacio para que la aplicación inserte el contenido de la página. Cuando se renderiza una página, la aplicación rellena el elemento slot con el contenido de la página, haciéndolo visible dentro del diseño.

En el directorio src/lib de su proyecto, cree un archivo Card.svelte. Este es el componente Card que utilizará para representar los datos obtenidos de la API de presupuestos.

El componente Tarjeta debería tener este aspecto:

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

En la etiqueta script del componente Card, hay dos props definidos, el author y el content props. Ambos son de tipo cadena con valores iniciales de cadenas vacías.

El elemento main define la plantilla del componente. La plantilla incluye un elemento h4 que muestra el valor de la propiedad author y un elemento p que muestra el valor de la propiedad content. Por último, la etiqueta style contiene propiedades y valores CSS que dan estilo al componente.

Ahora, importa y renderiza el componente Card en el archivo +page.svelte. Esta es la ruta de inicio que se muestra al renderizar la aplicación.

En el archivo +page.svelte, obtendrá los datos de la API de presupuestos y los pasará al componente Card utilizando sus props.

Así:

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

El bloque de código anterior obtiene datos de la API de cotización con la función fetchQuote y luego asigna los datos obtenidos a la variable de cotización.

Pasar la función fetchQuote al hook onMount asegura que se ejecuta cuando el componente se monta (es decir, el render inicial del componente).

El componente Card acepta los valores de las propiedades author y content del objeto quote y los muestra. Al hacer clic en el botón se activa la función fetchQuote para obtener otra cita aleatoria y mostrarla.

El bloque de código anterior utiliza un componente Icono del paquete @iconify/svelte. Para utilizar este componente, primero debe instalar el paquete @iconify/svelte ejecutando el siguiente comando en el directorio de su proyecto en su terminal:

npm install --save-dev @iconify/svelte

Después de instalar el paquete @iconify/svelte, ejecute su aplicación en el servidor de desarrollo para ver la aplicación. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

npm run dev

Ejecutando el comando anterior se iniciará el servidor de desarrollo en http://localhost:5173/. Abre el enlace en tu navegador web para ver tu aplicación.

La aplicación debería tener este aspecto:

Dockerice su aplicación

Antes de que puedas desplegar tu aplicación en la plataforma Back4app CaaS, debes dockerizarla primero. Para dockerizar una aplicación SvelteKit, primero necesitas instalar el adaptador de nodos de Svelte.

Puede instalar el adaptador de nodo ejecutando el siguiente comando en su terminal:

npm i -D @sveltejs/adapter-node

Ejecutar este comando instala el paquete @sveltejs/adapter-node como una dependencia de desarrollo en tu proyecto SvelteKit. Utiliza este adaptador cuando quieras desplegar tu aplicación SvelteKit en un entorno Node.js.

Una vez que hayas terminado de instalar el paquete, sustituye la primera línea de código de tu archivo svelte.config.js por el código que aparece a continuación:

import adapter from '@sveltejs/adapter-node';

El siguiente paso es crear un archivo .dockerignore en el directorio raíz de tu proyecto. En el archivo . dockerignore, especifica los archivos y directorios que deben excluirse al compilar la imagen Docker.

Así:

node_modules
.svelte-kit
build
public

Después de especificar los archivos y directorios que deben excluirse. Cree un archivo Docker llamado Dockerfile en el directorio raíz del proyecto.

En el Dockerfile, añada estas líneas de código:

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

Este Dockerfile provoca una compilación en varias etapas, en la que la primera etapa compila la aplicación y la segunda crea una imagen de producción más pequeña con sólo las dependencias necesarias.

Ahora, puedes construir la imagen docker de tu aplicación ejecutando el siguiente comando en tu terminal:

docker build -t quote-generator .

Despliegue de la aplicación

Una vez que hayas dockerizado tu aplicación y la hayas empujado a un repositorio de GitHub, puedes desplegarla en Back4app. Para ello, crea una cuenta de Back4app si aún no tienes una.

Para crear una cuenta Back4app, sigue estos pasos:

1. Visita el sitio web de Back4app.
2. Haga clic en el botón “Inscribirse”.
3. Rellene el formulario de inscripción y envíelo.

Después de crear su cuenta Back4app, ingrese a su cuenta en el sitio web de Back4app y cree una nueva aplicación. Para ello, haz clic en el botón “Nueva aplicación” situado en la esquina superior derecha de la pantalla.

Seleccione la opción Container as a Service. Después de seleccionar esta opción, el sitio web le redirigirá a una página diferente donde podrá vincular su cuenta de GitHub a Back4app.

Una vez que hayas vinculado tu cuenta de GitHub a Back4app, selecciona el repositorio de tu aplicación para el despliegue.

Dé un nombre a su aplicación y configure su despliegue inicial antes de desplegar finalmente la aplicación.

Una vez que la aplicación se haya desplegado con éxito, Back4app le proporcionará un enlace para acceder a la aplicación en su navegador web.

Conclusión

En conclusión, desplegar una aplicación SvelteKit utilizando la plataforma CaaS de Back4pp simplifica el desarrollo. El proceso es sencillo.

Se trata de crear la aplicación, dockerizarla, enviarla a un repositorio de GitHub y, por último, desplegarla.

Al considerar el despliegue de sus aplicaciones SvelteKit, la plataforma Back4app CaaS. proporciona una solución escalable y rentable.

Si te ha gustado este artículo, puede que también disfrutes leyendo el artículo Cómo crear una aplicación SvelteKit utilizando ChatGPT.

PREGUNTAS FRECUENTES