Un front end React collegato a un back end Node è una combinazione solida per realizzare qualsiasi applicazione.

Questa guida è stata pensata per aiutarti a creare progetti full-stack con React nel modo più semplice possibile.

Vediamo come impostare da zero un intero progetto con React e Node e come distribuirlo sul web.

Strumenti necessari

1. Assicurati che Node e NPM siano installati sul tuo computer. Puoi scaricarli entrambi da nodejs.org (NPM è incluso nell'installazione di Node)
2. Utilizza un editor di codice di tua scelta. Io sto usando e personalmente consiglio di usare VSCode. È possibile scaricare VSCode all'indirizzo code.visualstudio.com.
3. Assicurati di avere Git installato sul computer. Questo è necessario per distribuire la nostra applicazione con Heroku. È possibile ottenerlo all'indirizzo git-scm.com
4. Un account su heroku.com. Utilizzeremo Heroku per pubblicare la nostra applicazione sul web in modo completamente gratuito.

Nota: dal 28 Novembre 2022 il servizio gratuito di Heroku non sarà più disponibile.

Passo 1: Creare il back end Node (Express)

Per prima cosa, crea una cartella per il progetto chiamata react-node-app (per esempio).

Quindi, trascina la cartella nell'editor di codice.

Per creare il nostro progetto Node, esegui il seguente comando nel terminale:

npm init -y

Questo creerà un file package.json che ci permetterà di tenere traccia di tutti gli script dell'applicazione e di gestire le dipendenze di cui l'applicazione Node ha bisogno.

Il nostro codice server si troverà in una cartella con lo stesso nome: server. Creiamo questa cartella.

Al suo interno, collocheremo un singolo file, dal quale faremo partire il nostro server: index.js.

Utilizzeremo il framework Express per creare un semplice web server, che verrà eseguito sulla porta 3001 se non specificato alcun valore per la variabile d'ambiente PORT (Heroku imposterà questo valore quando distribuiremo la nostra applicazione).

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Successivamente, installeremo Express come dipendenza eseguendo nel nostro terminale:

npm i express

Dopodiché, creeremo uno script in package.json che avvierà il nostro server web quando eseguiremo il comando npm start:

// server/package.json

...
"scripts": {
  "start": "node server/index.js"
},
...

Finalmente possiamo eseguire la nostra applicazione utilizzando questo script eseguendo npm start nel nostro terminale e dovremmo vedere che è in esecuzione sulla porta 3001:

npm start

> node server/index.js

Server listening on 3001

Passo 2: Creare un endpoint API

Vogliamo utilizzare il nostro server Node con Express come un'API, in modo che possa fornire dati alla nostra applicazione React, modificarli o eseguire altre operazioni che solo un server può fare.

Nel nostro caso, invieremo semplicemente un messaggio alla nostra applicazione React che dice "Hello from server!" in un oggetto JSON.

Il codice sottostante crea un endpoint per la rotta /api.

Se la nostra applicazione React effettua una richiesta GET a tale rotta, risponderemo (usando res, che sta per response) con il nostro dato in formato JSON:

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Nota: assicurati di posizionare questa funzione al di sopra della funzione app.listen.

Poiché abbiamo apportato delle modifiche al codice Node, dobbiamo riavviare il nostro server.

Per farlo, devi terminare lo script di avvio nel terminale premendo Command/Ctrl + C. Quindi devi riavviare eseguendo nuovamente npm start.

Per verificarlo, possiamo semplicemente visitare http://localhost:3001/api nel nostro browser e visualizzare il nostro messaggio:

Passo 3: Creare il front end React

Dopo aver creato il back end, passiamo al front end.

Apriamo un'altra scheda di terminale e usiamo create-react-app per creare un nuovo progetto React con il nome client:

npx create-react-app client

Dopo di che, avremo un'applicazione React con tutte le sue dipendenze installate.

L'unica modifica da fare è aggiungere una proprietà chiamata proxy al nostro file package.json.

Questo ci permetterà di fare richieste al nostro server Node senza dover fornire l'origine su cui è in esecuzione (http://localhost:3001) ogni volta che facciamo una richiesta di rete:

// client/package.json

...
"proxy": "http://localhost:3001",
...

Quindi possiamo avviare la nostra applicazione React eseguendo il suo script di avvio, che è lo stesso del nostro server Node. Per prima cosa assicuriamoci di fare un cd nella cartella client appena creata.

Dopodiché, si avvierà su localhost:3000:

cd client
npm start

Compiled successfully!

You can now view client in the browser.

Local:            http://localhost:3000

Passo 4: Effettuare richieste HTTP da React a Node

Ora che abbiamo un'applicazione React funzionante, vogliamo usarla per interagire con la nostra API.

Vediamo come recuperare i dati dall'endpoint /api che abbiamo creato in precedenza.

Per farlo, possiamo andare dal nostro componente App.js nella cartella src e fare una richiesta HTTP usando useEffect.

Faremo una semplice richiesta GET, utilizzando l'API Fetch, al nostro back end e ci verranno restituiti i dati in formato JSON.

Una volta che i dati ci saranno restituiti, otterremo la proprietà message (per avere il saluto che abbiamo inviato dal server) e la metteremo in una variabile di stato chiamata data.

Questo ci consentirà di visualizzare il messaggio nella nostra pagina, se presente. Utilizziamo una condizione nel JSX per dire che se i nostri dati non sono ancora presenti, deve essere mostrato il testo "Loading...".

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

Passo 5: Distribuire la app sul web utilizzando Heroku

Infine, distribuiremo la nostra applicazione sul web.

Per prima cosa, all'interno della nostra cartella client, assicuriamoci di rimuovere il repository Git che viene inizializzato automaticamente da create-react-app.

Questo è essenziale per distribuire la nostra applicazione, perché inizializzeremo un repository Git nella cartella principale del nostro progetto (react-node-app), non nel client:

cd client
rm -rf .git

Al momento del deployment, sia il back end Node che il front end React saranno serviti sullo stesso dominio (cioè mycoolapp.herokuapp.com).

Vediamo come saranno gestite le nostre richieste  dall'API di Node. Il nostro scopo è quello di visualizzare l'applicazione React quando viene richiesta dall'utente (per esempio, quando si va alla home page della nostra applicazione).

Possiamo farlo aggiungendo al file server/index.js il seguente codice:

// server/index.js
const path = require('path');
const express = require('express');

...

// Chiede a Node di servire i file per la nostra applicazione React
app.use(express.static(path.resolve(__dirname, '../client/build')));

// gestisce richieste GET per la rotta /api
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// Tutte le altre richieste di tipo GET non gestite dal metodo precedente, restituiranno l'applicazione REACT
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

Questo codice permetterà a Node di accedere al nostro progetto React di cui si è effettuato precedentemente un build, utilizzando la funzione express.static per i file statici.

Se arriva una richiesta GET che non è gestita dalla rotta /api route, il server risponderà con la nostra applicazione React.

Questo codice consente alle nostre applicazioni React e Node di essere distribuite insieme sullo stesso dominio.

Possiamo comunicare alla nostra applicazione Node come farlo aggiungendo uno script di compilazione build al file package.json del server, che costruisce la nostra applicazione React per la produzione:

// server/package.json

...
"scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
...

Consiglio anche di aggiungere un ulteriore campo chiamato "engines", in cui specificare la versione di Node che stiamo usando per costruire il progetto. Questa sarà usata per la distribuzione.

È possibile ottenere la versione di Node eseguendo node -v e inserire il risultato in "engines". (ad esempio 14.15.4):

// server/package.json

"engines": {
  "node": "la-tua-versione-di-node"
}

Dopo di che, siamo pronti a eseguire il deployment utilizzando Heroku. Assicuriamoci di avere un account su Heroku.com.

Una volta effettuato l'accesso e visualizzata la dashboard, dovremo selezionare New > Create New App e fornire un nome univoco all'applicazione.

Una volta fatto ciò, dovremo installare la Heroku CLI sul nostro computer, in modo da poter distribuire l'applicazione ogni volta che apportiamo modifiche utilizzando Git. È possibile installare la CLI eseguendo:

npm i -g heroku

Una volta installata, dobbiamo accedere a Heroku tramite la CLI utilizzando il comando heroku login:

heroku login

Press any key to login to Heroku

Una volta effettuato l'accesso, è sufficiente seguire le istruzioni di distribuzione per l'applicazione creata nella scheda "Deploy".

Con i quattro comandi seguenti, inizializzeremo un nuovo repository Git per il nostro progetto, vi aggiungeremo dei file, ne faremo il commit e inseriremo una destinazione remota Git per Heroku.

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

L'ultimo passo consiste nel pubblicare la nostra applicazione, effettuando il push del commit sul Git di Heroku appena aggiunto:

git push heroku master

Congratulazioni! La nostra applicazione full-stack React e Node è in funzione! 🎉

Quando desideri apportare modifiche all'applicazione (e distribuirle), è sufficiente utilizzare Git per aggiungere i file, eseguire il commit e quindi eseguire il push sul nostro sito Heroku:

git add .
git commit -m "my commit message"
git push heroku master

Grazie per aver letto questo articolo!

Buona programmazione.

Un sistema operativo (OS) è un software di basso livello che gestisce le risorse, controlla le periferiche e fornisce servizi di base ad altri software. In Linux il processo di avvio si divide in 6 fasi distinte.

1. BIOS

BIOS è l'acronimo di Basic Input/Output System. In altre parole, il BIOS carica ed esegue il boot loader presente nel Master Boot Record (MBR).

Quando si accende il computer per la prima volta, il BIOS esegue innanzitutto alcuni controlli di integrità dell'unità disco o dell'unità SSD.

Successivamente, il BIOS cerca, carica ed esegue il programma di boot loader, che si trova nel Master Boot Record (MBR). L'MBR si trova talvolta su una chiavetta USB o su un CD-ROM, come nel caso di un'installazione live di Linux.

Una volta individuato il programma di boot loader, questo viene caricato in memoria e il BIOS gli affida il controllo del sistema.  

2. MBR

MBR è l'acronimo di Master Boot Record ed è responsabile del caricamento e dell'esecuzione del boot loader GRUB.

L'MBR si trova nel primo settore del disco di avvio, che di solito è /dev/hda o /dev/sda, variabile a seconda dell'hardware. L'MBR contiene anche informazioni su GRUB, o LILO in sistemi molto vecchi.

3. GRUB

GNU GRUB, abbreviazione di GNU GRand Unified Bootloader, è il boot loader più diffuso nella maggior parte dei sistemi Linux moderni.

La schermata iniziale di GRUB è spesso la prima cosa che si vede quando si avvia il computer. Include un semplice menu in cui è possibile selezionare alcune opzioni. Se sono presenti più immagini del kernel, è possibile utilizzare la tastiera per selezionare quella con cui si desidera avviare il sistema. Per impostazione predefinita, viene selezionata l'immagine del kernel più recente.

Il sistema da all'utente alcuni secondi per effettuare una scelta. Se la scelta non viene effettuata, verrà caricata l'immagine del kernel predefinita.

Generalmente la posizione del file di configurazione di GRUB si trova /boot/grub/grub.conf o /etc/grub.conf. Di seguito un esempio di contenuto di un file grub.conf:

#boot=/dev/sda
default=0
timeout=5
splashimage=(hd0,0)/boot/grub/splash.xpm.gz
hiddenmenu
title CentOS (2.6.18-194.el5PAE)
      root (hd0,0)
      kernel /boot/vmlinuz-2.6.18-194.el5PAE ro root=LABEL=/
      initrd /boot/initrd-2.6.18-194.el5PAE.img

4. Kernel

Il kernel è letteralmente il nucleo di un sistema operativo e quindi l'interfaccia tra software e hardware. È il componente centrale di un sistema operativo: permanentemente necessario e costantemente in uso.

In questa fase del processo di avvio, il kernel selezionato da GRUB si collega innanzitutto con il file system di root specificato nel file grub.conf. Quindi esegue il programma /sbin/init, che è sempre il primo programma a essere eseguito. Infatti il suo id di processo (PID) è sempre 1. Il kernel stabilisce quindi il file system di root, che è stato specificato nel file grub.conf.

Il kernel crea quindi un file system root temporaneo utilizzando Initial RAM Disk (initrd) fino a quando non viene montato il file system reale.

5. Init

In questa fase, il sistema esegue una sequenza di azioni in base a livello di esecuzione (Runlevel). I livelli di esecuzione di Linux sono definiti in un file di init, che di solito si trova in /etc/inittab.
I sistemi Linux moderni utilizzano invece systemd per scegliere il livello di esecuzione. Fonte TecMint, questi sono i livelli di esecuzione disponibili:

Run level 0 Questo runlevel avvia la sequenza di arresto del sistema o shutdown (poweroff.target).

Run level 1 Questo runlevel rappresenta la modalità singolo utente, nessun altro utente può collegarsi, il servizio di rete è disabilitato (rescue.target).

Run level 3  In genere è quello predefinito quando si opera in modalità testuale, tutti i servizi sono attivi (multi-user.target).

Run level 5  È il runlevel predefinito quando si vuole avviare Linux in modalità grafica (graphical.target).

Run level 6 Il runlevel 6 è quello di reboot (reboot.target).

Emergency È il runlevel di emergenza (emergency.target).

systemd si occuperà di eseguire programmi e/o servizi in base al loro runlevel.    

6. Runlevel

A seconda della distribuzione Linux installata, è possibile che vengano avviati diversi servizi a seconda del livello di esecuzione (Runlevel). Ad esempio, si potrebbe notare starting sendmail …. OK.

Ognuno dei 6 livelli di esecuzione sopra descritti ha una propria directory e ogni directory contiene un insieme di programmi e/o servizi che devono essere eseguiti, le directory sono:

• Run level 0 – /etc/rc0.d/
• Run level 1 – /etc/rc1.d/
• Run level 2  – /etc/rc2.d/
• Run level 3  – /etc/rc3.d/
• Run level 4 – /etc/rc4.d/
• Run level 5 – /etc/rc5.d/
• Run level 6 – /etc/rc6.d/

Attenzione, la posizione esatta di queste directory varia da distribuzione a distribuzione.

Se si guarda alle diverse directory di livello di esecuzione, si troveranno programmi che iniziano con una "S" o una "K", rispettivamente per startup e kill. I programmi di avvio vengono eseguiti durante l'avvio del sistema, mentre i programmi di disattivazione vengono eseguiti durante lo spegnimento.

Questo è tutto quello che c'è da sapere sul processo di avvio di Linux. Ora provate Linux e rendete Tux orgoglioso.

Il comando git checkout consente di passare da un branch (o ramo) all'altro o di ripristinare i file dell'albero di lavoro. Esistono diverse opzioni per questo comando che non verranno trattate in questo articolo, ma è possibile consultarle tutte nella documentazione di Git.

Effettuare il checkout di uno specifico commit

Per eseguire il checkout di un commit specifico, esegui il comando:

git checkout id-commit-specifico

Possiamo recuperare l'id di uno specifico commit eseguendo:

git log

Effettuare il checkout di un branch esistente

Per eseguire il checkout di un branch esistente, esegui il comando:

git checkout NOME-BRANCH

In genere, Git non consente di eseguire il checkout di un altro branch a meno che la directory di lavoro non sia pulita, perché si perderebbero tutte le modifiche della directory di lavoro di cui non è stato ancora effettuato un commit. Ci sono tre opzioni per gestire tali modifiche: 1) eliminarle, 2) effettuare un commit che le include o 3) spostarle nell'area di stash.

Effettuare il checkout di un nuovo branch

Per creare e contemporaneamente spostarsi nel nuovo branch con un singolo comando, è possibile eseguire:

git checkout -b NOME-NUOVO-BRANCH

In questo modo si passerà automaticamente al nuovo branch, dopo averlo creato.

Effettuare il checkout di un nuovo branch o ripristinare un branch

Il seguente comando è molto simile al comando che permette di creare e contemporaneamente spostarsi in nuovo branch, ma utilizza l'opzione -B (in questo caso la B è maiuscola) e un parametro opzionale START-POINT:

git checkout -B NOME-BRANCH START-POINT

Se il branch NOME-BRANCH non esiste, allora Git lo creerà e lo farà partire dal punto indicato dal parametro START-POINT. Se, invece, il branch NOME-BRANCH esiste, allora Git lo ripristinerà al punto del branch indicato dal parametro START-POINT. L'esecuzione di quest'ultimo comando è equivalente all'esecuzione di git branch con l'opzione -f.

Forzare un Checkout

È possibile passare l'opzione -f o --force  al comando git checkout per forzare Git a cambiare branch, anche in presenza di modifiche della directory di lavoro di cui non è stato ancora effettuato un commit (in altre parole, l'indice dell'albero di lavoro è diverso da HEAD). In pratica, questo comando può essere usato per eliminare le modifiche locali.

Eseguendo il comando seguente, Git ignorerà le modifiche esistenti e si sposterà di branch:

git checkout -f NOME-BRANCH

# Alternativa
git checkout --force NOME-BRANCH

Annullare le modifiche nella directory di lavoro

È possibile usare il comando git checkout per annullare le modifiche apportate a un file nella directory di lavoro. In questo modo il file tornerà alla versione presente nell'HEAD:

git checkout -- NOME-FILE