Lesson 1.4: Create Initial Blazor Project

Now that we have a source repository (from lesson 1.3) for our work, we’re going to create the initial Blazor application project.

Let’s start by launching Visual Studio 2019. The first thing we will see is a dialog where we can clone code, open projects, create projects, etc. We are going to start by cloning the Git repo we created in the previous lesson. Click the Clone code button.

This will bring up a dialog where we:

• Specify the Repository location as a URL to our Azure DevOps repo. This is the URL to the project repository that we just created, like: https://dev.azure.com/d20Tek/SimpleRPG/_git/simple-rpg-game.
• Note: for VS Code users the repository URL must include the 443 port in the domain: https://dev.azure.com:443/d20Tek/SimpleRPG/_git/simple-rpg-game.
• Specify a local path where we want to copy the code to our local machine.
  (I typically use a pattern like: c:\dev\repos\<org>\<project>\<repo> to organize my code locally. In this case, it would be: c:\dev\repos\d20tek\simplerpg\simple-rpg-game.)
• Then click the Clone button at the bottom.

This will connect the local folder with our git repository and sync down the initial two files. Nothing too exciting yet, but our VS IDE is now connected to our source repository. The real work can begin!

Create Blank Solution

In Visual Studio, click the File > New > Project menu item. This will bring up the New Project dialog. Select the Blank Solution template to start. And, click the Next button to continue through the wizard.

In this new solution dialog, enter:

• The solution name for the project that we are creating: simple-rpg-game.
• Pick the local file location for the project. Make it the same as the folder you just cloned your repo into. (Ex: c:\dev\repos\d20tek\simplerpg\simple-rpg-game)
• Click the Create button.

This will create an empty solution where we can add our projects to next.

Create the Blazor project

Now we can create our ASP.NET Blazor project in the current solution. We can either right click on the “simple-rpg-game” node in the Solution Explorer and select Add > New Project… Or from the main menu, select File > New > Project. Either option will bring to to the New Project dialog. In that dialog, select the Blazor App project type and press the Next button.

In this new project dialog, enter:

• The project name should be SimpleRPG.Game.
• Pick the local file location for the project within the current solution folder (just go with the default).
• And click the Create button.

Then, a Blazor-specific wizard will open to pick the type of Blazor app and features:

Select the following options in this wizard:

• Select the Blazor WebAssembly App. The short description is that this option is for client-side SPA applications like our sample. If you want details about the different types of Blazor applications, read this article.
• Keep Authentication set to None. This game won’t use authentication in the early stages (if at all).
• Check Configure for HTTPS (so your application will switch users to HTTPS on url requests).
• Check Progressive Web Application (this allows SPA applications to be installed like native applications from most modern browsers). We will dive into Progressive Web Apps later in this series.
• Then click the Create button.

Finally, this will load the new project into Visual Studio and the solution explorer will show the project with lots of new files. I’m not going to review all of the files that get created because we’ll be touching upon the important ones as we go. But read more about the Blazor project files and get a feel for the structure of the code.

Cleaning Up Blazor Project

The Blazor project template does create some unnecessary files that are used as examples. We’re going to delete those now since they’re not needed for our game.

• Delete Pages\Counter.razor
• Delete Pages\FetchData.razor
• Delete Shared\SurveyPrompt.razor
• Edit Pages\Index.razor file to remove the line:
  • <SurveyPrompt Title="How is Blazor working for you?" />
• Edit Shared\NavMenu.razor to remove navigation links to Counter and FetchData pages. The final code in the file should be:

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">SimpleRPG Game</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : string.Empty;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Those are all of the changes for now. We should build our app and give it a whirl:

• Save all of our changes and close any documents.
• Now build the project (main menu > Build > Build Solution)… everything should build correctly, and we now have our first Blazor app.
• Press Ctrl+F5 to run our application.

Commit Our Changes

Now that we have a working app. It’s a good time to commit our code to the Git repository. Visual Studio has tools to work directly with Git.

Switch into VS Team Explorer tool window, and then pick the Branches section. We are currently in the local main branch. Let’s create a new feature branch (remember we are not allowing direct commits to our main branch, so all work must be done in a feature branch and then create merged to the main branch).

For branches, follow the naming pattern: features/<feature name>, like features/initial-project. Base it on the main branch and check it out so you can commit your changes. Then, click the Create Branch button. The branch is now ready to commit our changes to that local feature branch.

Aside: I’m breaking a couple of Git best practices for this series, but doing so to make it easier for people to follow along with the lessons. First, my branches will be named by chapter (like chapter-1), which will hold all of the changes for that chapter. When complete all of those changes will still be merged into the main branch. Second, I will not delete these feature branches. I want to keep the chapter branches around so that readers can review those branches to see the changes that happened from chapter to chapter. While I’m doing this for the lessons, I would not do this for a work project.

Then, switch to the Team Explorer Changes tab. You will see all of the changes that have been made thus far. Now enter a description for this commit… something like: “Initial blazor project”. Then click the Commit All button.

Next switch the Team Explorer to the Synchronization tab. We will see the list of local commits. Press the Push link and this will push our changes into a feature branch to your Azure DevOps repo (with the same name, chapter-1).

If we move back to the Azure DevOps website in the browser, we can see this new feature branch in the Repo > Branches view. Click the main branch dropdown on our simple-rpg-game repo page. Select our feature branch name – chapter-1. Now, we can see all of the files and code that we just created in VS. Notice that these new files are in the chapter-1 branch but not our main branch yet. We will continue working in this branch for now and create a pull request to merge our changes into the main branch in a later lesson.

This concludes getting the initial Blazor project ready, building, and committed into our Azure DevOps repo. Now our source code will live forever!