ServBay

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

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:

    bash
    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:

    bash
    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:

    bash
    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!”:

    javascript
    // ... 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):

    bash
    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:

    bash
    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à.