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

Creare ed eseguire un progetto React con ServBay ​

Cos’è React? ​

React è una libreria JavaScript open source, sviluppata e mantenuta da Meta (precedentemente Facebook) e dalla sua community, pensata per la creazione di interfacce utente (UI). Utilizza un approccio componenziale che consente agli sviluppatori di costruire in modo efficiente UI interattive e modulari, ideali per Single Page Applications (SPA) o per la gestione della parte visiva di grandi applicazioni web. I vantaggi principali di React includono la programmazione dichiarativa, un sistema efficace di aggiornamento tramite virtual DOM e una solida ecosistema di strumenti e librerie.

Principali caratteristiche e vantaggi di React ​

  • Sviluppo componenziale: suddivide interfacce complesse in componenti indipendenti e riutilizzabili, rendendo il codice più facile da mantenere e riusare.
  • Vista dichiarativa: descrivi semplicemente lo stato della UI, e React si occupa di aggiornare il DOM, semplificando la logica sviluppatore.
  • Virtual DOM: gestisce una rappresentazione virtuale del DOM in memoria, riducendo le operazioni su quello reale e migliorando la performance.
  • Flusso dati unidirezionale: i dati scorrono dall’alto verso il basso, facilitando il controllo e il tracciamento degli stati nell’applicazione.
  • JSX: estensione della sintassi JavaScript che consente di scrivere strutture simili all’HTML direttamente nel codice JS e migliora la leggibilità.
  • Ecosistema potente: grazie a una grande community, offre tantissime librerie di terze parti (come React Router, Redux/Zustand/MobX, Material UI) che coprono needs come gestione stati, routing e componenti UI.

Con React, gli sviluppatori realizzano web app moderne ad alte prestazioni in modo più veloce ed efficiente.

Configurare ambiente di sviluppo e produzione React con ServBay ​

ServBay è una soluzione potente per lo sviluppo web locale, disponibile per utenti macOS e Windows e include tra i vari pacchetti anche Node.js. In questa guida trovi tutti i passaggi per creare, configurare ed eseguire un progetto React utilizzando le funzionalità Node.js e Websites offerte da ServBay, compresa la configurazione di reverse proxy per lo sviluppo e servizio statico per la produzione.

Prerequisiti ​

Prima di iniziare, assicurati di aver soddisfatto queste condizioni:

  1. Installazione di ServBay: ServBay deve essere già installato e in esecuzione sul tuo computer.
  2. Installazione del pacchetto Node.js: Devi aver installato Node.js tramite l’interfaccia o la CLI di ServBay. Puoi seguire la documentazione di ServBay per l’installazione di Node.js per i dettagli. ServBay gestirà versione e variabili d’ambiente per te.

Creare un nuovo progetto React ​

Useremo Vite, moderno strumento per la creazione di progetti frontend, per generare rapidamente un progetto React. Vite offre avvio rapido e aggiornamenti hot module (HMR), migliorando nettamente l’esperienza di sviluppo, ed è ormai la scelta principale per nuovi progetti React (in sostituzione del tradizionale create-react-app).

  1. Apri il terminale e vai nella directory radice dei siti web

    Avvia la tua app terminale. La cartella raccomandata da ServBay come root per i tuoi progetti è:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Crea un nuovo progetto React con Vite

    Esegui il comando seguente per inizializzare un nuovo progetto chiamato servbay-react-demo utilizzando il template react:

    bash
    npx create-vite servbay-react-demo --template react
    • npx è uno strumento che ti permette di eseguire pacchetti npm direttamente, sempre aggiornati, senza installarli globalmente.
    • create-vite è il tool ufficiale per scaffolding di Vite.
    • servbay-react-demo sarà la cartella del tuo progetto.
    • --template react indica di utilizzare il template React per inizializzare la struttura del progetto.

    Segui le istruzioni a schermo per completare la creazione.

  3. Accedi alla cartella del progetto e installa le dipendenze

    Entra nella directory del progetto appena creato e installa tutte le dipendenze tramite npm:

    bash
    cd servbay-react-demo
npm install
    • In alternativa puoi usare yarn install o pnpm install se preferisci un altro package manager.

Modifica opzionale dei contenuti del progetto React ​

Per verificare che tutto sia impostato correttamente, puoi modificare velocemente la pagina principale del progetto.

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

    Usa un editor di codice a tua scelta per aprire il file src/App.jsx (se hai scelto JavaScript) o src/App.tsx (se hai scelto TypeScript) nel tuo progetto.

  2. Modifica i contenuti

    Individua la porzione di codice che gestisce il rendering del contenuto principale e modificala per mostrare "Hello ServBay!":

    javascript
    // ... altri import ...
import './App.css';

function App() {
  // ... altro codice ...
  return (
    <>
      {/* ... altri elementi ... */}
      <h1>Hello ServBay!</h1>
      {/* ... altri elementi ... */}
    </>
  );
}

export default App;

    Salva il file.

Esecuzione in modalità sviluppo ​

Durante lo sviluppo, normalmente si avvia un server locale che offre funzionalità come HMR e facilita il testing. ServBay permette facilmente di gestire un reverse proxy verso tale server.

  1. Avvia il server di sviluppo da terminale

    Dalla directory del progetto servbay-react-demo, esegui:

    bash
    npm run dev -- --port 8585
    • npm run dev avvia lo script dev definito nel file package.json, normalmente il server di sviluppo Vite.
    • -- --port 8585 assegna la porta (8585) al server.

    Una volta avviato, il terminale mostrerà l’indirizzo locale (esempio: http://localhost:8585). Mantieni aperto il terminale e il server attivo.

  2. Configura il reverse proxy tramite ServBay

    Apri la procedura guidata di ServBay e accedi alla sezione Websites. Clicca su aggiungi per creare una nuova configurazione:

    • Nome: ServBay React Dev (nome descrittivo)
    • Dominio: servbay-react-dev.servbay.demo (dominio demo legato a ServBay)
    • Tipo sito: scegli Reverse Proxy
    • Proxy IP: 127.0.0.1 (il server gira in locale)
    • Proxy Port: 8585 (uguale a quella impostata sul server di sviluppo)

    Salva la configurazione. ServBay aggiornerà il web server interno (Caddy o Nginx) per fare il proxy delle richieste inviate a servbay-react-dev.servbay.demo verso http://127.0.0.1:8585.

    Puoi trovare ulteriori dettagli su come aggiungere siti web in ServBay nella documentazione websites ServBay.

  3. Accedi al sito in sviluppo

    Nel tuo browser, visita il dominio configurato: https://servbay-react-dev.servbay.demo.

    • Grazie alle funzionalità di ServBay, il dominio di sviluppo disporrà automaticamente di un certificato SSL (emesso da ServBay User CA o ServBay Public CA), quindi potrai accedervi tramite HTTPS in modo sicuro. Puoi consultare proteggere il sito con SSL in ServBay per dettagli sull’uso di SSL.
    • Da ora in poi, ogni modifica e salvataggio dei file nel codice aggiornerà automaticamente la pagina nel browser grazie all'Hot Module Replacement (HMR).

Creazione dell’ambiente di produzione ​

Completato lo sviluppo, è il momento di preparare una build ottimizzata per la produzione.

  1. Build produzione da terminale

    Nella directory del progetto servbay-react-demo, esegui:

    bash
    npm run build

    Questo comando esegue lo script build presente nel package.json. Con Vite, il codice sorgente sarà processato, compresso e generato sotto forma di file statici (HTML, CSS, JS, risorse), solitamente nella cartella dist nel root del progetto. Il messaggio di completamento verrà mostrato nel terminale.

  2. Configura il servizio statico in ServBay

    La cartella dist contiene il sito da esporre direttamente tramite il server web. In ServBay puoi configurare un sito statico puntando a tale directory.

    Avvia ServBay, vai nella sezione Websites e crea una nuova configurazione:

    • Nome: ServBay React Prod (nome descrittivo)
    • Dominio: servbay-react.servbay.demo (dominio demo ServBay, distinto da quello usato per lo sviluppo)
    • Tipo sito: scegli Static
    • Root Directory sito: punta alla cartella dist creata dopo il build:
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Salva la configurazione e ServBay aggiornerà automaticamente il web server per servire i file statici presenti in dist.

  3. Accedi al sito in produzione

    Dal browser, visita il dominio configurato: https://servbay-react.servbay.demo.

    Vedrai ora il sito in versione produzione ottimizzata, anch'esso protetto tramite SSL automatico da ServBay.

Conclusioni ​

Seguendo questi passaggi hai creato con successo un progetto React locale utilizzando ServBay, con configurazione sia per lo sviluppo tramite reverse proxy che per la produzione come sito statico. ServBay rende semplice la gestione dell’ambiente di sviluppo locale, supportando sia macOS che Windows, e grazie al supporto nativo a Node.js, la flessibilità di configurazione e il supporto SSL automatico offre un workflow ottimale agli sviluppatori React. Puoi continuare a sviluppare, testare e pubblicare le tue applicazioni React partendo da questa base.