Setup your aspnet boilerplat project with PostgreSql Angular6 and dotnet core

In this blog post, I will walk you through downloading ASP.NET Boilerplate Application Framework and getting it up and running with .Net Core 2.1, Entity Framework core, Angular6 and PostgreSql.

ASP.NET Boilerplate is a general purpose application framework especially designed for new modern web applications. It uses already familiar tools and implements best practices around them to provide you a SOLID development experience.

The reason why you would be interested into this awesome framework is because of its layered architecture, modular design, domain driven design and its absolutely free. After setting up a base ASP.NET Boilerplate you just get some of the features like login, registration, token authentication, user and role management etc right away. To know more about ASP.NET Boilerplate, just visit their web site.

So, let's get started with our first step towards setting up ASP.NET Boilerplate application framework with Angular6, ASP.NET Core and PostgreSql

 

1. Before you start

Before we jump start our development with ASP.NET Boilerplate we just need to make sure you are having right development environment setup. I am using windows machine for development and here are things that you would probably need:

• Download NodeJS for windows and install it.
• Download .Net Core SDK and install it.
and Download .Net Core Runtime and install it.
• Download PostgreSql for Windows and install it.

While downloading .Net Core SDK and Runtime, please make sure you are installing x64 version or x86 version of both. Version mismatch of SDK and Runtime may leave your development environment not working while debugging .Net Core applications. If you have intalled any of the above things recently, please restart your machine before you continue.

 

2. Create and Download VS Project

Go to ASP.NET Boilerplate Download page. Here you will be able to choose various options related to technology stack that you want to use and ASP.NET Boilerplate will generate a project for you. Here is what we have used:

• ASP.NET Core 2.x with Target Framework .Net Core
• We used Angular as Single Page Web Application option
• In the options section we have "Include login, register, role and tenant" checked and "One Solution" unchecked
• We used Facile.SaaS as our project name but you can choose your own project name
• Enter captcha value, check "Latest Stable" and click on Create my project button to download your source

 

3. Running Front end Angular6 project

Unzip your project and goto Angular folder. Open the folder in command prompt and run following command:

npm install

This will install all node modules required for Angular6 project. Once this is completed successfully, run following command:

npm start

This will take a while and front end project will start running. You should be able to browse the front end project now.

 

4. Setting up back end .Net Core project to use PostgreSql

• Open PgAdmin4 and create a blank database
• Open solution under aspnet-core folder into visual studio 2017.
• Open Package Management Console from Tools in visual studio and chooose Facile.SaaS.EntityFrameworkCore project
• Install following two packages in the selected projects:

  install-package Npgsql.EntityFrameworkCore.PostgreSQL

  install-package Npgsql.EntityFrameworkCore.PostgreSQL.Design

• Drop ALL files in the "Migrations" directory (Project "EntityFrameworkCore/Migrations")
• Change DbContextConfigurer.cs like this:

  
  		public static void Configure(DbContextOptionsBuilder builder, string connectionString)
  		{
  			// builder.UseSqlServer(connectionString);
  			builder.UseNpgsql(connectionString);
  		}

  
  		public static void Configure(DbContextOptionsBuilder builder, DbConnection connection)
  		{
  			// builder.UseSqlServer(connection);
  			builder.UseNpgsql(connection);
  		}
  		

• Change ConnectionString in appsettings.json of Host and Migration project root to point to the blank PostgreSQL databsae that you created.
• In package management console, run following commands:

  Add-Migration "Initial"

  Update-Database

  If your databse connection strings are correct, this two commands will be successfully executed and after that you will be able to see your databse populated with required tables.
• Set Facile.SaaS.Migrator as start up project and run it. This is a console application to setup seed data. Enter yes when asked and wait for success message in the console..
• Set Facile.SaaS.Web.Host as start up project and run it.
• Switch to your front end project and try username: admin and password: 123qwe to login to your first site!

Some part of the steps are described here, but not all steps from this document are required.

5. Conclusion

You are ready to get started with your application. Follow the documentation and start building your app!