DEV Community

Cover image for Hackathon - Hack Together: Microsoft Graph and .NET 🦒 - Day 02
Emanuele Bartolesi
Emanuele Bartolesi

Posted on

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

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.

GitHub logo kasuken / M365-Today

The project for Hack Together: Microsoft Graph and .NET - https://github.com/microsoft/hack-together




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.

Codespaces

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

<PageTitle>Index</PageTitle>

<FluentCard>
    <h2>Hello World!</h2>
    <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>
Enter fullscreen mode Exit fullscreen mode

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 🙂

Top comments (0)