ASP.NET Core SPA Boilerplate with React and Redux

介紹一下React與Redux在.NET Core的框架

先前有介紹過如何幫ASP.NET Core加入Web Single Page Application的架構

這邊稍微再補充一下React&Redux的開發環境。

Project Setup

這邊我們透過先前的Microsoft.AspNetCore.SpaTemplates建立一個React與Redux的開發環境

dotnet new reactredux

建立完成後一樣restore nuget套件

dotnet restore

如果我們接著直接執行dotnet run 就會看到以下錯誤

原因是因為NodeJS這邊找不到專案的必要套件，所以要先執行一次npm 的套件restore

npm install

接著我們再執行dotnet run 後打開browser連至http://localhost:5000/就可以正常運作了

Project Structure

當我們執行完dotnet restore與npm install之後將專案套件都還原的目錄結構會如下:

整體的結構就是.Net Core WebAPI作為骨幹，加入了TypeScript與React+Redux的開發環境與設定，並將Webpack, Gulp與bootstrap等預設，完成的一個基礎專案。

• ASP.NET Core and C# for cross-platform server-side code
• React, Redux, and TypeScript for client-side code
• Webpack for building and bundling client-side resources
• Bootstrap for layout and styling

所以整個專案目錄除了.NET Core WebAPI架構外，會有另外一個ClientApp來幫我們放關於SPA這邊TypeScript與在Client的設定:

而在WebAPI的部分與先前使用.Net Framework的WebAPI2差異不大，若對.NET Web MVC4/5 或是WebAPI 1/2結構有實務經驗應該可以馬上上手。