Da un po’ di tempo a questa parte, WordPress headless è una grande tendenza nell’ambito del web dev. La separazione tra front-end e back-end può portare a un grado di controllo più elevato, ad applicazioni omnichannel e ad alcuni utilizzi interessanti di questa nuova tecnologia.
Molti sviluppatori si sono divertiti a sperimentare framework come Vue.js e React.js o addirittura framework web come Django e Ruby on Rails, che di solito sono quasi del tutto incompatibili con WordPress.
Ci sono molti framework come questi che funzionano bene con WordPress headless, ma SvelteKit è un framework speciale. Questo framework per l’interfaccia utente è stato creato appositamente per semplificare lo sviluppo di applicazioni web con un codice conciso e raffinato. Può semplificare facilmente le funzionalità che normalmente non danno il massimo in un ambiente “disaccoppiato”.
Vi interessa saperne di più? Allora rivediamo insieme alcune nozioni di base di WordPress headless e poi passeremo a SvelteKit e come farlo funzionare nel vostro ambiente.
Cos’è WordPress headless?
Probabilmente conoscete già la differenza tra il front-end e il back-end di WordPress. Il back end è il luogo in cui avvengono tutte le operazioni di base del CMS: si creano post e pagine, si installano i plugin, si progetta il tema e si modificano le impostazioni.
Dall’altra parte, il front-end è il sito web che viene visualizzato dai visitatori. WordPress, insieme ai suoi temi e plugin, utilizza varie funzioni come get_posts() per prelevare e visualizzare i dati di cui ha bisogno.
Ad esempio, prendiamo il widget dei Post Recenti che viene visualizzato sulla homepage. Utilizzando funzioni di questo tipo, accede ai dati dal back-end e mostra gli ultimi post nel front-end pubblico.
$Gli articoli correlati mostrati sul blog di Kinsta.Il back-end e il front-end di WordPress sono strettamente intrecciati e, per molti versi, dipendono l’uno dall’altro per funzionare, ma questo non significa che siano inseparabili.
È qui che entra in gioco il concetto di “WordPress headless”: con questo sistema si separa, o disaccoppia, il back end di WordPress. In questo modo sarete liberi di collegarlo a qualsiasi tecnologia front-end vogliate utilizzare, non solo PHP, ma qualsiasi framework di sviluppo web o persino un’applicazione.
Questo ha la funzionalità aggiuntiva di permettere di utilizzare il CMS WordPress su più canali. Potrete portare i post del blog o altri elementi del CMS su più siti web, applicazioni mobili e ovunque vogliate.
Nel complesso, WordPress headless offre un maggiore controllo sul CMS e la possibilità di utilizzare tecnologie solitamente incompatibili con esso. Inoltre, evita di dover scrivere un’intera applicazione da zero: si può utilizzare il CMS integrato di WordPress per fare parte del lavoro.
Cos’è l’API REST?
Per far funzionare WordPress headless, è necessario collegare le proprie applicazioni utilizzando un’API (Application Programming Interface). Le API permettono a due applicazioni diverse di interfacciarsi tra loro, in questo caso il back-end di WordPress e la vostra applicazione front-end personalizzata.
Esistono molti tipi di API, ma l’API REST è una di quelle già presenti in WordPress. Questo permette alle applicazioni esterne di recuperare in modo sicuro i dati dal back-end di WordPress senza dover passare per l’interfaccia di amministrazione.
L’API REST è utilizzata in diverse funzioni ufficiali di WordPress, tra cui l’editor di blocchi, e la maggior parte dei temi e dei plugin che richiedono un’API per funzionare la utilizzano.
Questo vale anche per le applicazioni headless. Molte di queste utilizzano l’API REST per interfacciarsi con WordPress, recuperando i dati dal back-end e rendendoli dinamicamente attraverso l’applicazione front-end.
L’API REST fornisce endpoint che rappresentano diverse risorse di WordPress, come post, pagine, utenti, categorie e così via. Accedere a questi punti permette di visualizzare questi dati nel front-end.
Sebbene sia possibile utilizzare l’API REST, SvelteKit si basa principalmente su una tecnologia diversa per molte delle sue funzioni: GraphQL.
Cos’è GraphQL?
GraphQL non è un’API vera e propria, ma un linguaggio di interrogazione API. A differenza delle API REST tradizionali, in cui i client devono spesso effettuare più richieste a diversi endpoint per recuperare dati correlati, GraphQL permette di recuperare tutti i dati con un’unica richiesta.
Nel complesso, GraphQL è stato progettato per permettere di fare query più concise in un framework veloce e ottimizzato. È anche più facile da imparare e meno complesso delle API REST.
Per questi motivi, molti framework headless per WordPress utilizzano GraphQL al posto dell’API REST, o insieme ad essa. Sebbene GraphQL non sia incluso in WordPress come l’API REST, esistono dei plugin che si possono utilizzare per integrare questa funzionalità nel CMS.
Grazie al framework ottimizzato, eviterete di recuperare i dati in eccesso o in difetto. Potrete recuperare i dati esatti di cui avete bisogno con un’unica query, il che è molto più semplice sia per la vostra rete e che per il vostro server.
Cos’è SvelteKit?
SvelteKit è un framework web costruito su Svelte, un framework front-end open source simile a Next.js o React nelle funzioni. È stato creato per semplificare il processo di creazione di applicazioni web e, sebbene non sia stato creato specificamente per WordPress headless, questa è solo una delle tante applicazioni possibili.
SvelteKit è stato costruito su HTML, CSS e Javascript – niente di più. Ciò lo rende facilissimo da usare e agnostico rispetto ai framework, quindi si può usare insieme ad altri framework per creare un’applicazione front-end completamente dinamica o per costruire un sito statico.
Svelte è stato lanciato nel 2016 e viene aggiornato attivamente ancora oggi. Il framework web SvelteKit è arrivato qualche anno dopo, nel 2020. Entrambi sono molto conosciuti e amati nel panorama dello sviluppo web e permettono di scrivere codice semplice ed elegante.
Perché usare SvelteKit per WordPress headless
Ci sono alcuni aspetti di WordPress headless che possono essere difficili da far funzionare. Grazie al design minimale di SvelteKit, questi problemi sono ridotti al minimo e rendono la configurazione di WordPress headless molto più agevole.
Ecco solo alcune delle funzionalità offerte da SvelteKit.
- Solo Javascript. A differenza di altri framework, non è necessario preoccuparsi di dipendenze e configurazioni complicate. Spesso non è necessaria alcuna configurazione. SvelteKit funziona ovunque sia possibile eseguire Javascript.
- Agnostico ai framework. Grazie alla sua semplicità, SvelteKit si integra bene con altri framework. È possibile portare qualsiasi tecnologia nella propria applicazione WordPress headless.
- Estensibile. Se SvelteKit non funziona perfettamente in un ambiente, è estremamente facile estenderlo e sistemare tutto ciò che non funziona bene nella propria configurazione.
- Leggero e facile da imparare. SvelteKit si basa solo su Javascript, HTML e CSS. È molto leggero rispetto ai framework tradizionali ed è facilissimo da usare. Crea codice pulito, elegante e semplice con componenti compatti e concisi.
- Recupero dei dati semplificato. GraphQL, con cui SvelteKit funziona bene, semplifica il processo di recupero dei dati da WordPress e permette di fare query più concise ed efficienti.
- Autenticazione semplificata. SvelteKit ha recentemente implementato il supporto a NextAuth.js, che garantisce la sicurezza dei dati ed è facile da installare.
- Rendering lato server (SSR) e generazione di siti statici (SSG). SvelteKit non è solo per siti statici o applicazioni dinamiche. Con questo framework è possibile realizzare facilmente entrambi i tipi di applicazioni, in quanto sono disponibili diverse opzioni di rendering delle pagine e la generazione di siti statici è facile da realizzare.
- Sitemaps. Se vi è mai successo di arrovellarvi cercando di ottenere una sitemap funzionante su un sito headless, non siete i soli. SvelteKit permette di rendere dinamicamente le sitemap con un endpoint.
- Community vivace. Ci sono molti fan di SvelteKit che sviluppano applicazioni con questo software. Se avete bisogno di aiuto o volete chiacchierare del framework, è facile trovarli su internet e sui social media. C’è persino un server Discord con oltre 60.000 membri!
Come creare un sito WordPress headless con SvelteKit
Siete pronti per iniziare? Questa guida affronterà la configurazione di WordPress in un ambiente locale, l’installazione di SvelteKit sul proprio computer e il deploy di un’istanza di WordPress headless su Kinsta una volta terminato.
Andiamo subito al sodo.
Passo 1. Configurare un sito WordPress
Ci sono molti modi per configurare un’istanza locale di WordPress sul proprio computer. Se avete già un account Kinsta, potete creare un sito web con la dashboard MyKinsta o utilizzare l’API Kinsta per crearne uno.
Per questo tutorial utilizzeremo DevKinsta, un kit di sviluppo WordPress locale. Non è necessario avere un hosting Kinsta per utilizzare DevKinsta: è completamente gratuito.
Scaricate DevKinsta dal link qui sopra. Se avete bisogno di aiuto per l’installazione o volete impararne le regole, consultate la documentazione di DevKinsta.
Una volta installato e configurato DevKinsta, basta seguire i passaggi qui sotto per creare un ambiente WordPress locale.
- Create un nuovo sito WordPress o un sito personalizzato se volete modificare le impostazioni come la versione PHP, il multisito e così via.
- Inserite il nome del sito, il nome utente, la password e qualsiasi altra informazione e clicca su Crea sito. Attendete un po’ mentre DevKinsta configura il vostro ambiente WordPress locale.
- Verrà visualizzata la schermata Informazioni sul sito. Prendete nota dell’host del sito perché è l’URL locale a cui accederete per aprire il sito.
- Cliccate su Apri sito e navigate verso http://<sito>.local/wp-admin, oppure cliccate su WP Admin per aprire direttamente la pagina. Effettuate il login con le credenziali che avete inserito in precedenza.
Set 2. Preparare WordPress per la distribuzione headless
Nella nuova schermata iniziale dell’amministrazione, dovrete fare qualche passo in più per preparare l’installazione di WordPress a diventare headless.
SvelteKit si basa su GraphQL per molte delle sue funzioni, quindi dovrete installare WPGraphQL. Questo plugin permette di utilizzare il framework GraphQL per connettersi a tecnologie Javascript headless come NextJS, Gatsby e, ovviamente, SvelteKit.
Per farlo, andate su Plugin > Aggiungi nuovo e installate WPGraphQL. In questo modo aggiungerete un IDE GraphiQL alla barra di amministrazione che potrete utilizzare per scrivere query GraphQL all’interno di WordPress.
Dovrete anche sistemare i permalink. WordPress è dotato di permalink semplici per impostazione predefinita, che non funzionano con l’API JSON su cui si basa REST o con SvelteKit stesso a causa dei vincoli di Next.js.
Andate su Impostazioni > Permalink e disattivate i permalink semplici. Provate i permalink con il nome del post.
Per verificare se ha funzionato, aggiungete “/wp-json” all’URL del vostro sito locale. Dovreste vedere i contenuti del sito come dati JSON.
In seguito, dovrete utilizzare un plugin di reindirizzamento completo del sito, come Redirection o All In One SEO Pro, per indirizzare il vostro URL verso l’applicazione front-end che avete creato. Installate e configurate un plugin di reindirizzamento una volta pronti a reindirizzare gli utenti alla vostra applicazione SvelteKit.
A questo punto siete pronti per installare SvelteKit.
Passo 3. Configura l’ambiente SvelteKit
Prima di tutto, SvelteKit ha alcuni requisiti di sistema di base, tra cui Node 18.13 o superiore. Dato che il framework è così leggero, funzionerà su quasi tutti i sistemi. Assicuratevi di avere installato npm insieme a Node, altrimenti non funzionerà!
Ora potete installare SvelteKit sul vostro sistema. La documentazione fornisce una guida completa, ma ecco le nozioni di base.
Innanzitutto, installiamo Svelte con il pacchetto create-svelte. Potete dare al progetto (“my-svelte-app”) il nome che preferite. Questo comando creerà un’applicazione Svelte con tutte le impostazioni di base già pronte.
npm create svelte my-svelte-appVi verranno presentate diverse richieste; rispondete sì o no per creare il vostro ambiente SvelteKit.
Dovrete installare alcuni pacchetti npm, quindi accedete alla root del progetto con questo comando (sostituite “my-svelte-app” con il nome che avete scelto).
cd my-svelte-app/Quindi eseguite questo comando per installare i pacchetti necessari:
npm installInfine, eseguite il server di sviluppo con questo comando:
npm run devUna volta lanciato il server, potete controllare l’applicazione in corso di sviluppo a questo URL: http://localhost:3000
Ora, invece di utilizzare il renderer di pagina predefinito, potreste passare al renderer statico per generare un sito statico SvelteKit.
A questo punto, SvelteKit dovrebbe essere configurato correttamente e potete iniziare a creare il vostro sito headless.
Passo 4. Usare GraphQL per connettere SvelteKit e WordPress
Mentre testate GraphQL e il vostro ambiente SvelteKit, tenete a mente questi suggerimenti.
- Leggete l’introduzione a Svelte/SvelteKit per comprendere appieno il funzionamento di questo framework. Questo tutorial è interattivo; potete provare voi stessi il codice!
- Se avete difficoltà a configurare manualmente la vostra API GraphQL, potete installare il pacchetto SvelteKit GraphQL.
- Come parte di WPGraphQL, potete anche utilizzare i blocchi Gutenberg tramite wp-graphql-gutenberg, che viene fornito con il plugin standard.
- Sebbene sia possibile utilizzare l’API REST con SvelteKit, le funzionalità estese di GraphQL funzionano meglio con questo framework. Se preferite utilizzare l’API REST, date un’occhiata a questa demo di WordPress headless di SvelteKit su GitHub, che utilizza l’API REST per collegare le due piattaforme.
Dovreste anche informarvi sul caricamento dei dati e sul routing per integrare SvelteKit e WordPress. Ci sono molti modi per connettersi a WordPress e creare un’app headless.
Passo 5. Distribuire WordPress e SvelteKit su Kinsta
Una volta creato un ambiente headless pronto per la distribuzione, dovrete eseguire due passi distinti: distribuire WordPress ed eseguire il push del front-end su un sito statico.
La parte relativa a WordPress è molto semplice. In DevKinsta, nella pagina delle informazioni del sito, dovreste vedere un pulsante Invia a staging. Dovrete effettuare il login con le vostre credenziali Kinsta, ma dopo questo passaggio il gioco è fatto.
E per quel che riguarda la parte relativa all’applicazione SvelteKit, anche questa è piuttosto semplice. Kinsta offre l’Hosting di Siti Statici gratuito, che funziona benissimo con la maggior parte delle applicazioni realizzate con SvelteKit. Ecco come fare.
- Caricate l’applicazione SvelteKit su Bitbucket, GitHub o GitLab.
- Create un account Kinsta e accedete alla dashboard MyKinsta.
- Accedete al vostro account Git e autorizzate Kinsta.
- In MyKinsta, cliccate su Siti statici e poi su Aggiungi sito.
- Selezionate il repository dell’applicazione e aggiungete le impostazioni di build corrette.
- Cliccate su Crea sito.
Se avete creato un’applicazione complessa per la quale un sito statico non è sufficiente, potete scegliere di distribuirla con l’Hosting di Applicazioni di Kinsta.
Ed ecco qua, il vostro sito headless è stato distribuito! È il momento di sfoggiare la vostra nuova applicazione WordPress headless.
Riepilogo
WordPress headless è l’argomento del momento, ma non è sempre facile configurarlo. SvelteKit è stato costruito appositamente per rendere lo sviluppo web più semplice e pulito e il framework è perfetto per una configurazione di WordPress headless.
Ora che sapete come creare un’istanza locale di WordPress, lavorare con SvelteKit e distribuire su Kinsta, siete pronti a portare WordPress headless a un livello superiore.
Sia che stiate creando un sito statico o un’applicazione web dinamica, SvelteKit è l’ideale per questo compito. L’Hosting di Applicazioni o l’Hosting di Siti Statici gratuito di Kinsta sono il posto migliore per ospitarlo, grazie alla loto infrastruttura veloce costruita su Google Cloud e Cloudflare.
Avete già lavorato con SvelteKit? Il framework è all’altezza delle aspettative? Condividete le vostre opinioni nei commenti!
Lascia un commento