-
Notifications
You must be signed in to change notification settings - Fork 0
004 CREATING PROJECTS TO START DEVELOPMENT for (Material UI)
chempkovsky edited this page Nov 9, 2022
·
23 revisions
- Server side
- Client side
- Add angular Monolithic App project to the solution
- Add angular Micro frontend App project to the solution
This presentation explains how to create projects for the client and server sides.
- Let's start by organizing folders:
-
Suppose, the root folder name for all projects will be
E:\Development\PhonebookSolution
-
Suppose, the root folder name for all projects will be
- run Command Prompt and make
E:\Development\PhonebookSolution
folder active
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
- create solution
dotnet new sln -n PhonebookSolution
dotnet new classlib -o PhBkEntity
dotnet sln PhonebookSolution.sln add PhBkEntity/PhBkEntity.csproj --solution-folder Server
dotnet add PhBkEntity/PhBkEntity.csproj package Microsoft.EntityFrameworkCore
dotnet new classlib -o PhBkContext
dotnet sln PhonebookSolution.sln add PhBkContext/PhBkContext.csproj --solution-folder Server
dotnet add PhBkContext/PhBkContext.csproj package Microsoft.EntityFrameworkCore
dotnet add PhBkContext/PhBkContext.csproj package Microsoft.EntityFrameworkCore.SqlServer
dotnet add PhBkContext/PhBkContext.csproj package Microsoft.AspNetCore.Identity.EntityFrameworkCore
dotnet add PhBkContext/PhBkContext.csproj reference PhBkEntity/PhBkEntity.csproj
dotnet new classlib -o PhBkViews
dotnet sln PhonebookSolution.sln add PhBkViews/PhBkViews.csproj --solution-folder Server
dotnet new classlib -o PhBkControllers
dotnet sln PhonebookSolution.sln add PhBkControllers/PhBkControllers.csproj --solution-folder Server
dotnet add PhBkControllers/PhBkControllers.csproj package Microsoft.EntityFrameworkCore
dotnet add PhBkControllers/PhBkControllers.csproj package LinqKit.Microsoft.EntityFrameworkCore
dotnet add PhBkControllers/PhBkControllers.csproj reference PhBkEntity/PhBkEntity.csproj
dotnet add PhBkControllers/PhBkControllers.csproj reference PhBkContext/PhBkContext.csproj
dotnet add PhBkControllers/PhBkControllers.csproj reference PhBkViews/PhBkViews.csproj
With any text editor open PhBkControllers.csproj
and modify <ItemGroup>...<\ItemGroup>
as it shown below:
<ItemGroup>
...
<FrameworkReference Include="Microsoft.AspNetCore.App" />
...
</ItemGroup>
dotnet new webapi -o PhBkWebApp
dotnet sln PhonebookSolution.sln add PhBkWebApp/PhBkWebApp.csproj --solution-folder Server
dotnet add PhBkWebApp/PhBkWebApp.csproj package LinqKit.Microsoft.EntityFrameworkCore
dotnet add PhBkWebApp/PhBkWebApp.csproj package Microsoft.AspNetCore.Authentication.JwtBearer
dotnet add PhBkWebApp/PhBkWebApp.csproj package Microsoft.AspNetCore.Identity.EntityFrameworkCore
dotnet add PhBkWebApp/PhBkWebApp.csproj reference PhBkContext/PhBkContext.csproj
dotnet add PhBkWebApp/PhBkWebApp.csproj reference PhBkViews/PhBkViews.csproj
dotnet add PhBkWebApp/PhBkWebApp.csproj reference PhBkControllers/PhBkControllers.csproj
- In the following projects remove the file Class1.cs:
- PhBkEntity
- PhBkContext
- PhBkViews
- PhBkControllers
- In the following project remove the file WeatherForecastController.cs:
- PhBkWebApp
- In the following project remove the file WeatherForecast.cs:
- PhBkWebApp
- In the following projects add
PhBk
andAuth
folders- PhBkEntity
- PhBkContext
- PhBkViews
- For more information, please visit ANGULAR MATERIAL and MATERIAL DESIGN ICONS sites
- For more information, please visit flex-layout
- For more information, please visit localize package
- run Command Prompt and make
E:\Development\PhonebookSolution
folder active
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
- run
ng new AngularPhonebook
command:
E:\Development\PhonebookSolution>ng new AngularPhonebook
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
- run the command:
E:\Development\PhonebookSolution>cd AngularPhonebook
E:\Development\PhonebookSolution\AngularPhonebook>
- run
ng add @angular/material
command:
E:\Development\PhonebookSolution\AngularPhonebook>ng add @angular/material
i Using package manager: npm
√ Found compatible package version: @angular/material@13.3.7.
√ Package information loaded.
The package @angular/material@13.3.7 will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
- run
npm i -s @angular/flex-layout @angular/cdk
command:
E:\Development\PhonebookSolution\AngularPhonebook>npm i -s @angular/flex-layout @angular/cdk
- run
ng add @angular/localize
command:
E:\Development\PhonebookSolution\AngularPhonebook>ng add @angular/localize
i Using package manager: npm
√ Found compatible package version: @angular/localize@13.2.7.
√ Package information loaded.
The package @angular/localize@13.2.7 will be installed and executed.
Would you like to proceed? Yes
- run Command Prompt and make
E:\Development\PhonebookSolution
folder active
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
- run the command:
ng new AngularMatPhonebookSolution --no-create-application
- here is a response
E:\Development\PhonebookSolution>ng new AngularMatPhonebookSolution --no-create-application
CREATE AngularMatPhonebookSolution/angular.json (139 bytes)
CREATE AngularMatPhonebookSolution/package.json (1013 bytes)
CREATE AngularMatPhonebookSolution/README.md (1081 bytes)
CREATE AngularMatPhonebookSolution/tsconfig.json (863 bytes)
CREATE AngularMatPhonebookSolution/.editorconfig (274 bytes)
CREATE AngularMatPhonebookSolution/.gitignore (548 bytes)
CREATE AngularMatPhonebookSolution/.vscode/extensions.json (130 bytes)
CREATE AngularMatPhonebookSolution/.vscode/launch.json (474 bytes)
CREATE AngularMatPhonebookSolution/.vscode/tasks.json (938 bytes)
√ Packages installed successfully.
- run the command:
E:\Development\PhonebookSolution>cd AngularMatPhonebookSolution
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>
- run
ng add @angular/material
command:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng add @angular/material
i Using package manager: npm
√ Found compatible package version: @angular/material@14.2.6.
√ Package information loaded.
The package @angular/material@14.2.6 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview:
https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1079 bytes)
√ Packages installed successfully.
Project name is required.
- run
npm i -s @angular/flex-layout @angular/cdk
command:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>npm i -s @angular/flex-layout @angular/cdk
- run
ng add @angular/localize
command:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng add @angular/localize
i Using package manager: npm
√ Found compatible package version: @angular/localize@14.2.9.
√ Package information loaded.
The package @angular/localize@14.2.9 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
Option "project" is required.
-
Note:
- localize and material commands require App project. So, we need to repeat these commands for each Angular App created under the solution. We do not need to run commands for Angular Libraries.
-
Create Angular App project with a command
ng generate application AngularPhonebook
- Here is a response:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng generate application AngularPhonebook
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE projects/angular-phonebook/.browserslistrc (600 bytes)
CREATE projects/angular-phonebook/karma.conf.js (1438 bytes)
CREATE projects/angular-phonebook/tsconfig.app.json (295 bytes)
CREATE projects/angular-phonebook/tsconfig.spec.json (341 bytes)
CREATE projects/angular-phonebook/src/favicon.ico (948 bytes)
CREATE projects/angular-phonebook/src/index.html (302 bytes)
CREATE projects/angular-phonebook/src/main.ts (372 bytes)
CREATE projects/angular-phonebook/src/polyfills.ts (2338 bytes)
CREATE projects/angular-phonebook/src/styles.css (80 bytes)
CREATE projects/angular-phonebook/src/test.ts (749 bytes)
CREATE projects/angular-phonebook/src/assets/.gitkeep (0 bytes)
CREATE projects/angular-phonebook/src/environments/environment.prod.ts (51 bytes)
CREATE projects/angular-phonebook/src/environments/environment.ts (658 bytes)
CREATE projects/angular-phonebook/src/app/app-routing.module.ts (245 bytes)
CREATE projects/angular-phonebook/src/app/app.module.ts (393 bytes)
CREATE projects/angular-phonebook/src/app/app.component.html (23115 bytes)
CREATE projects/angular-phonebook/src/app/app.component.spec.ts (1103 bytes)
CREATE projects/angular-phonebook/src/app/app.component.ts (220 bytes)
CREATE projects/angular-phonebook/src/app/app.component.css (0 bytes)
UPDATE angular.json (3458 bytes)
UPDATE package.json (1211 bytes)
√ Packages installed successfully.
- Instead of the command
ng add @angular/localize --project=AngularPhonebook
we need to modifypolyfills.ts
by adding a line to the end of the file:
import '@angular/localize/init';
- we need to run the commands:
ng add @angular/material --project=AngularPhonebook
- here is a response:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng add @angular/material --project=AngularPhonebook
Skipping installation: Package already installed
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview:
https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1210 bytes)
√ Packages installed successfully.
UPDATE projects/angular-phonebook/src/app/app.module.ts (502 bytes)
UPDATE angular.json (3622 bytes)
UPDATE projects/angular-phonebook/src/index.html (584 bytes)
UPDATE projects/angular-phonebook/src/styles.css (181 bytes)
- Run Visual Studio 2022 and open
PhonebookSolution
- Add
Client
solution folder - right click
Client
-folder and chooseAdd/Existing Web Site
-menu item
- In
Add existing Web site
-dialog chooseE:\Development\PhonebookSolution\AngularPhonebook\src
-folder- DO NOT choose
E:\Development\PhonebookSolution\AngularPhonebook
-folder
- DO NOT choose
- the result is shown in the picture below
- Run Visual Studio 2022 and open
PhonebookSolution
- Add
Client
solution folder - right click
Client
-folder and chooseAdd/Existing Web Site
-menu item - In
Add existing Web site
-dialog chooseE:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects
-folder - the result is shown in the picture below
- Entity Framework
DB Contexts
andEntities
are used as a modeling tools. And structures during modeling may differ from structures that will be used during assembly. As a result, we need a way with which we can quickly switch all projects from simulation mode to build mode and vice versa. In case of only one project we can use#define
-keywords for conditional compiling. But in case of many projects it's not so convenient. Read the articles Customize your build and docker container does not seem to find the directory.build.props and Solution-wide #define - With any editor we create the
Directory.Build.props
-file with the following content.
<Project>
<PropertyGroup>
<DefineConstants>NOTMODELING</DefineConstants>
</PropertyGroup>
</Project>
- We save
Directory.Build.props
-file in theE:\Development\PhonebookSolution
-folder. - As a result, we can write code like below
#if (!NOTMODELING)
// any valid code here that will be ignored at compile and run time
#endif