Hackathon - Hack Together: Microsoft Graph and .NET 🦒 - Day 02


Published on

March 2, 2023

Today I started to work on the project. I didn't do special things but I "only" setup the environment to be more focused on the code in the next few days.

Repository on GitHub

I created a new repository on GitHub called "M365-Today". I did some small changes on the Readme but I left the rest as is. Anyway, you can start to sync the repository to see all the commits in the next days.

{% embed https://github.com/kasuken/M365-Today %}

GitHub Codespaces

I will most likely work on the project when I can, some from the laptop, some on the train, and some during the day while working but I will not follow a normal workflow. For this reason, I decided to use Codespaces for this repo because I don't have to sync the repo locally everytime, but I can work remotely directly from Visual Studio Code (if I needed). I didn't create a custom container but I use the default settings. I don't have any special requirements for this project.


New Project

From Visual Studio 2022 I created a new Project selecting the template "Blazor WebAssembly App". As I mentioned yesterday in my previous post, I use the Blazor WebAssembly without a server. Everything will run client side. I only checked "Progressive Web Application" because the application will be more faster and if I want to use this web application as the new tab page in the browser, it should be a good choice.

Blazor WebAssembly App

Git Flow

I use Git Flow for my daily activities at work and I cannot live without it. For my side project I use Git Flow as well. Nothing special in the git settings during the initialization.

Git Flow

Blazor Fluent UI

As I mentioned yesterday in the Day 01 post, I would like to use Fluent UI for Blazor. I followed the tutorial directly from the Microsoft Learn website. This is the link: https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/blazor

Anyway, to make a long story short, I took the following steps. I added the NuGet package called "Microsoft.Fast.Components.FluentUI" and I changed the Index.razor page with the following code.

@page "/"
@using Microsoft.Fast.Components.FluentUI


    <h2>Hello World!</h2>
    <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>

Just to check if Fluent UI is running well in the project.

After that, I removed Bootstrap from the index.html and a remove the navigation sidebar on the left.

Result after implementing Fluent UI

For today it was enough. Tomorrow I will start to implement the first calls to the Microsoft Graph and I will try to authenticate the user.

Stay tuned!

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: Learning GitHub.

LinkedIn Learning

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}

React, comment and follow on