Admin Plus

React Admin Template with .NET Core 8

• created: 02/27/2021
• latest update: 11/25/2024
• by: Sangib Kumar Saha
• email: sangibruse@gmail.com

Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, feel free to email me.

• Visual Studio Code.

• Node.js 20 (Browse here to download https://nodejs.org/en/)

• .NET Core 8 SDK (Browse here to download  https://dotnet.microsoft.com/download)

• Database provider software (SQL Server / MySql / Sqlite / PostgreSql / Oracle).

Admin Plus template has two separate project i.e. AdminClient and AdminApi.

• Open AdminApi project on Visual studio code. Then open appsettings.json file and replace the Connection String by your one.
• Now open terminal on VS Code and write below commands

                        -> dotnet ef migrations add initial
                        -> dotnet ef database update
                        -> dotnet run
                You should see your API listening at localhost:5001.

• Now open AdminClient on VS Code. Open terminal and write

                        -> npm install
                        -> npm run dev

                Your project will be running at localhost:3001. 

N.B: This is just a quick start note, you need to follow full documentation for full project set up which starts from below.

• Open AdminApi project on Visual studio code.On appsettings.json file you will find five connection strings for five different database connectivity. Replace the connection string by your one.

"ConnectionStrings": {

    "ApiConnStringMssql": "data source=Sangib-PC;initial catalog=admindb;
     persist security info=True;Integrated Security=SSPI;",

    "ApiConnStringMysql": "server=localhost;port=3306;database=admindb;user=root;",

    "ApiConnStringOracle": "Data Source=(DESCRIPTION=(ADDRESS_LIST=
    (ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521)))  
    (CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=orclpdb)));User Id=root;Password=root;",

    "ApiConnStringSqlite": "Data Source=admindb.db;",

    "ApiConnStringPostgreSql": "Server=127.0.0.1;Port=5432;Database=admindb;
    User Id=postgres;Password=postgres;"

  }

• Then open Program.cs file,you will see five AppDbContextPool for five Connection Strings that already have on appsettings.json file. Un-Comment your required one and keep other four as commented.Have a look to the below code.I only un-comment the Mysql portion because i used Mysql DB here.

		//Sql Server Connection String
		/* builder.Services.AddDbContextPool(opt=>opt.UseSqlServer(builder.Configuration["ConnectionStrings:ApiConnStringMssql"])); */
		
		//Mysql Connection String
		builder.Services.AddDbContextPool(opt=>opt.UseMySql
		(builder.Configuration["ConnectionStrings:ApiConnStringMysql"],
		ServerVersion.AutoDetect(builder.Configuration["ConnectionStrings:ApiConnStringMysql"])));

		//Sqlite Connection String
		/* builder.Services.AddDbContextPool(opt=>opt.UseSqlite(builder.Configuration["ConnectionStrings:ApiConnStringSqlite"])); */

		//PostgreSql Connection String
		/* builder.Services.AddDbContextPool(opt=>opt.UseNpgsql(builder.Configuration["ConnectionStrings:ApiConnStringPostgreSql"])); */

		//Oracle Connection String
		/*builder.Services.AddDbContextPool(opt=>opt.UseOracle(builder.Configuration["ConnectionStrings:ApiConnStringOracle"])); */ 
	

• Now Open terminal on VS Code and write below commands     

               ->dotnet tool install --global dotnet-ef

               ->dotnet ef migrations add MigrationName

               ->dotnet ef database update

• After successful build a folder named Migrations should create on project structure and a database named admindb should create with seed data to your MySQL server (if you use MSSQL then you should check to Sql Server and so on for other databases). Now execute "dotnet run"  if  you want to run this Api project locally and you should see that your API listening at http://localhost:5001/.

• Open AdminClient on Visual Studio Code.On terminal first write "npm install", it will add node modules to project then write "npm run dev".

• After doing above settings your client project will be running at http://localhost:3001

Assuming that you run both api and client projects by following previous steps. Now you just need to open vite.config.js (/adminclient/vite.config.js) from Client project and set APIURL as http://localhost:5001 because our api is running here and you need to link with api from client.

	'process.env':{
		'APIURL':'http://localhost:5001'
	  }

For Admin access, Username:admin@reactadmin.com; Password:admin@2024

For User access, Username:user@reactadmin.com; Password:user@2024

Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. I'll do my best to assist. If you have a more general question relating to this script you may also comment directly on product comment section.

Sangib Kumar Saha