Usare React con ASP.NET Core

  • Articolo

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Visual Studio offre modelli di progetto per la creazione di app a pagina singola basate su framework JavaScript come Angular, React e Vue con back-end ASP.NET Core. Questi modelli:

  • Creare una soluzione di Visual Studio con un progetto front-end e un progetto back-end.
  • Usare il tipo di progetto di Visual Studio per JavaScript e TypeScript (con estensione esproj) per il front-end.
  • Usare un progetto ASP.NET Core per il back-end.

I progetti creati usando i modelli di Visual Studio possono essere eseguiti dalla riga di comando in Windows, Linux e macOS. Per eseguire l'app, usare dotnet run --launch-profile https per eseguire il progetto server. L'esecuzione del progetto server avvia automaticamente il server di sviluppo JavaScript front-end. Il https profilo di avvio è attualmente necessario.

Esercitazione su Visual Studio

Per iniziare, seguire l'esercitazione Creare un'app ASP.NET Core con React nella documentazione di Visual Studio.

Per altre informazioni, vedere JavaScript e TypeScript in Visual Studio

modelli di ASP.NET Core SPA

Visual Studio include modelli per la creazione di app ASP.NET Core con un front-end JavaScript o TypeScript. Questi modelli sono disponibili in Visual Studio 2022 versione 17.8 o successiva con il carico di lavoro ASP.NET e sviluppo Web installato.

I modelli di Visual Studio per la compilazione di app ASP.NET Core con un front-end JavaScript o TypeScript offrono i vantaggi seguenti:

  • Pulire la separazione del progetto per il front-end e il back-end.
  • Rimanere aggiornati sulle versioni più recenti del framework front-end.
  • Eseguire l'integrazione con gli strumenti da riga di comando del framework front-end più recenti, ad esempio Vite.
  • Modelli per JavaScript e TypeScript (solo TypeScript per Angular).
  • Esperienza avanzata di modifica del codice JavaScript e TypeScript.
  • Integrare gli strumenti di compilazione JavaScript con la build .NET.
  • Interfaccia utente di gestione delle dipendenze npm.
  • Compatibile con il debug e l'avvio di Visual Studio Code.
  • Eseguire unit test front-end in Esplora test usando framework di test JavaScript.

Modelli legacy ASP.NET Core SPA

Le versioni precedenti di .NET SDK includevano i modelli legacy per la compilazione di app a pagina singola con ASP.NET Core. Per la documentazione su questi modelli meno recenti, vedere la versione ASP.NET Core 7.0 della panoramica dell'applicazione a pagina singola e gli articoli su Angular e React.

Il modello di progetto ASP.NET Core con React offre un punto di partenza pratico per ASP.NET app Core che usano React e Create React App (CRA) per implementare un'interfaccia utente lato client avanzata.

Il modello di progetto equivale alla creazione di un progetto ASP.NET Core per fungere da API Web e da un progetto React CRA da usare come interfaccia utente. Questa combinazione di progetti offre la comodità di ospitare entrambi i progetti in un singolo progetto ASP.NET Core che può essere compilato e pubblicato come singola unità.

Il modello di progetto non è destinato al rendering lato server (SSR). Per SSR con React e Node.js, prendere in considerazione Next.js o Razzle.

Creare una nuova app

Creare un nuovo progetto da un prompt dei comandi usando il comando dotnet new react in una directory vuota. Ad esempio, i comandi seguenti creano l'app in una my-new-app directory e passano a tale directory:

dotnet new react -o my-new-app
cd my-new-app

Eseguire l'app da Visual Studio o dall'interfaccia della riga di comando di .NET Core:

Aprire il file generato ed eseguire l'app come di consueto .csproj .

Alla prima esecuzione, il processo di compilazione ripristina le dipendenze di npm. Tale operazione può richiedere alcuni minuti. Le compilazioni successive sono molto più veloci.

Il modello di progetto crea un'app ASP.NET Core e un'app React. L'app ASP.NET Core è destinata all'uso per l'accesso ai dati, l'autorizzazione e altri elementi sul lato server. L'app React, che risiede nella ClientApp sottodirectory, deve essere usata per tutti i problemi dell'interfaccia utente.

Aggiungere pagine, immagini, stili, moduli e così via.

La ClientApp directory è un'app React CRA standard. Per altre informazioni, vedere la documentazione ufficiale di CRA.

Vi sono piccole differenze tra l'app React creata tramite questo modello e quella creata tramite CRA stesso. Le funzionalità dell'app restano comunque invariate. L'app creata tramite il modello contiene un layout basato su bootstrap e un esempio di routing di base.

Installa nuovi pacchetti npm

Per installare pacchetti npm di terze parti, usare un prompt dei comandi nella ClientApp sottodirectory. Ad esempio:

cd ClientApp
npm install <package_name>

Pubblicare e distribuire

In fase di sviluppo, l'app viene eseguita in una modalità ottimizzata per gli sviluppatori. Ad esempio, i bundle JavaScript includono il mapping di origine, in modo da poter visualizzare il codice sorgente originale durante il debug. L'app controlla le modifiche dei file JavaScript, HTML e CSS su disco, quindi esegue automaticamente la ricompilazione e il ricaricamento quando rileva modifiche dei file.

Nell'ambiente di produzione usare una versione dell'app ottimizzata per le prestazioni. Questo comportamento è configurato per l'esecuzione automatica. Quando si esegue la pubblicazione, la configurazione della build genera una compilazione minimizzata con transpile del codice sul lato client. A differenza della build di sviluppo, la build di produzione non richiede l'installazione di Node.js nel server.

È possibile usare i metodi standard di hosting e distribuzione di ASP.NET Core.

Eseguire il server CRA in modo indipendente

Il progetto è configurato in modo da avviare la propria istanza del server di sviluppo CRA in background all'avvio dell'app ASP.NET Core in modalità di sviluppo. Ciò risulta utile in quanto evita di dover eseguire manualmente un server distinto.

Questa configurazione predefinita presenta tuttavia uno svantaggio. Ogni volta che si modifica il codice C# ed è necessario riavviare l'app ASP.NET Core, il server CRA viene riavviato. Per avviare il backup sono necessari alcuni secondi. Se si apportano frequentemente modifiche al codice C# e non si vuole attendere il riavvio del server CRA, eseguire il server CRA esternamente, in modo indipendente dal processo ASP.NET Core.

Per eseguire il server CRA esternamente, passare alla ClientApp sottodirectory in un prompt dei comandi e avviare il server di sviluppo CRA:

cd ClientApp
npm start

All'avvio dell'app ASP.NET Core, questa non avvierà un server CRA. Verrà invece usata l'istanza che è stata avviata manualmente. Ciò consente di velocizzare l'avvio e il riavvio. Non è più necessario attendere che l'app React venga ricompilata ogni volta.

Configurare il middleware proxy per SignalR

Per altre informazioni, vedere http-proxy-middleware.

Risorse aggiuntive

Il modello di progetto aggiornato per React fornisce un ottimo punto di partenza per le app ASP.NET Core che usano le convenzioni React e create-react-app (CRA) per implementare un'interfaccia utente avanzata sul lato client.

Il modello è equivalente alla creazione di un progetto ASP.NET Core che opera come un back-end API e un progetto React CRA standard che opera come un'interfaccia utente, ma con la praticità di ospitare entrambi in un singolo progetto di app, che può essere creato e pubblicato come una singola unità.

Il modello di progetto React non è progettato per il rendering lato server (SSR). Per SSR con React e Node.js, prendere in considerazione Next.js o Razzle.

Creare una nuova app

Creare un nuovo progetto da un prompt dei comandi usando il comando dotnet new react in una directory vuota. Ad esempio, i comandi seguenti creano l'app in una my-new-app directory e passano a tale directory:

dotnet new react -o my-new-app
cd my-new-app

Eseguire l'app da Visual Studio o dall'interfaccia della riga di comando di .NET Core:

Aprire il file generato ed eseguire l'app come di consueto .csproj .

Alla prima esecuzione, il processo di compilazione ripristina le dipendenze di npm. Tale operazione può richiedere alcuni minuti. Le compilazioni successive sono molto più veloci.

Il modello di progetto crea un'app ASP.NET Core e un'app React. L'app ASP.NET Core è destinata all'uso per l'accesso ai dati, l'autorizzazione e altri elementi sul lato server. L'app React, che risiede nella ClientApp sottodirectory, deve essere usata per tutti i problemi dell'interfaccia utente.

Aggiungere pagine, immagini, stili, moduli e così via.

La ClientApp directory è un'app React CRA standard. Per altre informazioni, vedere la documentazione ufficiale di CRA.

Vi sono piccole differenze tra l'app React creata tramite questo modello e quella creata tramite CRA stesso. Le funzionalità dell'app restano comunque invariate. L'app creata tramite il modello contiene un layout basato su bootstrap e un esempio di routing di base.

Installa nuovi pacchetti npm

Per installare pacchetti npm di terze parti, usare un prompt dei comandi nella ClientApp sottodirectory. Ad esempio:

cd ClientApp
npm install --save <package_name>

Pubblicare e distribuire

In fase di sviluppo, l'app viene eseguita in una modalità ottimizzata per gli sviluppatori. Ad esempio, i bundle JavaScript includono il mapping di origine, in modo da poter visualizzare il codice sorgente originale durante il debug. L'app controlla le modifiche dei file JavaScript, HTML e CSS su disco, quindi esegue automaticamente la ricompilazione e il ricaricamento quando rileva modifiche dei file.

Nell'ambiente di produzione usare una versione dell'app ottimizzata per le prestazioni. Questo comportamento è configurato per l'esecuzione automatica. Quando si esegue la pubblicazione, la configurazione della build genera una compilazione minimizzata con transpile del codice sul lato client. A differenza della build di sviluppo, la build di produzione non richiede l'installazione di Node.js nel server.

È possibile usare i metodi standard di hosting e distribuzione di ASP.NET Core.

Eseguire il server CRA in modo indipendente

Il progetto è configurato in modo da avviare la propria istanza del server di sviluppo CRA in background all'avvio dell'app ASP.NET Core in modalità di sviluppo. Ciò risulta utile in quanto evita di dover eseguire manualmente un server distinto.

Questa configurazione predefinita presenta tuttavia uno svantaggio. Ogni volta che si modifica il codice C# ed è necessario riavviare l'app ASP.NET Core, il server CRA viene riavviato. Per avviare il backup sono necessari alcuni secondi. Se si apportano frequentemente modifiche al codice C# e non si vuole attendere il riavvio del server CRA, eseguire il server CRA esternamente, in modo indipendente dal processo ASP.NET Core. A questo scopo:

  1. Aggiungere un .env file alla ClientApp sottodirectory con l'impostazione seguente:

    BROWSER=none

    Ciò impedirà l'apertura del Web browser all'avvio esterno del server CRA.

  2. In un prompt dei comandi passare alla ClientApp sottodirectory e avviare il server di sviluppo CRA:

    cd ClientApp
npm start

  3. Modificare l'app ASP.NET Core in modo da usare l'istanza del server CRA esterno anziché avviarne una autonomamente. Nella classe Startup sostituire la chiamata spa.UseReactDevelopmentServer con quanto segue:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

All'avvio dell'app ASP.NET Core, questa non avvierà un server CRA. Verrà invece usata l'istanza che è stata avviata manualmente. Ciò consente di velocizzare l'avvio e il riavvio. Non è più necessario attendere che l'app React venga ricompilata ogni volta.

Importante

"Rendering lato server" non è una funzionalità supportata di questo modello. L'obiettivo di questo modello è soddisfare la parità con "create-react-app". Di conseguenza, gli scenari e le funzionalità non inclusi in un progetto "create-react-app" (ad esempio SSR) non sono supportati e vengono lasciati come esercizio per l'utente.

Configurare il middleware proxy per SignalR

Per altre informazioni, vedere http-proxy-middleware.

Risorse aggiuntive