DEV Community 👩‍💻👨‍💻

Cover image for Blazor series
Josh Kulp
Josh Kulp

Posted on

Blazor series

Over the next few post, I will be giving an overview of the learnings I have had writing my first Blazor app. Blazor is the new technology from Microsoft to run C# in the browser via WASM. If you want to learn more about the basics check out https://Blazor.net

Site Walkthrough <- You are here
Shared C#
Passing Parameters
JavaScript from C#
Debugging
Publishing to Github Pages
(I will add links as they are published)

In this post, I will do a brief site walkthrough to give you some context to the code we will be looking at.

Let's start with the architecture of the app. I started with the basic blazor template for "Blazor (ASP.NET Core hosted)"

So we have a Server project, Client project, Shared project.

  • Server project - This would be your c# backend, we will not be using this in this project since we want this to run from the client without a backend (Kinda, I use airtable as a cheap DB)

  • Client project - This is where your site lives and where we will be creating the components with blazor.

  • Sharred project - This is where the classes and models live that you could share between other C# projects

Next, let's look at the app its self. It is a basic Taco ordering app built as a single page app.

List Page

Gives you a list of tacos with the price.

Configuration pop-up

Lest you add extras to your taco and add it to your cart

Cart & Checkout

-Keeps track of the Tacos in your cart
-JavaScript alert of all the items in your cart.

Thanks for checking this out.
Have you used blazor yet? Do you think it is too soon to start looking at blazor since it is not production ready?

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.