How to Use MySQL Database to Setup ASP.NET Core 3.1 React Web Application

In this article, we will give short tutorial about how to setup ASP.NET Core 3.1 React Web Application using MySQL database.

PreRequisites

• Microsoft Visual Studio 2019 Community Edition
• .net core 3.1 https://dotnet.microsoft.com/download/dotnet-core
• MySQL Tools for Visutal Studio
• mysql-for-visualstudio-1.2.9.msi, download from here and install
• Windows 10 PC
• A browser preferably Chrome, Firefox or IE 11 or higher

Steps to Configure Identity Server 4 using MySQL in ASP.NET Core 3.1 React Web application

Delete Data Directory

Locate and delete the Migrations directory which is found under the Data directory of the solution

Install Pomelo.EntityFrameworkCore.MySql

Right click on the project and select the menu option Manage NuGet Packages. You can find three menu tabs Browse, Installed,Updates. Under the Installed tab, locate and uninstall the package Microsoft.EntityFrameworkCore.SQLServer.

Now navigate to the browse tab and search for and install the package Pomelo.EntityFrameworkCore.MySql

Create MySQL database

Access the MySQL database via MySQL workbench or within Visual Studio by navigating to Server Explorer and connecting to MySQL database server. Now create a database in MySql by running the following MySQL statement.

CREATE SCHEMA reactmembership;

Update appsettings.json to point to MySQL Connection String

Update value of DefaultConnection in appsettings.json to

server=localhost;port=3306;database=reactmembership;user=root;password=p@$$w0Rd;CharSet=utf8

The appsettings.json file will look like this once we have MySQL connection string updated for DefaultConnection

{
  "ConnectionStrings": {
    "DefaultConnection": "server=localhost;port=3306;database=reactmembership;user=root;password=p@$$w0Rd;CharSet=utf8"
  },
  "Logging": {
      "LogLevel": {
        "Default": "Warning"
      }
    },
  "IdentityServer": {
    "Clients": {
      "ReactMembershipDemo": {
        "Profile": "IdentityServerSPA"
      }
    }
  },
"AllowedHosts": "*"
}

Update Startup.cs to use MySQL

In Startup.cs file update ConfigureServices method to replace UseSqlServer with UseMySql

public void ConfigureServices(IServiceCollection services)
{
  services.AddDbContext<ApplicationDbContext>(options => options.UseMySql(
Configuration.GetConnectionString("DefaultConnection")));

services.AddDefaultIdentity<ApplicationUser>()
  .AddEntityFrameworkStores<ApplicationDbContext>();

services.AddIdentityServer()
  .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

services.AddAuthentication()
  .AddIdentityServerJwt();

services.AddControllersWithViews();
services.AddRazorPages();

// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration => {
configuration.RootPath = "ClientApp/build";
});
}

Scaffold New Migration and Update MySQL Database

In Visual Studio 2019, Navigate to Tools-> Nuget Package Manager -> Package Manager Console

In Visual Studio, use the Package Manager Console to scaffold a new migration and apply it to the database:

Add-Migration [migration name of your choice]
Update-Database

select * from aspnetusers

Javier Huthon

Javier is Content Specialist and also .NET developer. He writes helpful guides and articles, assist with other marketing and .NET community work