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.
  • 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.
Fig 1 – Clone repository

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.

Fig 2 – New blank solution

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.

Fig 3 – New Blazor project

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:

Fig 4 – Blazor app wizard

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.
Fig 5 – Default Blazor app

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).

Fig 6 – Create new 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.

Fig 7 – Repo change tab

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).

Fig 8 – Repository synch changes

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!

4 thoughts on “Lesson 1.4: Create Initial Blazor Project

  1. Would using a Server App to begin with prevent me from following along with the tutorial? I’d like to make my game utilize multiple online players eventually but would be worried about this functionality being difficult or impossible without the server version, even if that functionality would be coming far later.

    Like

    1. You should be able to follow along with this sample if you use the Blazor Server project template instead. In general, the WebAssembly version is more restrictive, so anything you can do on that, you will also be able to do on the Server version. The only thing that comes to mind that may be WebAssembly only is the Progressive Web App (PWA) feature.

      That being said, you do not need the Blazor Server app to integrate with online web services. You can do that from the Blazor WebAssembly app as well. As a matter of fact, I plan to show how to call Azure services (Functions) from the WebAssembly game in future lessons so that we can load game data from a service rather than have it hard-coded locally.

      The difference between Blazor WebAssembly and Server is where the client code runs. In WebAssembly the client code is rendered and runs in the browser on the user’s machine. In Server, the client code is rendered on your server and then downloaded and run on the user’s machine. In the WebAssembly version, you don’t need a web server running in the cloud to run your application. It’s not using resources on your cloud service. The app is fully downloaded to the user’s machine and all processing is done there…. unless we make specific calls out to cloud-hosted web services.

      I hope that explains it more clearly…

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s