DEV Community

Cover image for Simple Weather App With Google Maps Using Blazor Server, HttpClient and Radzen Components

Simple Weather App With Google Maps Using Blazor Server, HttpClient and Radzen Components

Zoltan Halasz on June 07, 2020

My favorite teacher for C# on Youtube is Tim Corey, and his latest material concerns HttpClient, using a Weather Forecast Api. See his material, an...
Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

Hi, what do you think about blazor in general, I found it quit hard to adapt because I miss features like scss support or automatic browser refresh. Are these issues somehow solvable?

Collapse
 
devhammed profile image
Hammed Oyedele

I could not imagine using this Blazor without automatic browser refreshing after my experience with React and all that.

Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

Same for me, but I found a way to overcome this with browsersync, and for the styles I found a package called blazor styled

Thread Thread
 
devhammed profile image
Hammed Oyedele

Can you provide the steps?

Thread Thread
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

I will, later today (CET), for now I have still some work to do.

Thread Thread
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast • Edited

So

  1. instal browsersync globally with yarn
  2. turn on your blazor app with dotnet watch run
  3. navigate into you project folder with the terminal and run ` browser-sync start "--proxy localhost:3000/ " --files '*/.razor, */.css, */.cs, */.scss !./bin, !./obj' localhost:3000/ represent the blazor app url
  4. open the browsersync management link in the terminal, copy the javascript from browser sync code into the html file in your wwwroot
  5. open your blazor app in the browser

thats the first time setup every other time just run the dotnet watch run command and the browsersync command in a second terminal.

Thread Thread
 
devhammed profile image
Hammed Oyedele

Thank you so much ✊✊✊

Thread Thread
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

no problem, have a nice day ;)

Collapse
 
saint4eva profile image
saint4eva

Scss is just a tool that compiles down to plain CSS. You can reference your CSS file in your project as you want. And there are a lot of Blazor components out there you can use.

Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

Thanks I know that, I just miss some automation tool which could do that in the background, like in react node-sass with the right babel config and loader

Collapse
 
zoltanhalasz profile image
Zoltan Halasz

For me, it is just playground. I would stick to asp.net razor pages and html , css, javascript for the moment.

Collapse
 
saint4eva profile image
saint4eva

Whatever makes you happy. Razor Pages is as powerful as Blazor. Blazor, both server-side and client-side, is production ready.

Collapse
 
lena profile image
lenabojanowska

Hi. Do you have any idea why while I am clicking on the Map I get an error that "Input string was not in a correct format."?