Tag Archives: dotnet core

ASP.Net Core Enable Development Error

由於不太了解 ASP.Net Core with Angular / React Webpack 的關係
當遇到有 Angular / React的問題是都不知道那裡出錯
* 我的Angular / ReactJs Project是用 dotnet core 的 SPA template 建立的

過了幾天才發現..
由於是使用

dotnet run

dotnet watch run

的關係
所以執行的 port 和visual studio執行時debug 的port不一樣..
可能是這樣所以被定義為不是 development mode
所以網頁的error 便被隱藏了

解決方法有兩個

解決方法 1
我們可以在Startup.cs
Enable Developer Error 便可以了
E.G.
在以下的function 上

  public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
      

移除這個If statement
當程式遇到錯誤時執行這個Developer Error

/*
if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
                    HotModuleReplacement = true
                });
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }
*/

 app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
                    HotModuleReplacement = true
                });

 startup.cs
解決方法 2

這個方法比理性
就是更改 開發電腦的 Environment Variable Settings
我們可以使用Command prompt
執行以下指令設定環境變數 Environment Variable

set ASPNETCORE_ENVIRONMENT=Development

Set up ASPNETCORE Environment Variable
詳情可以參考以下網頁
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/environments

Hope you find it useful

ASP.net Core SPA Single Page Application Template Generator with angular, aurelia, knockout, react

最近開始學 Angular 4 / React
但是不知道怎樣開始
如果只是React / Angular 的 CLI 來產生他們的 Project Template 的話 自己便要再起一個Node JS 的backend 來serve data 了

安裝方法:
我們可以在Command prompt 執行以下指令

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

之後便可以執行以下指令 去看看有什麼 Template 可以使用

dotnet new

dotnet new
建立一個新資料夾之後進入這資料夾執行
以下指令到 建立你的 angular SPA site with Dotnet core backend

dotnet new angular

完成後可以執行以下指令到run 這個project

dotnet restore 
npm install
dotnet run

hope you find it useful

dotnet watch does not refresh content for AspNetCore.SpaTemplates React / Angular

最近使用了 ASP.Net CoreSPA Template 來學習 ReactJs
因為我可以使用 ASP.Net Core 來做 Web API.. 而 ReactJs 來做 Web Front End
之後便可以deploy到 Azure 十分方便.. 又可以很快看到效果
ASP.Net Core App can NOW be deploy to Azure – (Azure web app)

由于使用Visual Studio 開發感覺比效慢
所以便用了Visual Studio Code

不久便出現了一個問題..就是在Visual Studio 開發時
修改 ReactJs 相關的程式碼..在Debug
是可以看到修改後的結果的
但是用Visual Studio Code 配合 “dotnet watch run” 時
Enable dotnet watch – on asp.net core

dotnet watch run

dotnet watch run
網頁便不會更新… 但是deployAzure 時是看到了修改的結果的

做了一會research之後 終於找到了解決方法

解決方法
我們需要使用另一個Terminal windows 執行 “webpack –watch” 這個指令 便可以了

webpack --watch

webpack --watch
Hope you find it useful

Enable dotnet watch – on asp.net core

最近開始學習 .Net CoreASP.Net Core
發現現在.net 越來越方便了
之前開發 asp.net 的 web application 時每當要更改程式碼 時
都有需要停止 debug之後更重新開始debug..
感覺開發.net application 需要的時間比較長
不像使用 node.js一樣..可以使用 gulpgrunt 來檢查程式碼有沒有更新
如果有的話便會re-compile 等等
之後只要refresh browser便會自看到程式碼所做的更新

現在.net core 也有這個功能叫 “dotnet watch
我們只需要在”.csproj” 上的 “<ItemGroup>” tag 內加上以下的 setting
e.g.

  &lt;ItemGroup&gt;
    &lt;DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" /&gt;
    &lt;DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="1.0.0" /&gt;
    &lt;DotNetCliToolReference Include="Microsoft.Extensions.Caching.SqlConfig.Tools" Version="1.0.0" /&gt;
  &lt;/ItemGroup&gt;

之後在這個project 的資料夾的 執行

dotnet restore

之後便可以 在 CLI上執行

dotnet watch run

hope you find it useful