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.
Database provider software (SQL Server / MySql / Sqlite / PostgreSql / Oracle).
AdminVUE template has two separate project i.e. AdminClient and AdminApi.
-> dotnet ef migrations add initial
-> dotnet ef database update
-> dotnet run
You should see your API listening at localhost:5001.
-> npm install
-> npm run serve
Your project will be running at localhost:8080.
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 Startup.cs file, On ConfigureServices method 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.
public void ConfigureServices(IServiceCollection services)
{
//Sql Server Connection String
/* services.AddDbContextPool<AppDbContext>(opt => opt.UseSqlServer
(Configuration.GetConnectionString("ApiConnStringMssql"))); */
//Mysql Connection String
services.AddDbContextPool<AppDbContext>(opt=>opt.UseMySql
(Configuration.GetConnectionString("ApiConnStringMysql")));
//Sqlite Connection String
/* services.AddDbContextPool<AppDbContext>(opt=>opt.UseSqlite
(Configuration.GetConnectionString("ApiConnStringSqlite"))); */
//PostgreSql Connection String
/* services.AddDbContextPool<AppDbContext>(opt=>opt.UseNpgsql
(Configuration.GetConnectionString("ApiConnStringPostgreSql"))); */
//Oracle Connection String
/* services.AddDbContextPool<AppDbContext>(opt=>opt.UseOracle
(Configuration.GetConnectionString("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 serve".
After doing above settings your client project will be running at http://localhost:8080
Assuming that you run both api and client projects by following previous steps. Now you just need to open config.js (/adminclient/src/config.js) from Client project and set hostname as http://localhost:5001 because our api is running here and you need to link with api from client.
export default{
hostname:'http://localhost:5001'
}
Here is some resourses so that you can find more detail about above installations-
Open Api project on Visual studio code. Assuming you are going to use https://adminvue.com as Site name/Domain for Client. Now open Startup.cs file and add this Domain to the existing policy like below to avoid CORS issues.
services.AddCors(options=>
{
options.AddPolicy(name:AllowSpecificOrigins,builder=>
{
builder.WithOrigins("http://localhost:8080","https://adminvue.com")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
now on vscode terminal write below command
-> dotnet publish
you will get a publish(/adminapi/bin/Debug/net6.0/publish) directory. Copy this publish directory to a physical path on server. Now open a new site on IIS with Site name, Physical path, IP address, Port and Host name. Now assuming that you set the Host name as api.adminvue.com, copy that name and store somewhere because we need that name just a bit later.
Open Client project on VS Code and set that name (api.adminvue.com) on hostname to config.js file.
export default{
hostname:'https://api.adminvue.com'
}
now on vscode terminal write below command
->npm run build
you will get a dist(/adminclient/dist) directory. Now find a web.config (/adminclient/web.config) file on root directory of client project, Copy that file and paste it to inside dist directory. Everything is ready.
Now you need to copy this dist directory to a physical path on server and open another site with Host name as adminvue.com. That's all for windows server.
Open Api project on Visual studio code. Assuming you are going to use https://adminvue.com as Site name/Domain for Client. Now open Startup.cs file and add this Domain to the existing policy like below to avoid CORS issues.
services.AddCors(options=>
{
options.AddPolicy(name:AllowSpecificOrigins,builder=>
{
builder.WithOrigins("http://localhost:8080","https://adminvue.com")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
now on vscode terminal write below command
-> dotnet publish
you will get a publish(/adminapi/bin/Debug/net6.0/publish) directory. Now you will need to create a directory named AdminVue.Api on your Linux server. Execute below command on your linux terminal to create that directory then copy the publish directory to this (/var/www/AdminVue.Api) path.
-> sudo mkdir /var/www/AdminVue.Api
Now it's time to configure nginx, open a config file,
-> sudo nano /etc/nginx/sites-enabled/adminvueApi
Place the below contents and save that file.
server {
listen 80;
server_name api.adminvue.com;
location / {
proxy_pass http://localhost:5001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
[Unit]
Description=Api for AdminVue client App
[Service]
WorkingDirectory=/var/www/AdminVue.Api/publish
ExecStart=/usr/bin/dotnet /var/www/AdminVue.Api/publish/AdminApi.dll
Restart=always
# Restart service after 10 seconds if the dotnet service crashes:
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=AdminVue.Api
User=ubuntu-user
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
Environment=ASPNETCORE_URLS=http://localhost:5001
[Install]
WantedBy=multi-user.target
Now, Open Client project on VS Code and set that 'https://api.adminvue.com' on hostname to config.js file.
export default{
hostname:'https://api.adminvue.com'
}
now on vscode terminal write below command
->npm run build
you will get a dist(/adminvueclient/dist) directory.
Now you will need to create a directory named AdminVue.Client on your Linux server. Execute below command on your linux terminal to create that directory then copy the dist directory to this (/var/www/AdminVue.Client) path.
-> sudo mkdir /var/www/AdminVue.Client
Next, open a config file,
-> sudo nano /etc/nginx/sites-enabled/adminvueClient
Place the below contents and save that file.
server {
listen 80;
server_name adminvue.com;
charset utf-8;
root /var/www/AdminVue.Client/dist;
index index.html;
#Always serve index.html for any request
location / {
root /var/www/AdminVue.Client/dist;
try_files $uri /index.html;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
You can check the Swagger API documentation UI by navigating https://api.adminvue.com .First go to the /api/Users/GetLoginInfo/{username}/{password} method from documentation page then enter username and password, a token will be generated here. Use this token to authorize the api by clicking the Authorize button at the top right like "Bearer token". Then you will able to check all the methods as expected.
For Admin access, Username:admin@vueadmin.com Password:admin@2021
For User access, Username:user@vueadmin.com Password:user@2021
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