Creazione ed esecuzione di un progetto React in ambiente locale su macOS con ServBay

Cos'è React?

React è una libreria JavaScript open-source mantenuta da Meta (precedentemente Facebook) e dalla sua community, progettata specificamente per la creazione di interfacce utente (UI). Adotta un approccio basato su componenti per progettare UI interattive, consentendo agli sviluppatori di realizzare con efficienza single page application (SPA) complesse e facilmente manutenibili o la view layer di grandi web app. I principali punti di forza di React sono il paradigma dichiarativo, la gestione efficiente del Virtual DOM e un ecosistema community molto attivo.

Caratteristiche principali e vantaggi di React

• Sviluppo a componenti: Ogni UI complessa viene scomposta in componenti indipendenti e riutilizzabili, migliorando la manutenzione e il riuso del codice.
• View dichiarativa: Si descrive semplicemente lo stato della UI e React si occupa di aggiornare il DOM in modo da rifletterlo, semplificando la logica di sviluppo.
• Virtual DOM: Gestisce una rappresentazione virtuale del DOM in memoria, riducendo al minimo le operazioni sul DOM reale attraverso l’ottimizzazione dei cambiamenti, con notevoli vantaggi prestazionali.
• Flusso dati unidirezionale: I dati scorrono dall’alto verso il basso, favorendo la tracciabilità e la comprensione dello stato dell’applicazione.
• JSX: Estensione della sintassi JavaScript che permette di scrivere strutture simili a HTML all’interno del codice JS, migliorando la leggibilità del codice.
• Ecosistema ricco: Supportato da una vasta community e numerose librerie di terze parti (come React Router, Redux/Zustand/MobX, Material UI, ecc.), coprendo routing, gestione stato, UI components e tanto altro.

Grazie a React, realizzare applicazioni web moderne e ad alte prestazioni diventa più rapido ed efficace.

Configurazione dell’ambiente di sviluppo e produzione React con ServBay

ServBay è un ambiente potente per lo sviluppo web locale, progettato per utenti macOS e fornito di numerosi pacchetti software, incluso Node.js. In questa guida scoprirai come utilizzare Node.js e la funzionalità Siti Web (Websites) di ServBay per creare, configurare ed eseguire un progetto React, sia in modalità di sviluppo tramite proxy inverso, sia in modalità di produzione tramite servizio di file statici.

Prerequisiti

Prima di iniziare, assicurati di aver completato quanto segue:

1. Installazione di ServBay: ServBay è correttamente installato e attivo sul tuo macOS.
2. Installazione del pacchetto Node.js: Hai installato Node.js tramite l'interfaccia di ServBay o tramite linea di comando. Puoi seguire la guida Documentazione sull’installazione di Node.js con ServBay per tutti i dettagli. ServBay gestirà automaticamente la versione di Node.js e le variabili d’ambiente.

Creazione di un progetto React

Utilizzeremo il moderno tool di build Vite per generare rapidamente un progetto React. Vite offre avvii ultra-rapidi e aggiornamenti di moduli istantanei (HMR), garantendo un'esperienza di sviluppo eccellente, ed è diventato uno degli strumenti più popolari per nuovi progetti React (in alternativa a create-react-app).

1. Apri il terminale e naviga nella cartella root dei siti

   Avvia il terminale. La cartella root raccomandata da ServBay per i progetti web è /Applications/ServBay/www. Vai in questa directory:

   cd /Applications/ServBay/www

2. Crea un nuovo progetto React con Vite

   Esegui il comando qui sotto per creare un nuovo progetto chiamato servbay-react-demo utilizzando lo starter create-vite e selezionando il template React:

   npx create-vite servbay-react-demo --template react

   • npx è l’esecutore di pacchetti npm: consente di avviare tool dalla registry npm senza doverli installare globalmente. Garantisce l’utilizzo sempre dell’ultima versione di create-vite.
   • create-vite è il tool ufficiale scaffolding di Vite.
   • servbay-react-demo sarà la cartella del nuovo progetto.
   • --template react indica di inizializzare la struttura considerando il template React.

   Segui le istruzioni a schermo per completare la creazione del progetto.

3. Entra nella cartella e installa le dipendenze

   Passa alla directory del progetto creato e installa i pacchetti necessari con npm:

   cd servbay-react-demo
   npm install

   • In alternativa puoi usare yarn install o pnpm install se preferisci Yarn o pnpm come package manager.

Modificare il contenuto del progetto React (opzionale)

Per assicurarci che tutto sia configurato correttamente, modifichiamo la homepage:

1. Apri il file src/App.jsx o src/App.tsx

   Usa il tuo editor di codice preferito per aprire il file src/App.jsx (per template JavaScript) o src/App.tsx (per template TypeScript).

2. Modifica il contenuto

   Cerca la sezione di codice che renderizza il contenuto principale e sostituiscila per mostrare “Hello ServBay!”:

   // ... altri import ...
   import './App.css';
   
   function App() {
     // ... altre righe di codice ...
     return (
       <>
         {/* ... altri elementi ... */}
         <h1>Hello ServBay!</h1>
         {/* ... altri elementi ... */}
       </>
     );
   }
   
   export default App;

   Salva il file.

Avviare la modalità sviluppo

Durante lo sviluppo, normalmente si utilizza un server di sviluppo locale che fornisce aggiornamenti in tempo reale (HMR). ServBay può sfruttare un proxy inverso per instradare le richieste esterne direttamente a questo server.

1. Avvia il server di sviluppo dal terminale

   Dalla cartella root del progetto servbay-react-demo, esegui il comando per lanciare il server Vite su una porta dedicata (ad esempio: 8585):

   npm run dev -- --port 8585

   • npm run dev esegue lo script dev in package.json – normalmente il comando che avvia il server Vite.
   • -- --port 8585 passa la porta desiderata al comando Vite.

   Una volta avviato, il terminale mostrerà l’indirizzo locale di accesso, ad esempio http://localhost:8585. Lascia questa finestra sempre aperta durante lo sviluppo.

2. Configura il proxy inverso in ServBay

   Apri l’interfaccia di ServBay. Vai nell’area Siti Web (Websites) e aggiungi una nuova configurazione cliccando sul pulsante aggiungi:

   • Nome: ServBay React Dev (scegli un nome descrittivo)
   • Dominio: servbay-react-dev.servbay.demo (usa un dominio demo legato al brand ServBay)
   • Tipo di sito: seleziona Reverse Proxy (Proxy Inverso)
   • IP Proxy: 127.0.0.1 (il server gira in locale)
   • Porta Proxy: 8585 (la stessa utilizzata per il server di sviluppo)

   Salva la configurazione. ServBay applicherà automaticamente le modifiche e configurerà il web server interno (Caddy o Nginx) per inoltrare le richieste indirizzate a servbay-react-dev.servbay.demo verso http://127.0.0.1:8585.

   Per istruzioni dettagliate su come aggiungere un sito in ServBay, consulta la Guida Gestione Siti Web di ServBay.

3. Accedi al sito di sviluppo

   Apri il browser e visita il dominio configurato: https://servbay-react-dev.servbay.demo.

   • Grazie alle potenti funzionalità di ServBay, il sito di sviluppo locale avrà automaticamente un certificato SSL (firmato da ServBay User CA o ServBay Public CA), permettendo l’accesso sicuro tramite HTTPS. Per maggiori dettagli sulle funzionalità SSL di ServBay, consulta la guida Proteggere i tuoi siti con SSL.
   • Da questo momento, tutte le modifiche salvate nei file del progetto saranno riflesse all’istante nella pagina del browser, grazie all’aggiornamento automatico (HMR).

Build di produzione

Quando il tuo progetto React è pronto per il deploy, occorre generare la build ottimizzata per la produzione.

1. Crea la build di produzione dal terminale

   Dalla directory root del progetto servbay-react-demo, lancia il comando di build:

   npm run build

   Questo comando esegue lo script build in package.json. Per i progetti React basati su Vite, il codice sorgente verrà compilato e ottimizzato in file statici (HTML, CSS, JS, asset vari), generalmente raccolti nella cartella dist nella root del progetto. Al termine, il terminale mostrerà l’esito positivo della build.

2. Configura il servizio statico in ServBay

   La cartella dist generata dal processo di build contiene tutti i file statici pronti per l’hosting web. In ServBay puoi configurare un sito statico che punti direttamente a questa directory.

   Apri l’interfaccia di ServBay, vai su Siti Web (Websites) e aggiungi una nuova configurazione:

   • Nome: ServBay React Prod (un nome descrittivo)
   • Dominio: servbay-react.servbay.demo (differente rispetto al dominio di sviluppo)
   • Tipo di sito: seleziona Statico
   • Root Directory del sito: /Applications/ServBay/www/servbay-react-demo/dist (la cartella generata dalla build di produzione)

   Salva la configurazione. ServBay configurerà il web server integrato per servire direttamente i file statici della directory dist.

3. Accedi al sito di produzione

   Apri il browser e visita il dominio di produzione appena configurato: https://servbay-react.servbay.demo.

   Ora visualizzerai il sito ottimizzato e impacchettato per l’ambiente di produzione. Anche in questo caso, il supporto SSL verrà applicato automaticamente da ServBay.

Conclusioni

Seguendo questi passaggi hai creato con successo un progetto React in ambiente locale su macOS utilizzando ServBay, configurando sia la modalità sviluppo (tramite proxy inverso), sia la modalità produzione (tramite servizio file statici). ServBay semplifica la creazione e gestione dell’ambiente locale, grazie al supporto nativo Node.js, alle configurazioni flessibili dei siti (proxy, statico) e al certificato SSL automatico, offrendo un grande vantaggio a tutti gli sviluppatori React. Da qui puoi continuare a sviluppare, testare e distribuire le tue applicazioni React in tutta semplicità.