Come distribuire un’applicazione SvelteKit?

In questo articolo, costruirete un’applicazione di base per la generazione di preventivi usando SvelteKit e la ospiterete usando Back4app Containers.

SvelteKit è un moderno framework per applicazioni web che si basa sui principi del framework Svelte JavaScript. Offre agli sviluppatori un modo efficiente ed elegante per creare applicazioni web con un’attenzione particolare alla semplicità e alle prestazioni.

Nel 2020, SvelteKit è stato creato da Rich Harris, il creatore di Svelte, e nell’ottobre 2022 Rich Harris e il suo team si sono uniti a Vercel.

Quando si distribuisce un’applicazione SvelteKit, è utile utilizzare Back4app Containers. Back4app Containers è una piattaforma che consente agli sviluppatori di distribuire e gestire applicazioni containerizzate sull’infrastruttura di Back4app.

È un servizio basato sul cloud che fornisce un modo semplice e scalabile per eseguire applicazioni containerizzate in produzione.

Che cos’è SvelteKit?

SvelteKit è un framework web per la creazione di applicazioni web performanti e robuste. È costruito sulla base di Svelte, un framework JavaScript leggero e reattivo.

SvelteKit offre una serie di funzioni che facilitano lo sviluppo e la distribuzione di applicazioni web, tra cui il rendering lato server (SSR), la generazione di siti statici (SSG), il routing lato client, ecc.

Offre inoltre molti vantaggi, come la semplicità, la flessibilità, la scalabilità, le prestazioni, ecc. Continuate a leggere per scoprire come distribuire un’applicazione SvelteKit.

Vantaggi di SvelteKit

Ecco alcuni dei vantaggi dell’utilizzo del framework SvelteKit:

Curva di apprendimento facile

Quando si sceglie un framework front-end per lo sviluppo web, uno dei fattori critici da considerare è la curva di apprendimento associata a quel framework.

Una curva di apprendimento ripida può scoraggiare l’adozione di un framework, mentre una curva dolce può renderlo più accessibile e attraente.

SvelteKit ha una curva di apprendimento molto dolce, soprattutto se si ha familiarità con HTML, CSS e JavaScript. La sua sintassi è semplice e intuitiva e rende facile la comprensione e la creazione di applicazioni web.

Supporto TypeScript

TypeScript è un superset di JavaScript tipizzato staticamente che ha guadagnato popolarità nel mondo dello sviluppo web. Apporta una forte tipizzazione, chiarezza del codice e strumenti migliori ai progetti JavaScript.

SvelteKit dispone di un eccellente supporto per TypeScript, che consente di scrivere codice sicuro dal punto di vista tipologico e di individuare potenziali errori durante lo sviluppo. Questo migliora la qualità del codice, la manutenibilità e la collaborazione all’interno dei team di sviluppo.

Instradamento basato su file

Il routing basato su file è una moderna funzionalità di sviluppo web che semplifica l’organizzazione e la gestione dei percorsi nelle applicazioni. Funziona utilizzando la gestione dei file per determinare le rotte, invece di utilizzare una libreria di terze parti.

SvelteKit utilizza un sistema di routing basato su file. L’organizzazione dei percorsi dell’applicazione avviene tramite la creazione di file e cartelle, semplificando la gestione della struttura del progetto.

Comunità ed ecosistema

Nel campo dello sviluppo web, avere una comunità forte e solidale, insieme a un ecosistema fiorente, è un vantaggio significativo.

SvelteKit beneficia del più ampio ecosistema Svelte, che comprende una comunità in crescita, una ricca collezione di componenti e librerie riutilizzabili e un’ampia documentazione.

Limitazioni di SvelteKit

Sebbene SvelteKit sia un framework potente per la costruzione di applicazioni web efficienti, presenta alcune limitazioni che è bene tenere presenti. Queste limitazioni includono:

Limitazioni del rendering lato server (SSR)

Il rendering lato server (SSR) è una tecnica che consente alle applicazioni web di eseguire il rendering dei contenuti sul server e di inviare l’HTML prerenderizzato al client. L’SSR presenta diversi vantaggi, tra cui un migliore SEO, un caricamento iniziale della pagina più rapido e migliori prestazioni sui dispositivi di fascia bassa.

SvelteKit supporta il rendering lato server. Tuttavia, manca di alcune funzionalità SSR avanzate, disponibili in altri framework, come il controllo a grana fine sul rendering lato server o il supporto per lo streaming SSR.

Utensili limitati

Essendo un framework relativamente nuovo, il tooling di SvelteKit è ancora in evoluzione e potrebbe non avere lo stesso livello di maturità e di funzionalità di altri framework.

Ciò significa che ci può essere una certa variabilità nella configurazione dello sviluppo e nelle scelte degli strumenti tra i diversi progetti SvelteKit. Ciò può comportare un minor numero di opzioni per attività come il linting del codice, i test o l’ottimizzazione della compilazione.

Ecosistema limitato

Un ecosistema limitato è una delle limitazioni di SvelteKit e può influire sull’esperienza di sviluppo e sulle scelte disponibili. Rispetto a framework più affermati, SvelteKit ha un ecosistema più limitato di librerie, strumenti e plugin.

Ciò significa che potrebbe essere necessario costruire alcune funzionalità da zero o affidarsi a soluzioni supportate dalla comunità. È importante considerare lo stato attuale dell’ecosistema SvelteKit quando si decide di utilizzarlo per un progetto.

Dimensione della comunità

Le dimensioni della comunità possono influire in modo significativo sull’esperienza di sviluppo e sul supporto disponibile per un determinato framework.

Sebbene la comunità di SvelteKit stia crescendo rapidamente, è ancora più piccola rispetto alle comunità di altri framework importanti come React e Vue.js.

Questo può significare meno risorse prontamente disponibili, un’adozione più lenta di nuove funzionalità, meno risorse di apprendimento e tempi di risposta potenzialmente più lunghi per il supporto della comunità.

Opzioni di distribuzione di SvelteKit

È possibile distribuire le applicazioni SvelteKit su varie piattaforme, tra cui Infrastructure as a Service (IaaS) e Container as a Service (CaaS).

Infrastruttura come servizio (IaaS)

Le piattaforme Infrastructure as a Service (IaaS) sono servizi di cloud computing che forniscono risorse informatiche virtualizzate su Internet. Queste risorse includono macchine virtuali, storage, networking e altri componenti fondamentali.

Le piattaforme IaaS offrono un modo flessibile e scalabile per accedere e gestire l’infrastruttura IT senza dover investire in hardware fisico e mantenerlo.

Forniscono inoltre servizi gestiti, backup e disaster recovery, sicurezza e conformità, nonché efficienza dei costi secondo un modello di prezzi pay-as-you-go.

Alcuni esempi di piattaforme IaaS che si possono utilizzare per distribuire le applicazioni SvelteKit sono:

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

Contenitore come servizio (CaaS)

Le piattaforme Container as a Service (CaaS), note anche come piattaforme di gestione dei container o piattaforme di orchestrazione dei container, sono servizi basati sul cloud che semplificano la distribuzione, la scalabilità, la gestione e l’orchestrazione delle applicazioni containerizzate.

Queste piattaforme sono progettate per semplificare il processo di containerizzazione e fornire una soluzione completa per la gestione dei container, consentendo di concentrarsi sullo sviluppo delle applicazioni senza le complessità della gestione dell’infrastruttura.

È possibile distribuire le applicazioni SvelteKit utilizzando piattaforme CaaS. Alcune di queste piattaforme includono:

• Docker
• Kubernetes
• Back4App

Queste sono altre opzioni di distribuzione disponibili per le applicazioni SvelteKit. La piattaforma migliore per la vostra applicazione dipenderà dalle vostre esigenze specifiche, comprese le prestazioni, la scalabilità e i costi.

Processo di distribuzione

Utilizzando la piattaforma CaaS di Back4app, l’implementazione di un’applicazione SvelteKit è un processo facile e semplificato che offre molti vantaggi: il CaaS di Back4app gestisce l’infrastruttura sottostante, in modo che possiate concentrarvi sulla creazione delle vostre applicazioni.

Cosa sono i contenitori Back4app?

Back4App Containers, alias “Back4App CaaS” (Containers as a Service), è una funzione fornita da Back4App che consente agli sviluppatori di distribuire e gestire container Docker nell’ambiente cloud fornito da Back4App.

È una soluzione di hosting di container gestiti che semplifica la distribuzione e la gestione dei container Docker nel cloud.

I contenitori Back4app offrono scalabilità, flessibilità e integrazione con altri servizi Back4App, rendendoli adatti a un’ampia gamma di applicazioni e servizi.

È una scelta eccellente per chi vuole sfruttare la containerizzazione per i propri progetti riducendo al minimo la complessità della gestione dell’infrastruttura.

Introduzione al progetto

In questa esercitazione, si costruirà una semplice applicazione generatrice di citazioni con SvelteKit, utilizzando un’API di citazioni per recuperare citazioni casuali da visualizzare.

Per creare un’applicazione SvelteKit, eseguire il seguente comando nel terminale:

npm create svelte@latest quote-generator

Una volta eseguito il comando, configurate il vostro progetto SvelteKit utilizzando i prompt visualizzati sul terminale.

Ad esempio:

Come si vede nell’immagine precedente, il progetto del generatore di citazioni utilizzerà la sintassi di TypeScript, ESLint per il linting del codice e Prettier per la formattazione del codice.

Ora, nel vostro terminale, spostate la vostra directory corrente nella directory del progetto e installate le dipendenze necessarie. Per farlo, eseguire i seguenti comandi nel terminale:

cd quote-generator
npm install

Dopo aver installato le dipendenze necessarie, aprite il progetto nel vostro IDE preferito e iniziate a costruire l’applicazione.

Creare l’applicazione

Quando si costruisce l’applicazione, la prima cosa da fare è definire gli stili globali e il layout dell’applicazione. Per definire gli stili globali dell’applicazione, creare una cartella styles nella cartella src e aggiungere un file global.css alla cartella.

Nel file global.css, scrivere le seguenti righe di codice:

/*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;
}

Il blocco di codice qui sopra imposta alcuni stili di base per l’applicazione. Importa il font Montserrat da Google Fonts.

Applica inoltre gli stili predefiniti per tutti gli elementi, centra il contenuto nel corpo e crea lo stile dell’elemento pulsante negli stati predefiniti e di passaggio.

Una volta definiti gli stili globali per l’applicazione, è necessario applicare gli stili all’applicazione.

Per fare ciò, è necessario il percorso di layout. SvelteKit fornisce un file +layout.svelte per aiutare a definire i layout nella propria applicazione. È possibile definire il layout dell’applicazione aggiungendo il file +layout.svelte alla cartella src/routes.

Nel file +layout.svelte, importare il file global.css per applicare gli stili globali all’applicazione.

Così:

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

L’elemento slot crea uno spazio in cui l’applicazione può inserire il contenuto della pagina. Quando si esegue il rendering di una pagina, l’applicazione riempie l’elemento slot con il contenuto della pagina, rendendolo visibile all’interno del layout.

Nella cartella src/lib del progetto, creare un file Card.svelte. Questo è il componente Card che verrà utilizzato per rendere i dati recuperati dall’API delle quotazioni.

Il componente Scheda dovrebbe avere questo aspetto:

<!-- 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>

Nel tag script del componente Card, sono definiti due oggetti di scena, l’autore e il contenuto. Entrambi sono di tipo stringa con valori iniziali di stringhe vuote.

L’elemento main definisce il modello del componente. Il modello include un elemento h4 che visualizza il valore della proprietà author e un elemento p che visualizza il valore della proprietà content. Infine, il tag style contiene le proprietà e i valori CSS che definiscono lo stile del componente.

Ora, importare e renderizzare il componente Card nel file +page.svelte. Questo è il percorso della home che viene visualizzato quando si esegue il rendering dell’applicazione.

Nel file +page.svelte, si recuperano i dati dall’API delle quotazioni e li si passa al componente Card utilizzando i suoi oggetti di scena.

Così:

<!-- +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>

Il blocco di codice precedente recupera i dati dall’API delle quotazioni con la funzione fetchQuote e poi assegna i dati recuperati alla variabile delle quotazioni.

Passando la funzione fetchQuote al gancio onMount, si assicura che venga eseguita quando il componente viene montato (cioè durante il rendering iniziale del componente).

Il componente Card accetta i valori delle proprietà author e content dall’oggetto quote e li visualizza. Facendo clic sul pulsante si attiva la funzione fetchQuote per recuperare un’altra citazione casuale da visualizzare.

Il blocco di codice precedente utilizza un componente Icona del pacchetto @iconify/svelte. Per utilizzare questo componente, è necessario installare il pacchetto @iconify/svelte eseguendo il seguente comando nella cartella del progetto sul terminale:

npm install --save-dev @iconify/svelte

Dopo aver installato il pacchetto @iconify/svelte, eseguire l’applicazione sul server di sviluppo per vedere l’applicazione. Per farlo, eseguire il seguente comando sul terminale:

npm run dev

L’esecuzione del comando precedente avvia il server di sviluppo su http://localhost:5173/. Aprire il link nel browser web per vedere l’applicazione.

L’applicazione dovrebbe avere il seguente aspetto:

Dockerizzare l’applicazione

Prima di poter distribuire la propria applicazione sulla piattaforma CaaS di Back4app, è necessario dockerizzarla. Per dockerizzare un’applicazione SvelteKit, è necessario installare l’adattatore per nodi di Svelte.

È possibile installare l’adattatore del nodo eseguendo il seguente comando nel terminale:

npm i -D @sveltejs/adapter-node

L’esecuzione di questo comando installa il pacchetto @sveltejs/adapter-node come dipendenza di sviluppo nel progetto SvelteKit. Si utilizza questo adattatore quando si vuole distribuire l’applicazione SvelteKit in un ambiente Node.js.

Una volta terminata l’installazione del pacchetto, sostituite la prima riga di codice nel file svelte.config.js con il codice seguente:

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

Il passo successivo è creare un file .dockerignore nella cartella principale del progetto. Nel file .dockerignore, specificare i file e le directory che devono essere esclusi durante la creazione dell’immagine Docker.

Così:

node_modules
.svelte-kit
build
public

Dopo aver specificato i file e le directory da escludere. Creare un file Docker chiamato Dockerfile nella cartella principale del progetto.

Nel file Docker, aggiungere queste righe di codice:

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", "."]

Questo file Docker provoca una compilazione in più fasi, in cui la prima fase costruisce l’applicazione e la seconda crea un’immagine di produzione più piccola con solo le dipendenze necessarie.

Ora è possibile creare l’immagine docker dell’applicazione eseguendo il seguente comando nel terminale:

docker build -t quote-generator .

Distribuzione dell’applicazione

Dopo aver dockerizzato la vostra applicazione e averla spinta su un repository GitHub, potete distribuirla su Back4app. Per farlo, create un account Back4app, se non ne avete già uno.

Per creare un account Back4app, seguite la seguente procedura:

1. Visitate il sito web di Back4app.
2. Fare clic sul pulsante “Iscriviti”.
3. Compilate il modulo di iscrizione e inviatelo.

Dopo aver creato il vostro account Back4app, accedete al vostro account sul sito web di Back4app e create una nuova applicazione. Per farlo, è sufficiente fare clic sul pulsante “Nuova app” nell’angolo in alto a destra dello schermo.

Selezionare l’opzione Container as a Service. Dopo aver selezionato questa opzione, il sito web vi reindirizzerà a una pagina diversa in cui dovrete collegare il vostro account GitHub a Back4app.

Una volta collegato il vostro account GitHub a Back4app, selezionate il repository della vostra applicazione per la distribuzione.

Assegnare un nome all’applicazione e configurare la sua distribuzione iniziale prima di distribuirla definitivamente.

Una volta che l’applicazione è stata distribuita con successo, Back4app vi fornirà un link per accedere all’applicazione sul vostro browser web.

Conclusione

In conclusione, la distribuzione di un’applicazione SvelteKit utilizzando la piattaforma CaaS di Back4pp semplifica lo sviluppo. Il processo è semplice.

Comporta la creazione dell’applicazione, la sua dockerizzazione, il push dell’applicazione su un repository GitHub e infine il deploy dell’applicazione.

Quando si pensa di distribuire le applicazioni SvelteKit, la piattaforma Back4app CaaS. offre una soluzione scalabile e conveniente.

Se vi è piaciuto questo articolo, potreste anche leggere l’articolo Come costruire un’app SvelteKit usando ChatGPT.

FAQ