ASP.NET Boilerplate project

4 min readSep 10, 2021

ASP.NET Boilerplate is a configurable, opinionated framework for getting a skeleton to build on quickly.

The idea is that you pick your tools such as Angular, Vue.js or React and which version of .net you prefer, you can choose from ASP.NET Core or ASP.NET MVC 5.x (at the time of this writing).

They give you a few options such as whether you want to include a login, register and roles pages. You can also pick if you like it all in one solution or split up.

For this demo, we’ll choose ASP.NET Core v5.x with Angular SPA, and include login, registration, user and tenant management pages. Choose a name for your project, in our case we’re’ going to call it MySampleProjectDb. You can download the zip here https://aspnetboilerplate.com/Templates, see screenshot below.

Once you unzip your files, you should see a folder with the boilerplate version and inside of that folder an angular and aspnet-core folder and open the .sln file, I’m using Visual Studio 2019 Community, and build it.

Expand the Web.Host project and modify the connection string in the appsetting.json file. By default it’s going to assume you’re running a Sql Server db on localhost named MySampleProjectDb. For our demo, I’m going to keep it local and use the default named DB.

Set the startup project to Web.Host, this is important before you run your migration commands below.

{
 "ConnectionStrings": {
  "Default": "Server=localhost; Database=MySampleProjectDb; Trusted_Connection=True;"
 },
 "App": {
  "ServerRootAddress": "https://localhost:44311/",
  "ClientRootAddress": "http://localhost:4200/",
  "CorsOrigins": "http://localhost:4200,http://localhost:8080,http://localhost:8081,http://localhost:3000"
 },
 "Authentication": {
  "JwtBearer": {
   "IsEnabled": "true",
   "SecurityKey": "MySampleProject_C421AAEE0D114E9C",
   "Issuer": "MySampleProject",
   "Audience": "MySampleProject"
  }
 },
 "Kestrel": {
  "Endpoints": {
   "Http": {
    "Url": "https://localhost:44311/"
   }
  }
 },
 "Swagger": {
  "ShowSummaries": false
 }
}

Now, you need to open Package Manger Console and run the following migration command Update-Database, this will create your database.

Make sure that the Default project is selected as .EntityFrameworkCore in the Package Manager Console window

If you get a message like below, try going to Manage NugGet Packages for solution and run any updates that are there. I also had to update Microsoft.EntityFrameworkCore.Design into the .Core project.

Update-Database : The term 'Update-Database' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that thepath is correct and try again.At line:1 char:1+ Update-Database+ ~~~~~~~~~~~~~~~+ CategoryInfo          : ObjectNotFound: (Update-Database:String) [], CommandNotFoundException+ FullyQualifiedErrorId : CommandNotFoundException

Now you should see a database like this:

Run the backend

Now you can run the application from Visual Studio. You should see something like this if it worked. This is now running your backend.

Front end

We now want to run our Angular front end. You’ll want to open a command prompt or terminal window and navigate to where the downloaded the angular folder is, from there you’ll want to run the command below:

Restore Packages

npm install

Note that the npm install may show some warning messages. This is not related to our solution and generally it’s not a problem. The solution can also configured to work with yarn and we recommend you use it if it is available on your computer.

Run the app

In your command or terminal window, run the following command to run our front end:

npm start

This might take a while to compile

If all went well, you should be able to go to http://localhost:4200 in your browser. Be sure that the Web.Host backend application is running at the same time. When you open the application, you will see the login page:

The default default username is ‘admin’ and the password is ‘123qwe’. If you login using these credentials, you should be on the About page like below.