Ciao bambino! Come dici?? Ti piace La Silicon Valley? I Cofee Shop? Vuoi essere un programmatore e lavorare con il macbook che è costato 3 stipendi di tuo padre ma non sai come come fare dato che conosci solo HTML e Javascript?
Nessun problema bambino! Diventa un soydev! Scaricati Visual Studio Code e Node.js e preparati a Sviluppare i migliori siti web di tutta internet! Come? non sai come utilizzare questi strumenti? Nessun problema, eccoti una guida per poter creare un sito web con Node.jS e EJS oppure, se sei pigro e non hai voglia di leggere un articolo in inglese, eccoti qua sotto una versione tradotta. Preparati a diventare il nuovo Bill Gates.
Premessa
Per utilizzare questa guida, sarà necessario installare Node.js. Ecco come fare!1!
Cliccando su questo link sarai renderizzato al sito ufficiali di Node.Js dove, cliccando sul pulsante con la versione LTS, scaricherai l’eseguibile per installarlo.
Dopo aver cliccato sull’eseguibile scaricato e aver completato l’installazione di Node.JS, ti appariranno questi programmi:
Quello che è stato installato è Node.JS e, insiseme, è stato installato Node.Js command prompt, quello che ci servirà in questo tutorial.
Aprilo e appena ti appare il prompt, digita node-v e, il numero che ti apparirà, rappresenta la versione che hai appena installato di Node.JS.
Come creare un sito web con Node.JS e EJS
Quando si crea un sito web non bisogna ogni volta mettersi lì e ricreare ogni volta la ruota per arrivare sempre allo stesso risultato, per questo sono stati creati i template, per permetterci di risparmiare tempo e completare il nostro sito web il più velocemente possibile.
Quando si creano applicazioni Node, una via veloce è usare appunto dei template nel momento necessario. In questo caso, gli Embedded JavaScript templates (EJS) possono essere dei template più che validi. Cominciamo!
Innanzitutto, apri la finestra del terminale e crea una nuova directory di progetto:
mkdir ejs-demo
Quindi, entriamo dentro la cartella appena creata e inizializziamo un nuovo progetto npm:
npm init -y
Successivamente, dovrai installare Il pacchetto express:
npm install express@4.17.1
Quindi installare il pacchetto ejs:
npm install ejs@3.1.6
A questo punto, sei pronto ad usare Express e EJS.
Fase 1 — Configurazione con server.js
Cominciamo creando un file server.js, dove mettere all’interno queste righe di codice:
var express = require('express');
var app = express();
// set the view engine to ejs
app.set('view engine', 'ejs');
// use res.render to load up an ejs view file
// index page
app.get('/', function(req, res) {
res.render('pages/index');
});
// about page
app.get('/about', function(req, res) {
res.render('pages/about');
});
app.listen(8080);
console.log('Server is listening on port 8080');
Questo codice definisce l’applicazione ed è raggiungibile sulla porta 8080
Per impostare anche EJS come motore di visualizzazione per l’applicazione Express utilizziamo app.set('view engine', 'ejs');
Nota come il codice invia una visualizzazione all’utente utilizzando res.render()- Si’. È importante notare che res.render()Si guarderà in un viewsLa cartella per la vista. Quindi devi solo definire pages/indexDal momento che il percorso completo è views/pages/index
Fase 2 - Creazione dei partials EJS
Come molte delle applicazioni che costruisci, ci sarà un sacco di codice che viene riutilizzato. Questi sono considerati partials. Creiamo quelli che serviranno a noi.
Cominciamo col creare una cartella views e la sua subdirectory partials:
mkdir views
mkdir views/partials
All’interno di partials, creiamo un file head.ejs dove aggiungiamo:
<meta charset="UTF-8">
<title>EJS Is Fun</title>
<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
</style>
Questo codice contiene i metadati per headPer un documento HTML. Include anche gli stili Bootstrap.
Ora, creiamo il file header.ejs, che contiene la navigazione per un documento HTML e utilizza diverse classi di Bootstrap per lo styling:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">EJS Is Fun</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</nav>
Infine, creiamo il file footer.ejs, che contiene informazioni sul copyright e utilizza diverse classi di Bootstrap per lo styling.
<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
Passaggio 3 - Aggiunta dei Partials EJS al View
Ora è arrivato il momento di includere, tramite il comando include, le tre partials che abbiamo creato prima. Per incorporare un partials EJS in un altro file uso
<%-include(=='RELATIVE/PATH/TO/FILE'==) %> .
Quindi, creiamo una subdirectory pages:
mkdir views/pages
In questa directory, creare una nuovo file index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>
<footer>
<%- include('../partials/footer'); %>
</footer>
</body>
</html>
Salviamo le modifiche e vediamo come stiamo andando. Fai partire l’applicazione tramite node server.js e visita il link http://localhost:8080/
Ora, invece, creiamo il file about.ejs, aggiunge una barra laterale di Bootstrap, giusto per differenziarlo dall’altro:
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="row">
<div class="col-sm-8">
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Look I'm A Sidebar!</h3>
</div>
</div>
</div>
</main>
<footer>
<%- include('../partials/footer'); %>
</footer>
</body>
</html>
E, dopo aver fatto ripartire l’applicazione, visitiamo http://localhost:8080/about
Ora puoi iniziare a utilizzare EJS per passare i dati dall’applicazione Node alle views.
Passo 4 - Passare dati
Definiamo alcune variabili di base e un elenco da passare alla pagina index.
modifichiamo un attimo server.js aggiungendo altro codice. All’interno di app.get('/') definiamo un array chiamato mascots e una stringa chiamata tagline:
var express = require('express');
var app = express();
// set the view engine to ejs
app.set('view engine', 'ejs');
// use res.render to load up an ejs view file
// index page
app.get('/', function(req, res) {
var mascots = [
{ name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
{ name: 'Tux', organization: "Linux", birth_year: 1996},
{ name: 'Moby Dock', organization: "Docker", birth_year: 2013}
];
var tagline = "No programming concept is complete without a cute animal mascot.";
res.render('pages/index', {
mascots: mascots,
tagline: tagline
});
});
// about page
app.get('/about', function(req, res) {
res.render('pages/about');
});
app.listen(8080);
console.log('Server is listening on port 8080');
Rendering una singola variabile in EJS
Per trasferire una singola variabile, è possibile utilizzare <%= tagline %>.
All’interno di index.ejs, aggiungiamo queste due righe dentro al <main>, in modo da visualizzare il valore taglinenell’index:
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
<h2>Variable</h2>
<p><%= tagline %></p>
</div>
</main>
<footer>
<%- include('../partials/footer'); %>
</footer>
</body>
</html>
Loop dei dati
Per loop sui dati, è possibile utilizzare .forEach:
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
<h2>Variable</h2>
<p><%= tagline %></p>
<ul>
<% mascots.forEach(function(mascot) { %>
<li>
<strong><%= mascot.name %></strong>
representing <%= mascot.organization %>,
born <%= mascot.birth_year %>
</li>
<% }); %>
</ul>
</div>
</main>
<footer>
<%- include('../partials/footer'); %>
</footer>
</body>
</html>
Vediamo come sta uscendo:
Trasferire i dati ad un partials
È possibile definire e passare variabili a un partials EJS usando una sintassi come questa:
(views/pages/about.ejs)
...
<header>
<%- include('../partials/header', {variant: 'compact'}); %>
</header>
...
Ma devi ancora fare attenzione ad presumere che sia stata definita una variabile.
Se si desidera fare riferimento a una variabile in una parziale che potrebbe non essere sempre definita, e darle un valore predefinito, è possibile farlo in questo modo:
views/partials/header.ejs
...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...
Nella riga precedente, il codice EJS sta rendendo il valore di variantSe è definito, altrimenti lo lascia default.
Come dici? Tutto questo lo trovi macchinoso? Razionale?
Ma stai tranquillo piccolo bimbo nutella, ho la soluzione perfetta per te. Negli ultimi anni diverse persone hanno sviluppato diversi framework che usano Node.js durante lo sviluppo e la build, concedendoti il tempo di imparare cose nuove e più divertenti, come un linguaggio di programmazione basato sul Javascript!!
Ma ora non perdiamo altro tempo e conosciamo il nostro nuovo amico: Astro.js!!
ed ecco a te in regalo, dato che rientri tra i nostri primi 2 clienti arrivati tramite sponsorizzazione, una piccola guida stilata in data in data odierna 6 ottobre 2022, sul come preparare il setup per realizzare il tuo sito web con lui.
Parte 1: Crea il progetto
Bene, ora che Node è installato, possiamo partire con il set up di Astro.
Come prima cosa, tenendo aprto il prompt, creiamo la cartella dove verrà creato il nostro sito web. Per comodità, ti consiglio di possizionare questa cartella nella direcotry Documents (in particolare creiamo una cartella dentro Documents dove tenere tutti i nostri lavori) quindi, tramite prompt di Node, andiamo a crearla.
Come prima cosa digita il comdando cd Documenti/ (o Documents se hai l’OS in inglese), poi tramite il comando mkdir developer creiamo una cartella chiamata developer, entriamoci dentro tramite il comando cd developer/.
P.S.
mi raccomando nei nomi delle directory, dette anche cartelle, e dei file non dovrebbero andare gli spazi, al posto di quelli usa o un - o un _). Ora, se andari dentro Documenti, troverai tutte le cartelle che hai creato:
Ora, come ultimissima cosa prima di cominciare seriamente, ti faccio scaricare un Package Manager che può tornarti utile durante il lavoro, Yarn. Quindi, sempre dal tuo prompt di Node, digita npm i -g corepack e aspetta che venga installato.
Ora possiamo veramente cominciare
Parte 2: Installa Astro
Ora che abbiamo la base su cui cominciare, è ora di far entrare in scena il protagonista di questa guida, Astro. Come si può vedere dal sito ufficiale di Astro per installare Astro avremo bisogno di nuovo del prompt di Node. A questo punto digita npm create astro@latest.
A questo punto sarai dentro il “processo di installazione di Astro” (facciamo che chiamarlo così). La prima cosa che ti uscirà è mettere il nome del sito
Welcome to Astro! (create-astro v1.1.0)
Lets walk through setting up your new Astro project.
? Where would you like to create your new project? >> nomeDelSito
Dopo il nome, ti verrà chiesto che template vorresti usare (se vuoi creare qualcosa da zero basterà cliccare su Empty Project). Per questo esempio useremo un template Portfolio, quindi va su e giù con le frecciete e premi invio per scegliere. Dopo aver copiato il Template nel progetto, Astro ti chiederà se vuoi utilizzare i pacchetti di npm; Non mi metterò qua a spiegarti cosa sono, a te basta digitare Y. La stessa cosa la fai per Git. Infine ti chiederà che vuoi settare TypeScript, io ti consiglio Strict.
Bene, a questo punto hai installato Astro dentro il tuo sito, veloce no come procedimento 😀
Se sei ancora incerto che abbia installato qualcosa, vai dentro la cartella developer e guarda se ti ha creato una cartella con il nome che hai inserito; Altrimenti digita cd nomeDelSito e digita yarn start, ti è uscito una cosa del genere?
yarn run v1.22.19
$ astro dev
astro v1.4.2 started in 49ms
┃ Local http://127.0.0.1:3000/
┃ Network use --host to expose
Se non ti è uscito… controlla cosa ti è uscito, perché di solito ti dice cosa c’è che non va (poi al massimo copia su Google l’errore che ti esce). Se ti è uscito, bene! Ora apri il tuo browser e digita http://127.0.0.1:3000/ e Tac, ecco il tuo sito con il template di default.
BUON DIVERTIMENTO!
Ora…. cerca un aiuto online o chiedi alle IA.
Fatto il sito? È il momento di andare online!
Stai realizzando il tuo sito web, l’hai praticamente completato e non vedi l’ora di pubblicarlo ma, purtroppo, non hai i soldi per prenderti per prendere un servizio di hosting dove caricarlo?
Tranquillo, so cosa vuol dire e so che quando sei in questo stato ti metti a cercare qualsiasi sito disponibile e rischi di capitare sui peggio servizi. Ma tranquillo, è ora di risolvere questo problema, e come aiutante avrai me, il classico mr. nessuno di provincia che, dopo una serie di fregature una dietro l’altro, a trovato 2 metodi affidabili che ti aiutano a diminuire i costi per un hosting ed avere lo stesso il tuo sito online e pronto per essere visitato.
Ora, con Astro puoi fare in diversi modi ma tutti partono da un punto. Fai npm run build, poi:
- Carica su Github il tuo sito -> vai su Vercel -> crea un profilo -> crea un sito ->collega il repository -> gioco fatto ora fa tutto lui
- Carica su Github il tuo sito -> vai su Netlify -> crea un profilo -> crea un sito ->collega il repository -> gioco fatto ora fa tutto lui
- Vai su qualsiasi hosting che ti da un pò di spazio -> ci butti sopra i file che trovi nella cartella creata dal comando in precedenza
Se invece, proprio in questo momento, hai avuto un’illuminazione sulla via di Damasco e hai deciso di sviluppare il tuo sito in HTML, CSS e JavaScript, oppure in PHP, comincia a spiegarmi com’è possibile: fino a due righe fa parlavamo di TypeScript e framework JavaScript, tu non hai mai programmato e, nel tempo di uno scroll del mouse, hai già realizzato un sito in PHP. Poi proseguiamo.
Partiamo da una piccola premessa.. Cosa intendo con gratuitamente?
Di norma, per avere online un sito web, bisogna avere due importanti strumenti: un hosting ed un dominio (che ovviamente è un servizio solo a pagamento).
Pubblicare un sito statico
Partiamo dai siti che a livello tecnico sono i più facili, ovvero i siti statici, semplici siti fatti in HTML,CSS e JavaScript.
Per i siti statici il consiglio che posso dare è affidarti a servizi come GitHub ci permette di ovviare al costo di un hosting per il nostro sito dandoci la possibilità di mettere online gratuitamente il nostro sito (rigorosamente statico) direttamente dal nostro repository.
Se si hanno dei repository pubblici su Github, che al loro interno contengono dei siti web, si ha la possibilità di creare delle GitHub Pages, un servizio che consente di pubblicare un sito Web o un’applicazione Web in modo gratuito.
Questi siti in particolare hanno l’url composto da nomeUtente.github.io ed il nome del repository in cui c’è il codice di norma viene aggiunto dopo.
In poche parole un hosting su Github.
Ora, è possibile tra le altre cose aggiungere degli url personalizzati e, per farlo, basta andare nella seziona Pages del repository, andare fino alla parte del Custom Domain e aggiungere l’url che si vuole collegare (es. ilmiosito.it)
P.S.
Poi bisogna attivare anche l’Enforce HTTPS per avere HTTPS abilitato
Subito dopo, andando sul sito che dove hai comprato il tuo dominio, bisogna modificare il DNS creando questi record:
A
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
AAA
2606:50c0:8000::153
2606:50c0:8001::153
2606:50c0:8002::153
2606:50c0:8003::153
È ora il tuo sito è online!
Pubblicare un sito dinamico
Volendo fare i professori si può copiare una qualsiasi parte di testo che trovi online dove si dice “i siti dinamici hanno pagine web il cui contenuto viene generato in tempo reale e che ciò è reso possibile grazie all’utilizzo di un linguaggio di scripting come ad esempio il PHP, e a MySQL, un database per la memorizzazione di dati” però deduco che se sei in sto pezzo del post da benissimo cosa è e da cosa è formato un sito dinamico.
Se sai com’è fatto un sito dinamico, sai benissimo che (nella maggior parte dei casi) per funzionare ha bisogno di un database, altrimenti si perde proprio l’essenza di un sito dinamico.
Quindi abbiamo bisogno di un servizio che ci dia la possibilità di avere una database su cui appoggiarci.
Piccola premessa prima di continuare
Il sito che ti sto per descrivere ora te lo sto dicendo per un semplice motivo, perché è un servizio che ho provato personalmente su dei miei progetti, quindi posso darti la conferma sul suo funzionamento, ma non posso dirti niente riguardo il tema privacy e trattamento dei dati.
Se sei una persona interessata a questi temi, ti consiglio di prendere con le pinze quello che sto per scrivere, perché può essere che non ti troverai d’accordo.
Il sito che più mi sento di consigliarti è Altervista (sì il famoso altervista.org che ti capita di vedere se nella tua vita girovagavi per fansub). Per quanto lo si può deridere, bisogna dire che è un servizio molto utile che ti offre non solo la possibilità di caricare direttamente il tuo sito (sì che anche l’opzione Hosting con file manager, non solo l’hosting con sopra Wordpress) e ti offre un posto in cui appoggiare il tuo database MYSQL. Per creare un sito con altervista basta seguire questi semplici passaggi:
- Andare su questa pagina
- Cliccare sul “Crea sito” presente nella zona “Hosting con file manager”
- Scrivi il nome che vuoi dare al tuo sito e poi clicca su prosegui
- Crea un account
- tempo un paio di giorni, ti arriverà una mail con il link per creare il sito
Appena creato, verrai reindirizzato nella bacheca principale dove, per caricare i file che formano il tuo sito, ti basterà andare su Gestione File (sotto il titolo Applicazioni) mentre, per aggiungere il database, basta andare sotto nella sezione Risorse e cliccare su “accedi a phpmyadmin” dove, se sei già abituato ad usare XAMPP, ti troverai subito a casa.
Fatto questo, potrai dire che il tuo sito è finalmente online ma, se vuoi avere un dominio personalizzato, dovrai comprare il dominio prima, ovvero durante la creazione dell’account.
Non me ne frega niente del dominio personalizzato, come posso fare?
Se non te ne frega niente di avere un dominio personalizzato ma vuoi mettere online lo stesso il tuo sito tranquillo, so cosa consigliarti (togliendo i siti dinamici, che ti ho spiegato nel capitolo prima).
Se vuoi pubblicare un sito statico ti servirà primo su tutti un profilo o su GitHub o su GitLab, dove poter creare un repository dove mettere il tuo sito, poi ti do la scelta tra 2 piattaforme di hosting per applicazioni web e siti statici: Netlify e Vercel. tutti e due si basano sui seguenti passagi:
- cliccare su “create website/new project”
- cliccare deploy su github o gitlab
- selezionare il repository dove c’è il sito
- cliccare su deploy-site
Ed il gioco è fatto, il nostro sito web è online!