How can I faster test changes in Layout using Blazor?
I used to code websites in good old Apache+PHP+MySQL. and now I am starting with some development in Blazor.
But I find it difficult to work on the user interface. When I need to test a small change, for instance moving a entry in a web form from one row to another...
Blazor WASM development process:
Edit the code
Shutdown the browser
Recompile (Pray that it compiles...)
Wait for the webapp+API-App+Identity App to startup
Navigate to the page I am making layout on.
PHP+X Process
Edit the code
Press F5
I wish for a similar experience.
How can I decrease the development code/test UI time when using Blazor?
The simplest way to do interactive development is using dotnet watch run from a command prompt (I add a .cmd script to my projects to run this for the project). This will run the project and watch for changes to files, then re-compile the project.
On .NET 3.x Blazor you'll have to refresh the browser (F5). On .NET 5 projects it does this automatically.
You may also want to read Rémi Bourgarel's Blog article on this, although I am not sure all his points are still valid if you're using .NET 5.
Related
Our development team has used aspnet_compiler as part of our build process for years to verify our website build. I have noticed that when the process encounters a precompile error, it immediately shuts down. Sometimes, if you fix the issue and restart, it will fail again with another unrelated error that actually existed the first time. I am just wondering if there is a way for it to not "die" and continue the precompile and then list ALL errors that it finds so we don't have to do the iterative process of fixing the errors one at a time.
I have looked at this documentation: https://learn.microsoft.com/en-us/visualstudio/msbuild/aspnetcompiler-task?view=vs-2019 but nothing there seems like it supplies what I am looking for.
do you mean that VS shutdowns, or the external command line build process shuts down? One real problem area is the .net folder called app_code. While you can do a build->compile?
You note that code in that folder does NOT get compiled when you do this. It is only compiled by the build process. Even during debugging, you note that compile errors are not seen (or caught) unless you run (try) the site. As a result? I don't use that folder anymore. The 2nd huge problem is royslen editor code. I have started using that ability's for strings to span multiple lines in - really nice for in-line sql.
However, I find then if you let the web site build, it does NOT support + see and allow such Rosylen formatted code. (so upon run of the site, I get errors). (this might well be due to the web site running IIS 2016 - too old for that new code formatting support (at least in vb.net it is).
So, all I did was create my OWN folder for code and NOT use the .net one ().
Note that you create the folder, but remember for EACH code module, or class you drop into that folder? You have to individual set each to be compiled. (it is the default), but be careful if you import code via add. So you see (and want) to use this option:
So, I of course don't want the source included - and I don't require that since this is a web applicaiton vs a web site.
Thus, I don't get/see/have any runtime compile of my code by the web site compiler process - it all done during the build and even debug process in VS.
And then their is the build for a web site publish. Thus during a deploy build (and publish), I don't get any surprises either.
In other words, the GREAT advantange of a web site applcation is you don't let the web site comile code for you.
You do have to mark the code module as per above.
As a result, this folder behaves like any web form with code behind. The standard debug and build process during development will thus compile all my code - and catach errors.
If you use the built in (and special) folder app_code, then such code only compiles WHEN you run the site, and worse it is the web site that does this compile - NOT VS.
(but of course you publish build process ALSO does this compile!!!).
I need (want) a regular build + compile during the development process to catch and compile all that code (else debugging, and worse compiling means you only can find out issues at web site run time - and that's way too late for my tastes).
So, I don't bother with app_code anymore at all. Now I am lucky, since I am creating (using) a web site application, as opposed to a asp.net web site. (and yes, there is a massive difference).
Asp.net web site = each page and code behind will compile on demand. This choice is perferred for two big reasons:
First, you can update one web page (and code)- deploy that one web page + code. The web server will figure this out - and re-compile that one page on demand. This makes updates and maintains of the site OH SO VERY much easier.
And it also means in most cases that the whole site can be published to a sub-site folder on the hosted web server. And in fact most really cheap low cost web site hosting MUST use this option (web site applications in most cases can't be published to those lower cost .net hosting sites). (thus use web sites, not web site applications).
However, if you lucky, and you have FULL use of IIS and a server dedicated to JUST running your web site? Well, then you are MUCH MUCH better off to go with a aps.net web site application. And this also means you can say setup custom logon providers, and also configure things like re-direction or things like a custom web handier. In effect, this choice means that you as a developer not only have full use of the base starting page, but can directly change/configure the web server to your liking. This includes the base web config.
This choice is often not avaible on lower cost hosting plans. it requires that you have full IIS services, and IIS services is running your whole site, and the base starting page is your site. (you can publish to root on web hosting, but you still using THEIR EXISTING copy of IIS services, and you can't control things like creating a custom authneticaion (logon) provider. And you also can't create re-directs (custom one).
However, in both cases/choices app_code folder behaves like a compile on demand folder. Thus bugs and issues in that folder will thus not be found until you run the web site, or do a full deploy that then does the full site build. and as noted, you can't use Rosylen eiditor souce code features, since the web compiler might be a few verisons old. You be running the SAME .net version, but the older compiler does not support source code formatting with the new Rosylen editor features.
Since a web site application will compile everything (whole site) in your application down to a single .dll (and of course referenced libraries), then then you don't have on-demand occurring by the web site compiler (after you deploy). Of course the publish wizard does have options to combine all those .dll's into one - not a big deal either way.
So, the one exception is app_code. So I just stopped using it, and I see little reason to use that special .net folder anyway.
So, it was never clear if VS is shutting down, or your build process is seeing errors not being caught during the regular development cycle with VS - if this is your issue, then the above approach should solve the problem for you.
I tried to automatically reload ASP.NET Core project as I do using Angular with Node or NPM.
When I change the code of the .NET Core project and save, I want the web page to be automatically refreshed in the web browser.
run this command in project console
dotnet watch run
same works for visual studio code
From Develop ASP.NET Core apps using a file watcher (for 3.0)
dotnet watch is a tool that runs a .NET Core CLI command when source
files change. For example, a file change can trigger compilation, test
execution, or deployment.
The link above contains a tutorial with two sample projects:
WebApp (an ASP.NET Core web API) and
WebAppTests (unit tests for the web API).
Alternatively, you can also this nuget package for runtime compilation.
I think that dotnet watch should work. See the documentation from the link as there are various options.
Add Microsoft.DotNet.Watcher.Tools to the tools section of the
project.json file
Run dotnet restore
Execute with dotnet watch run
You can use dotnet watch. Viz. Docs
I have created custom lunch profile to make it easyer to run in VS.
"Watch": {
"executablePath": "dotnet.exe",
"workingDirectory": "$(ProjectDir)",
"commandLineArgs": "watch run",
"launchBrowser": false,
"launchUrl": "http://localhost:5000/",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
According to this requirement, we need to run .net core application just like Angular application, loading the pages and contents automatically without built and manual refresh.
I had done some research and experienced that auto-reloading is not possible in ASP.NET core project. However, we have got the success, in our solution we are using dotnet watch which monitors source files and if a file changes, shuts down the application that it started, rebuilds and publishes the project, and then restarts the application then we just need to refresh page manually in the browser to get the changes which made in application, we don’t require to build or start the project.
Steps to follow to use asp.net watch:
1) Create.Net core application.
2) Open a command Window in your Web project's folder
3) Type dotnet watch run
4) Open your browser and navigate to an API or Page
5) Make a change to source code
6) Save the file
7) Go back to the browser and refresh manually
8) You should see the change reflected
Use dotnet watch to recompile the source code. Use Browser Link with "Browser reload on save" from Visual Studio to reload all your browsers. https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BrowserReloadonSave
One of the tasks automatically created in VS Code environment for a ASP.NET Core project (web, mvc, etc.) is called "watch". To check this, from ".vscode" folder, open the file tasks.json and you will see 3 tasks configuration: "build", "publish" and "watch". By default, "build" is used in launch.json. You can then go in the "configurations" section of launch.json and look for "preLaunchTask", and there, you can change the task to "watch". And that's it. Hot reload will be active when you run your web application.
Regards.
You should think triple before going forward to this option. (1) It is a resource-consuming. As it necessitates auto-build, as pre-operation, of the modified project and sometimes the whole solution. (Imagine a medium to a huge Asp.net solution composed from many projects, get built for each modification performed !! how much time is left for programming ???!!) (2), as you know, the page reload consumes much time for the first launch after a successful build !!... Hence, the time you want to gain from this option you will be wasted multiple, especially CLR-based programming languages (e.g. .NET Core). And finally, (3) your project is expected to be in need to develop test samples that can be injected automatically in the view for a better automation process, imagine how difficult it is!
Instead, try to unit test your solution, and then, any next modification is expected to be superficial and low occurring.
If you disagree with my proposition, I suggest developing a visual-studio extension that better reload the target web page on-build rather than an on-save-changes event. Next, Ctrl + b will do the job!
Where to start?
I have developed a VSIX that watches folders to load automatically specific generated files outside the VS UI. check the source code you will have an idea about the project's files management. it revolves in the EnvDTE API, please have a look in this piece of code.
Also, check the source project from here
Follow the procedure indicated in the Microsoft's page.
Nuget package Microsoft. VisualStudio. Web. BrowserLink
Install NuGet Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation
app.UseBrowserLink(); in the startup.cs page on the configure method.
and enter image description here
now when you change something on your code Ctrl + Maj + enter and everything is saved and actualized on your browser.
I am working on building a User Control Asp.net - VB.Net.
When we do any change to User Control Code we have to build the project to see the code change.
Since the project is huge take a long time to build - can you suggest any shorter or better way or tips that can reduce the project build on user control code change
Right now when I change any VB code , I need to build project and then go to page to see the code change.
I was able to reduce the build time by doing a command line build. using msbuild - it was faster.
Additionally, I tweaked command to just build the web project only
msbuild EBR.Web.vbproj
Hope it helps someone else as well.
Looking for a similar functionality like browsersync give for Node applications to auto reload browser with any file change.
Running Asp.Net Core (aka Asp.net 5) with dnx-watch and it restarts the Kestrel web server with any C# code change, but still have to refresh browser manually to see the changes whether its client or server file changes. Using Gulp for build pipeline and thinking of using it to do both dnx-watch and reload browser, but cannot find any example online.
Love to have some help on this.
Thanks
There's no official support for your scenario, sorry!
However, it's interesting and I would like to have it at least on the backlog. Can you please open a request at https://github.com/aspnet/dotnet-watch ?
1) It is possible to just use gulp and browsersync. It works good and fast, but is a bit tricky because you have to start IIS-Express first and use browsersync in proxymode.
2) A much better solution is the Visual Studio Extension Browser Reload on Save made by Mads Kristensen, a member of the Asp.Net team.
I have a solution with a fair few projects, 3 of them web-based (WCF in IIS / MVC site). When the solution builds, it dumps each of the components of this distributed system in a 'Build' folder. Running the 'configurator' part of the whole output will set up the system in the cloud automatically. It's very neat :) However, the Web Deploy Projects are a major pain. They "build" (i.e. deploy) every, single, time I build - even when no changes have been made to their respective projects.
Changed a single line of code? Look forward to waiting around a minute for the 3 web projects to redeploy.
[These projects are VERY straightforward at the moment - two have a single .svc and one .ashx file - the other is an MVC app with ~5 views]
I realise I can change solution configurations to not 'build' them, but I've been doing that and it's very easy to log on the next day and forget about it, and spend a couple of hours tracking down bugs in distributed systems due to something simply having not been built.
Why I use Web Deploy Projects? Well, because I need all pages + binaries from the web project. The build output for the project itself is the 'bin' folder, so no pages. The entire project folder? It has .cs, .csproj and other files I don't want included.
This will be building on build servers eventually, but it's local at the moment. But I want a quick way of getting the actual output files from the web project to my target folder. Any ideas?
Not sure if this will help in your situation, (plug for own project coming up), but I am working on a project to help ease IIS deployments:
https://github.com/twistedtwig/AutomatedDeployments
The idea being you can use config files for IIS (app Pool, applications and websites) to automate the creation and update of sites locally (dev machines) or remotely (test and production machines).
It is still a work in progress but is ready to be used in production systems.
using the package creation as a post build step might get you closer to what you want, (don't believe it includes all the extra files), but that would still build it each time, (although if code hasn't changed it should not rebuild unless you choose rebuild all projects).
In the end I created a utility/tool which, given a project file, XCOPYies the project folder for the web project to a target location, then looks in said project file and deletes anything that doesn't have Build Action set to Content. Very quick and effective.
I know it is still in RC but VS2012 does have a neat feature when doing publish that it detects the changes and publishes only those. Might be something a little deeper down in the build where it does an automatic publish too.
You can take a look to the Octopus project: http://octopusdeploy.com/
Deployment based on nuget packages.