015 Preparing projects for application launch - chempkovsky/CS82ANGULAR GitHub Wiki
- AppConfig json
- Folders to generate the Angular componets
- Security is disabled by default
- Loading AppConfig json file before bootstrap app
- In this article, we will consider configuring only one DbContext, which corresponds to
PhBkConnection
-connection string. Other DbContexts we will configure later. - In the current configuration, security will be disabled. We will enable security later.
- In the current configuration, JwtBearer will be disabled. We will enable JwtBearer later.
- to add required packages run
cmd
and execute the commands
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
using command prompt
execute the command
dotnet add PhBkWebApp/PhBkWebApp.csproj package Microsoft.EntityFrameworkCore.SqlServer
using command prompt
execute the command
dotnet add PhBkWebApp/PhBkWebApp.csproj package Pomelo.EntityFrameworkCore.MySql
using command prompt
execute the command
dotnet add PhBkWebApp/PhBkWebApp.csproj package Npgsql.EntityFrameworkCore.PostgreSQL
-
appsettings.json
-file will be used to setupDatabase connection strings
andJWT
-settings - we assume that you have already installed MsSql(or/and MySql, or/and PostgreSQL) in your local network or virtual environment.
- suppose
- The name of MsSql server is
SVR2016SQL2017
- the password of
sa
-user ismy_Password_here
- The name of MsSql server is
- At the beginning of the project we need three databases (latter we will add more databases to implement lookup resources):
- for the PhoneBook tables (
PhBkConnection
-connection string) - for AsbNet standard security (
AspNetConnection
-connection string). It's a role based implementation, where each Web Api method is protected withRole
-attribute. - for security extension used by Angular-part of the App (
AuthConnection
-connection string), where for each pair (View + role) permission bitmask is defined (Add/Update/Delete/Select/Full scan filtering). After login Angular App makes request for a list of pairs (View + permission bitmask). The special Web API service returns such a list depending on which roles have been assigned to the current user and how they were defined (View
+Role
+Permission bitmask
).
- for the PhoneBook tables (
-
JWT
-section is for configuringjwtbearer
-authentication
Click to show the json file
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
"PhBkConnection": "Data Source=SVR2016SQL2017;Initial Catalog=PhBkDbDef;Persist Security Info=True;User ID=sa;Password=my_Password_here"
},
"JWT": {
"ValidAudience": "PhBkAudience",
"ValidIssuer": "PhBkIssuer",
"Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr"
}
}
- suppose
- The IP-address of MySql server is
192.168.100.3
- The port of MySql server is
3306
- the name of the root user is
rt
- the password of
rt
-user ismyPss@wrd
- The IP-address of MySql server is
- At the beginning of the project we need three databases (latter we will add more databases to implement lookup resources):
- for the PhoneBook tables (
PhBkConnection
-connection string) - for AsbNet standard security (
AspNetConnection
-connection string). It's a role based implementation, where each Web Api method is protected withRole
-attribute. - for security extension used by Angular-part of the App (
AuthConnection
-connection string), where for each pair (View + role) permission bitmask is defined (Add/Update/Delete/Select/Full scan filtering). After login Angular App makes request for a list of pairs (View + permission bitmask). The special Web API service returns such a list depending on which roles have been assigned to the current user and how they were defined (View
+Role
+Permission bitmask
).
- for the PhoneBook tables (
-
JWT
-section is for configuringjwtbearer
-authentication
Click to show the json file
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
"PhBkConnection": "Server= 192.168.100.3;Port=3306;Database=PhdctDbDef;User Id=rt;Password=myPss@wrd"
},
"JWT": {
"ValidAudience": "PhBkAudience",
"ValidIssuer": "PhBkIssuer",
"Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr"
}
}
- note
- After installing MySql, by default,
root
-user has permission to connect to the server from thelocalhost
only. To overcome this limitation we have created another user with a script shown below:
- After installing MySql, by default,
Click to show the sql script
CREATE USER 'rt'@'%' IDENTIFIED BY '*********';
GRANT ALL PRIVILEGES ON *.* TO 'rt'@'%' WITH GRANT OPTION;
- suppose
- The IP-address of PostgreSQL server is
192.168.100.3
- The port of PostgreSQL server is
5432
- the name of the root user is
postgres
- the password of
postgres
-user ismyPss@wrd
- The IP-address of PostgreSQL server is
- At the beginning of the project we need three databases (latter we will add more databases to implement lookup resources):
- for the PhoneBook tables (
PhBkConnection
-connection string) - for AsbNet standard security (
AspNetConnection
-connection string). It's a role based implementation, where each Web Api method is protected withRole
-attribute. - for security extension used by Angular-part of the App (
AuthConnection
-connection string), where for each pair (View + role) permission bitmask is defined (Add/Update/Delete/Select/Full scan filtering). After login Angular App makes request for a list of pairs (View + permission bitmask). The special Web API service returns such a list depending on which roles have been assigned to the current user and how they were defined (View
+Role
+Permission bitmask
).
- for the PhoneBook tables (
-
JWT
-section is for configuringjwtbearer
-authentication
Click to show the json file
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
"PhBkConnection": "Server=192.168.100.3;Port=5432;Database=PhdctDbDef;User Id=postgres;Password=myPss@wrd"
},
"JWT": {
"ValidAudience": "PhBkAudience",
"ValidIssuer": "PhBkIssuer",
"Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr"
}
}
- in the
Program.cs
-file of thePhBkWebApp
-project- right after the line of code
var builder = WebApplication.CreateBuilder(args);
we declare configuration
-variable as follows
#region configuration
ConfigurationManager configuration = builder.Configuration;
#endregion
- At the begging of the
Program.cs
-file of thePhBkWebApp
-project add the lines of code
using Microsoft.EntityFrameworkCore;
using PhBkContext.PhBk;
After declaration of configuration
-variable add the lines of code
#region dbcontexts
builder.Services.AddDbContext<PhbkDbContext>(options =>
options.UseSqlServer(configuration.GetConnectionString("PhBkConnection")));
#endregion
After declaration of configuration
-variable add the lines of code
#region dbcontexts
builder.Services.AddDbContext<PhbkDbContext>(options =>
options.UseMySql(configuration.GetConnectionString("PhBkConnection")), ServerVersion.AutoDetect(configuration.GetConnectionString("PhBkConnection"))));
#endregion
After declaration of configuration
-variable add the lines of code
#region dbcontexts
builder.Services.AddDbContext<PhbkDbContext>(options =>
options.UseNpgsql(configuration.GetConnectionString("PhBkConnection")));
#endregion
- In the
Program.cs
-file of thePhBkWebApp
-project right BEFORE the line
var app = builder.Build();
add the lines of code
builder.Services.AddCors(options => {
options.AddDefaultPolicy(
builder => {
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});
});
- In the
Program.cs
-file of thePhBkWebApp
-project right AFTER the line
var app = builder.Build();
add the lines of code
app.UseCors();
-
Open the file
Properties/launchSettings.json
of thePhBkWebApp
-project to get the port of the WebApi under"profiles":"PhBkWebApp":"applicationUrl"
-var copy http (or https) port (BUT NOT BOTH) and use it to definewebApiUrl
-var of thesrc/assets/app-config.json
-file of the Angular project. -
for instance, having
Properties/launchSettings.json
of thePhBkWebApp
-project
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:9904",
"sslPort": 44331
}
},
"profiles": {
"PhBkWebApp": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"launchUrl": "swagger",
"applicationUrl": "https://localhost:7163;http://localhost:5165",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
- we should modify
src/assets/app-config.json
-file as follows:
{
"webApiUrl": "http://localhost:5165",
"securityUrl": "https://localhost:7229/",
"permissionWebApi": "https://localhost:7229/"
}
- so
webApiUrl
ofsrc/assets/app-config.json
is equal to"profiles":"PhBkWebApp":"applicationUrl"
- Under the
src/app
-folder of the Angular project we create two subfolders: -
src/app/componets
to generate the Angular components and interfaces -
src/app/services
to generate the Angular services
- open the file
src/app/shared/services/app-glbl-settings.service.ts
. There two methodsgetDashBrdMask
andgetViewModelMask
getDashBrdMask(dshBrd: string): number {
return 1; // delete this line when dshBrds is ready
...
}
getViewModelMask(vwModel: string): number {
return 31; // delete this line when vwModels is ready
...
}
- to load
src/assets/app-config.json
the following service is usedsrc/app/shared/services/app-config.service.ts
- since this service is loaded before the application bootstrapped, it has constructor as follows
constructor (private injector: Injector) { }
- we will modify the body of
src/app/shared/services/app-config.service.ts
-service andsrc/assets/app-config.json
-data file later as the number of application's Urls becomes more than 3.