Creating a custom Blazor WebAssembly project template

As you have seen, the Demo Blazor WebAssembly project created by the Blazor WebAssembly App project template includes quite a few files. In later chapters, we will want to start with an empty Blazor project. So, we will create our own project template that creates an empty Blazor WebAssembly project.

Creating an empty Blazor project

We need to create an empty Blazor WebAssembly project to base our new project template on. We do this as follows:

1. Return to Visual Studio.
2. Delete the wwwroot\sample-data folder.
3. Delete all of the components in the Pages folder, except for the Index component.
4. Open the Index.razor file.
5. Delete all of the markup from the Index component. Make sure that you do not delete the @page directive at the top of the page.
6. Delete the Shared\SurveyPrompt.razor file.
7. Open the Shared\MainLayout.razor file.
8. Remove the About link from the top row of the layout by removing the following markup:

   <a href="http://blazor.net" target="_blank"
      class="ml-md-auto">
           About
   </a>

9. Open the Shared\NavMenu.razor file.
10. Remove the li elements for the Counter and Fetch data pages.
11. From the Build menu, select the Build Solution option.
12. From the Debug menu, select the Start Without Debugging (Ctrl+F5) option to run the Demo project.

    The Demo project is now empty. It only contains a blank Home page.

Creating a project template

The Export Template Wizard is used to create custom project templates. We will use the empty project that we just created as the basis for a custom project template. We do this as follows:

1. Return to Visual Studio.
2. From the Project menu, select the Export Template option to open the Export Template Wizard window.
3. Select Project template on the Choose Template Type dialog and click the Next button:
   

   Figure 2.18 – The Choose Template Type dialog

4. Complete the Select Template Options dialog as shown in the following screenshot and click the Finish button:

Figure 2.19 – The Select Template Options dialog

After you click the Finish button, your new project template will be saved to the folder indicated in the Output location field on the Select Template Options dialog and the folder will automatically open. The files that comprise your new project template are compressed into a file called EmptyBlazorProject.zip.

Updating a custom project template

We need to make a few updates to our custom project template before it is ready to use. First, we will declare a template parameter for the project's name, and then we will update the metadata. We do this as follows:

1. Extract all of the files from the EmptyBlazorProject.zip file.

   The EmptyBlazorProject.zip file contains all of the files from the empty Demo project as well as a MyTemplate.vstemplate file that contains all of the metadata for the project template.

2. Open the Shared/NavMenu.razor file and replace the word Demo with $projectname$:

   <a class="navbar-brand" href="">$projectname$</a>

   The $projectname$ parameter will be replaced by the name of the project that is provided by the user when the project is created.

   Open the _Imports.razor file and replace the word Demo with $projectname$:

   @using $projectname$
   @using $projectname$.Shared

3. Open the MyTemplate.vstemplate file.
4. Update the value of the Name element to Empty Blazor WebAssembly App:

   <Name>Empty Blazor WebAssembly App</Name>

5. Add the following elements after the Description element:

       <LanguageTag>C#</LanguageTag>
       <ProjectTypeTag>Web</ProjectTypeTag>

6. Replace the Icon element with the following Icon Package element:

   <Icon Package="{AAB75614-2F8F-4DA6-B0A6-763C6DBB2969}" ID="13"/>

7. Change the ReplaceParameters attribute to true for NavMenu.razor ProjectItem:

   <ProjectItem ReplaceParameters="true" 
                TargetFileName="NavMenu.razor">
       NavMenu.razor
   </ProjectItem>

8. Change the ReplaceParameters attribute to true for _Imports.razor ProjectItem:

   <ProjectItem ReplaceParameters="true" 
                TargetFileName="_Imports.razor">
       _Imports.razor
   </ProjectItem>

9. Save all of the updated files.
10. Update the EmtpyBlazorProject.zip file with the updated files.
11. Copy EmtpyBlazorProject.zip from the Visual Studio 2019\MyExportedTemplates folder to the Visual Studio 2019\Templates\ProjectTemplates folder.

Using a custom project template

We can use a custom project template the same way that we use any of the built-in project templates. We do this as follows:

1. From the File menu, select the New, Project option.
2. Enter Blazor in the Search for templates textbox to locate your new template:
   

   Figure 2.20 – Empty Blazor WebAssembly App template

3. Select the Empty Blazor WebAssembly App template and click the Next button.
4. Update the project name to Sample and click the Create button.
5. From the Build menu, select the Build Solution option.
6. From the Debug menu, select Start Without Debugging (Ctrl+F5).

We have created a new Sample project by using our custom project template. The only page in the Sample project is the Home page.

We created an empty project by deleting some of the components and code from the Demo project that we created in the previous section. Then, we used the Export Template Wizard to create a custom project template based on the empty project. After we updated some of the files in the custom project template, we copied them into the ProjectTemplates folder. Finally, we used the custom project template to create the Sample project.