Setup repository

First step is to setup repository so that other members can collaborate

• Create/Scaffold project in visual studio
  • Decide solution name i.e. BlazorWebAssemblyCrudApp
  • Decide project names i.e. BlazorWebAssemblyCrudApp.InMemory (data will be in memory -> hard coded data, see: [#(#))
• Download and install Git for Windows: https://git-scm.com/download/win
• Visual Studio tools and extensions
  • VS 2019+ : Git menu comes with visual studio
  • Github Extension for Visual Studio
    • Extensions > Manage Extensions
    • Install Github Extension for Visual Studio
• (Visual Studio) Menus > Git > Create Git Repository > Local only > Create

Add SSH Key to DevOps/Github account

• SSH Key Generation using Git GUI
  • Open Git GUI > Help > Show SHH Key
  • Generate Key (press ok, ok to skip setting password)
• Go to DevOps/Github account
  • Account settings > SSH public keys
  • Add key

Azure DevOps

• Create organization in Azure DevOps
• Create repository in Azure DevOps
• Login to Visual Studio using same credentials as Azure DevOps
• Way-1: pushing initial commit to DevOps repository
  • Go to DevOps
  • Copy repository uri
  • Go to local repository folder > right click > Git bash here
  • Add remote origin: git remote add origin https://dev.azure.com/foo-org/bar-repo (pull/push should work since we added SSH Key to our DevOps account)
• Way-2: uploading bare minimun code to DevOps repository and then cloning
  • Some times DevOps is managed by someone else or other team
    • in that case DevOps team might ask you to send code so that they can setup repository with code
    • then developer team members can clone and start collaborating
  • Prepare bare minimun code - delete unnecessary file and folders if needed i.e. bin, obj folders
  • Check if .gitignore is present in repository folder (add .gitignore if not present: https://github.com/github/gitignore/blob/master/VisualStudio.gitignore)
  • zip the solution and send it to DevOps team (DevOps team will create repository with code)
  • Cloing in Vidual Studio
    • Start Visual Studio > Continue without code
    • (Visual Studio) Menus > Git > Clone repository
    • Browse a repository > Azure DevOps
    • Select account (we logged in using same Azure credentials as DevOps in previous step)
    • DevOps repository should be shown > connect
    • Team Explorer > Clone repository
    • Notes:
      • Visual Studio might ask you to login again
      • All git related commands has moved to ‘Git Changes’ from ‘Team Explorer’
• (Visual Studio) Menus > File > Add to source control
• Team Explorer > Click plug icon at top > Azure DevOps repositories will show up
• Righ click on a project > Connect

Github

• Way-1: Cloing existing repository from Github
  • We already installed “Github Extension for Visual Studio” in previous step (if not then do it now)
  • We added SSH key to Github account in previous step (if not then do it now)
  • (Visual Studio) Team Explorer > Click plug icon at top
  • Github > clone > Sign in with your browser
  • Select the repository and clone
• Way-2: Creating repository from Visual Studio
  • Project created and Git repository initialized (previous steps)
  • Git changes > (top right) Push
  • Push to a new remote: Github > Sign in or select Github account from drop down
  • Set repository settings > Push
• Way-3: Pushing initial commit to empty repository
  • Create empty repository in Github
  • Copy repository uri
  • Add remote origin: git remote add origin https://dev.azure.com/foo-org/bar-repo (pull/push should work since we added SSH Key to our Github account)

If you are Azure CLI guy (personally I don’t like this method)

• Azure CLI
  • Install : https://aka.ms/installazurecliwindows
  • Check installation: az --version
  • Upgrade: az upgrade
• Azure DevOps Extension: az extension add --name azure-devops
• Rest of the details: https://docs.microsoft.com/en-us/azure/devops/repos/git/share-your-code-in-git-cmdline?view=azure-devops

Add projects to the solution

• BlazorWebAssemblyCrudApp.DomainModels (to share same model classes between API and client app)
• Blazor WebAssembly: BlazorWebAssemblyCrudApp.RestClient` (WebAssembly app normally consumes API)
• Blazor Server: BlazorServerCrudApp.Data`
  • EF core data project
  • Normally used in Blazor server or ASP.Net core app (web app, web API)
  • About EF Core Data Project
    • EF Core install packages
    • Database first approach
    • Using data layer in application
• BlazorApp.Xyz
  • Add project to solution according to your need
  • Keep in mind that, project should explicitly express what it does/contains

At the end, add unit test project (TDD is better)

Logging

• Logging Serilog Installation

Unit test

• xUnit
• Moq and AutoMoq

Commonly used Nuget packages

• AutoMapper Installation
• EF Core: Install-Package Microsoft.EntityFrameworkCore.SqlServer

Project structure

Create folders to organize code nicely. Use explicit names for folder so that anyone can undersatnd what kind of file/code belong to a folder

• Pages
  • Created by Vidual Studio scaffolding
  • Page conponents belong here
• Models (domain models will be in a different projects so that they can shared in API and client)
  • Models classes belong here
  • Sub-folders:
    • ViewModels: classes that will be used to carry data to view
    • InputModels: classes that will carry user inputs from forms
• Services
  • All business logic should be in services
  • IFooService.cs & FooService.cs: will be registered to DI container in Startup class
  • Blazor WebAssembly: BlazorWebAssemblyCrudApp.RestClient will used in services
  • Blazor Server:
    • BlazorServerCrudApp.Data will used in services
    • AutoMapper will be used to map between domain models and view models
  • ASP.Net core app
    • If Ddomain models are shared with API project then domail models will be seperated from data project (XyzApp.Data) and put in XyzApp.DomainModels
    • AutoMapper will be used to map between domain models and view models
• CustomComponents
  • Components that are not page, belong here
  • CustomComponents will be used in Page components
  • Example: TextAvatar
• ExtensionMethods
  • C# extension methods belong here
  • Example: Register multiple services in extension method
• AutoMapper
  • Auto mapper profiles belong here
  • Auto mapper is used to map from Domain models to ViewModels
  • Auto mapper is used when EF core is used i.e. in Blazor Server app
  • See: using auto mapper in ASP.Net core
• Xyz:
  • Create more folders accoding to your needs
  • Keep in mind that the folder name must explicitly express what it contains

Prepare sample data for CRUD application

In memory sample data for CRUD application

Decide which icon set to use

Bootstrap icons

• https://github.com/twbs/icons (MIT license)
• Developer guidehttps://icons.getbootstrap.com/?#icon-font

Open iconic

• https://useiconic.com/open/
• Developer guide: https://github.com/iconic/open-iconic

FontAwesome

• Using kit: https://fontawesome.com/start
• Download and host yourself: https://lineicons.com/icons/

LineAwesome

• https://icons8.com/line-awesome
• Developer giude: https://icons8.com/line-awesome/howto

Material design icons

• https://material.io/resources/icons/?style=baseline
• Developer guide: https://google.github.io/material-design-icons/
• https://materialdesignicons.com/

IcoMoon

• https://icomoon.io/
• Chrome extension: https://chrome.google.com/webstore/detail/icomoon/kppingdhhalimbaehfmhldppemnmlcjd?hl=en
• Installing the icomoon app on Chrome that will search various vendors, paid and free, for you

Next steps

• Creating a CRUD application
• Login page
• Search functionalities