react core boilerplate



描述

React Core Berierplate是使用ASP.NET Core 3和服務器端渲染構建通用/同構React Web應用程序的起點。所有人都可以開箱即用。這對新手也有幫助。該項目包含一個假授權系統。因此，您可以將其更改為身份或其他身份。
可以使用Typescript和JavaScript版本。

視覺工作室市場

屏幕截圖

更改

v。 2.0.3（2020-07-03）

• 添加了Docker支持。 ？
• 多虧了Xuhaojun，XSS攻擊預防。
• 更新的依賴項，刪除了未使用的名稱空間。

v。 2.0.0（2020-05-08）

• 遷移到.NET Core 3.1 。 ？
• 使用React-Bootstrap遷移到Bootstrap 4 。
• 遷移到formik。
• Redux商店遷移到Redux工具包，以通過REDUX促進開發。減少代碼。
• 日誌和Serilog配置改進。
• 在server-side rendering中添加了HTTPS支持。
• 在SEO的路線中添加了可編輯狀態代碼。
• 更新了一些依賴項。
• 穩定性修復。
• 刪除了不必要的NPM依賴性。

v。 1.7.1（2019-06-02）

• 更新的React ， Redux ， React-Router和其他連接到它們的NPM軟件包。
• 更新了關鍵的NPM依賴性。
• 刪除了不必要的NPM依賴性。

v。 1.7.0（2019-05-05）

• 存儲庫重組。
• 添加了React Core樣板的JavaScript版本。 ？
• 穩定性修復。
• 更新的關鍵依賴性。

v。 1.6.3（2019-03-19）

• 由於不穩定性，刪除了image-webpack-loader 。

v。 1.6.2（2019-03-15）

• 安裝了穩定的Terser插件。
• 更新的React和其他軟件包（包括類型）。
• 更新的WebPack 。
• 更新了開發模式的WebPack配置。

v。 1.6.0（2019-03-13）

• 更新為v. 2.2 .NET Core依賴關係。
• 更新了關鍵的NPM軟件包。
• 更新的WebPack依賴項。
• 改進的WebPack供應商和捆綁包配置。
• 改進了用於構建和發布方案的.csproj文件。
• 固定源圖生成開發模式。
• 固定捆綁包彙編以生產模式。
• 其他穩定性修復。

v。 1.5.4（2019-02-04）

• 添加了一些次要功能。
• 錯誤修復：Bootstrap導航欄， fixed controller and frontend's service in person update case collapsing of the Bootstrap navigation bar 。
• 更新的依賴項。

v。 1.5.3（2018-12-04）

• 添加了用於支持IE9，IE11： @babel/polyfill ， custom-event-polyfill polyfills。
• 更新的依賴項。

v。 1.5.2（2018-12-01）

• 添加了fullText實時搜索示例。
• 添加了Webpack插件： case-sensitive-paths-webpack-plugin ， react-dev-utils
• 添加了示例插件： awesome-debounce-promise以防止在實時搜索中進行頻繁的查詢， formik以在不淚水中創建反應形式。
• 修復了一些功能和文本錯誤。

v。 1.5.0（1）（2018-11-07）

• 添加了包含託管設置的hosting.json ，將用於生產構建中。
• 添加了bind-decorator軟件包和示例。
• 加速了Webpack捆綁式建築物。
• 更新的域等軟件包。此更新允許您防止兩次（在服務器prerender及其之後 - 在客戶端）呼叫同構fetch請求。
• 更新的redux-thunk軟件包。
• 添加了新的React組件，以防止構建Web應用程序時頭痛： ModalComponent ， Input ， MultiSelect ， Form 。這些組件用於示例中。

v。 1.4.5（2018-11-02）

• 添加的新功能允許Web應用程序與NodeServices共享瀏覽器的cookie。現在，SSR為身份驗證的用戶生成HTML代碼，並提出身份驗證的同構請求。
• 將方法sendFormData添加到ServiceBase.ts ，該ts允許您將文件上傳到服務器。

v。 1.3.5（2018-10-26）

• 更新的NPM軟件包： react ， redux ， react-router 。
• 由於新的連接react-router-redux了折舊connected-react-router 。
• 固定Loader組件在某些情況下遇到麻煩。

v。 1.3.2（2018-10-25）

• 刪除了未使用的NPM軟件包。
• 添加了軟件包 - 鎖。
• 固定項目。

v。 1.3.0（2018-10-22）

• 更新的React軟件包。
• 添加了AppComponent組件，該組件使您可以執行“ catucked”組件的“強制更新”（對於LoginPage中的Loader組件）。
• 添加了serilog記錄器，其中將登錄到文件（ logs/目錄）以及Azure Cloud Provider中。

v。 1.2.1（2018-10-20）

• 在某些情況下，固定了與SSR不正確的Loader組件。

v。 1.2.0（2018-10-18）

• 由於漏洞，更新了“ ASP.NET Core”軟件包的依賴關係。
• 添加的功能使您可以將JSON對像傳遞到URL查詢獲取和刪除方法。

v。 1.1.0（2018-10-16）

• 固定AppRoute組件。通過將參數傳遞給React路由器的組件的問題解決了問題。如果您想手動修復它，請在此處查看提交。

用法

安裝

1. 通過鏈接安裝最新的.NET Core SDK和運行時。
2. 安裝最新的穩定節點。
3. 在第一次運行中，如果項目在Visual Studio或其他IDE中運行，則必須關閉該項目。在控制台中打開Project的文件夾並運行命令npm install 。
4. 在您的項目目錄中執行以下開發命令。它將編譯主和供應商捆綁包。

npm run build:dev

5. 如果您使用的是Visual Studio 20XX，而不是IIS Express選擇YourProjectName或ReactCoreBoilerplate ：單擊IIS Express附近的向下箭頭，然後選擇Docker或其他選項。
6. 構建和運行項目。它將從Windows控制台開始。

修改WebPack供應商配置

如果修改WebPack供應商配置，則必須手動重新編譯供應商捆綁包。在您的項目目錄中執行以下命令以執行此操作：

npm run build:dev

與Docker一起運行

Visual Studio 20xx

只需在工具欄中選擇Docker選項即可。

構建一個容器

在您的項目目錄中執行以下命令：

docker build -t [my image name] . 

[my image name]是您的Docker圖像名稱。

使用HTTPS支持（用於測試）在Windows上運行生產容器

1. 信任Windows和MacOS上的ASP.NET Core HTTPS開發證書：

dotnet dev-certs https -ep %USERPROFILE% . aspnet h ttps a spnetapp.pfx -p [my password]

[my password]是您的密碼。
2。執行：

dotnet dev-certs https --trust

3. 構建您的容器。
4. 執行：

docker run --rm -it -p 7000:7000 -p 7001:7001 -e ASPNETCORE_URLS= " https://+;http://+ " -e ASPNETCORE_Kestrel__Certificates__Default__Password= " [my password] " -e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/aspnetapp.pfx -v %USERPROFILE% . aspnet h ttps:/https/ [my image name]

在哪裡[my password] - 您的證書密碼（從第一步）， [my image name] - 您的Docker映像名稱。

元素

第三方圖書館：

• Typescript-基於打字稿的所有前端。
• fork-ts-checker-webpack-plugin- Webpack插件，該插件在單獨的過程上運行打字稿類型Checker。
• REACT-主要庫，可作為同構。
• React路由器 - 反應的路由器。
• React -bootstrap -Bootstrap 4用於React。
• 反應螺旋 - 同構SEO助手。
• redux-商店。
• REDUX工具包 - 用於使用Redux增強開發的庫。
• formik-用於構建形式的庫。
• 連接的反應路由器 - 反應路由器的REDUX結合。
• SASS -CSS預處理器。
• Webpack 4 -Bundler。
• Axios-同構提取util。
• ts-nameof-允許您使用表單中輸入的類型安全名稱。
• JSON-to-url-允許您將JSON對像傳遞到url查詢獲取和刪除方法。
• Serilog-允許您登錄文件（ logs/目錄）以及Azure Cloud Provider。

自己的庫 /固定叉：

• 域等 - 與異步/等待支持和新功能的域任務更換。
• NVAL-類似jQuery-validation的香草JS驗證器。
• NVAL -TIPPY-帶有很棒工具提示的香草JS驗證。
• nserializejson-基於香草JS的JSON Serializer的靈活形式。

問題

已知問題

• ./clientapp/styles/loaders/xxx.scss（./node_modules/css-loader/dist/cjs.js！[...]）
  在您的項目目錄中執行npm i和npm rebuild node-sass 。

• WebPack熱模塊替換[HMR]不適用於IIS
  將被固定。改用Kestrel進行開發。

• HTTP錯誤500
  您可能沒有最新版本的node.js。

• HTTP錯誤502.5
  您必須使用此鏈接安裝最新的“ ASP.NET Core SDK”和“ Runtime and Hosting Bundle”：https：//www.microsoft.com/net/down/download/dotnet-core/2.1

• HTTP錯誤500在Azure託管時
  在Azure中的“應用程序設置”中將“ weblity_node_default_version”設置為6.11.2。

• 發布後在開發模式下運行時出錯
  執行npm run build:dev命令。

其他問題

• 如果您對項目啟動有任何問題，則可以在日誌中看到錯誤（“/logs”目錄）。請在Github上打開問題之前執行此操作。不要忘記提及React Core樣板的版本（ JavaScript或TypeScript ）

執照

麻省理工學院