---

🚀 Part 1: Build and Push a Blazor App to GitHub

In this post, we’ll build a simple Blazor Server app and push it to GitHub in preparation for Azure deployment.

---

🛠️ Step 1: Create your first web app with ASP.NET Core using Blazor

To build your first .NET application, you'll need to install the .NET SDK, Visual Studio Code, and C# Dev Kit.

.NET 8.0 LTS SDK

https://dotnet.microsoft.com/en-us/download

Visual Studio Code

https://code.visualstudio.com/download

C# Dev Kit (extension for VS Code)

Open VS Code >> Click File >> Open Folder >> E:\Projects

Create a new folder 'dotnet'

Run dotnet and verify that the dotnet SDK is installed

cd E:\Projects\dotnet
dotnet

Open the command palette in VS Code by pressing CTRL+SHIFT+P

Type .NET: to see the commands you can run with C# Dev Kit!

Find and select .NET: New Project to create a new .NET project.

Scroll down and select Blazor Web App.

Choose the folder location you'd like to save your project.

Name the project BlazorApp1 in the command palette when prompted. Press Enter to confirm.

---

👀 Step 2: Run and Test the App Locally

Once the project is created, you will observe multiple files and folders are created. Now click the Solution Explorer at bottom left corner in VS Code. Select the Run and Debug icon in the Activity Bar on the left side of your workspace and click Run and Debug.

Visual Studio Code will open up a menu of launch configurations. Select C#: BlazorApp [Default Configuration].

Then you need to select a debugger. Select C#.

Wait for the app to launch in the browser. Once you get to the following page, you have successfully run your first Blazor app!

You can stop the app at any time by clicking on the stop button in the top toolbar.

To re-run your application, make sure that the Program.cs file is selected, now select the dropdown menu to the right of the run button in the top right, and select Run project associated with this file.

The displayed page is defined by the Home.razor file located inside the Components/Pages directory. This is what the contents of the file Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

The sample app already contains the code that sets it as the homepage and displays the text Hello, world! and Welcome to your new app. The PageTitle component sets the title for the current page so that it shows up in the browser tab.

Your Sample Web App is ready to be deployed to App Service via GitHub Actions.

---

🧰 Step 3: Create a new GitHub Repository, Initialize Git and Commit Code

Let us initialize git within the local repository for tracking files and version control

git init
git add .
git commit -m "Initial commit - BlazorDemoApp"
git branch -M main
git remote add origin https://github.com/mfkhan267/blazorappdemo.git
git push -u origin main

Your code should now be available inside your GitHub Repository.

🎉 You now have a Blazor project hosted on GitHub!

---

🎯 Done! In the next part we will discuss how to create a Web App with Azure App Service, Connect GitHub and Azure with OIDC Federated Authentication for automated deployment Code from GitHub to Azure via GitHub Actions.