Using the Console to Develop Apps Based on Angular 5 and ASP.NET Core 2
Since the release of Angular 5 and .NET Core 2, it is possible to say that both these technologies have reached maturity and are ready to be used together. However, one aspect should be taken into account – the absence of full project support with the use of the latest Angular version in Visual Studio 2017 and further convenient work with it. A set of batch files for fast creation, deletion, development and deployment of web apps built with Angular 5 and ASP.NET Core 2 will eliminate this drawback. Each batch file from the provided set is designed to solve a specific task. It can be run in the console either independently or as a part of another batch file.
You can download the archive @angular-5–asp.net-core-2.zip with a set of batch files here.
Contents of the set
/ src /
A folder with source codes and batch files that will be added to the created app.
/ src / @ /
A folder with batch files for app development and deployment.
/ src / @ / cmd.exe.lnk
A shortcut for running the console as an administrator, inside which the batch files located in this folder should be launched.
/ src / @ / config.bat
A batch file containing variables, the values of which are configurable and used in the rest of the batch files.
/ src / @ / publish-all-dev.bat
A batch file for publishing the client and server parts of the debugging app. It uses within itself the following batch files: publish-client.bat (with the parameter “–dev”) and publish-server-debug.bat.
/ src / @ / publish-all-prod.bat
A batch file for publishing the client and server parts of the product app. It uses within itself the following batch files: publish-client.bat (with the parameter “–prod”) and publish-server-release.bat.
/ src / @ / publish-client.bat
A batch file for publishing the client part of the app.
/ src / @ / publish-server-debug.bat
A batch file for publishing the server part of the debugging app.
/ src / @ / publish-server-release.bat
A batch file for publishing the server part of the product app.
/ src / @ / serve.bat
A batch file designed to start the process of automatic assembling the client part of the app when any of its files are changed. The launch of this process is necessary to enable the rapid development of the client part of the app.
/ src / @ / start-dev.bat
A batch file designed to start work with the debugging app. It uses within itself all batch files related to the debugging app: publishes its server and client parts, starts the process of automatic assembling the client part of the app when any of its files are changed, opens debugging app sites and its client part for rapid development in the browser.
/ src / @ / start-prod.bat
A batch file designed to start work with a product app. It uses within itself all batch files related to the product app: publishes its server and client parts, opens a product app site in the browser.
/ src / @ / ClientApp /
A folder with the source files of the client part of the app. These files will be added to the client folder of the app after it is created and can be replaced if they already exist.
/ src / @ / ServerApp /
A folder with the source files of the server part of the app. These files will be added to the server folder of the app after it is created and can be replaced if they already exist.
/ create.bat
A batch file designed to build an app based on the configuration parameters listed in the file config.bat.
/ create-client.bat
A batch file designed to build a client part of the app based on Angular 5.
/ create-copy.bat
A batch file designed for copying the contents of folders with source codes and batch files located in the src folder to the corresponding app folders.
/ create-output.bat
A batch file designed to build an app folder.
/ create-server.bat
A batch file designed to build a server part of the app based on ASP.NET Core 2.
/ create-site.bat
A batch file designed to build a site in IIS.
/ create-site-debug.bat
A batch file designed to create a debugging site in IIS using the create-site.bat batch file.
/ create-site-release.bat
A batch file designed to create a product site in IIS using the create-site.bat batch file.
/ delete.bat
A batch file designed to delete an app created based on the configuration parameters listed in the config.bat file.
/ delete-output.bat
A batch file designed to delete an app folder.
/ delete-site.bat
A batch file designed to delete a site in IIS.
/ delete-site-debug.bat
A batch file designed to delete a debugging site in IIS using the delete-site.bat batch file.
/ delete-site-release.bat
A batch file designed to delete a product site in IIS using the delete-site.bat batch file.
Configuring the set
The config.bat batch file located in the @angular-5–asp.net-core-2 folder is designed to configure the set. It contains variables the values of which affect the operation of the rest of the batch files included in the set.
The contents of the configuration batch file config.bat
@echo off
set output_path=”C:\Git\Web”
set client_project_name=”ClientApp”
set server_project_name=”ServerApp”
set debug_site_name=”8085—angular-5–asp.net-core-2—debug”
set debug_site_port=8085
set debug_site_path=%output_path%\Publish\Debug
set debug_apppool_name=%debug_site_name%
set release_site_name=”8086—angular-5–asp.net-core-2—release”
set release_site_port=8086
set release_site_path=%output_path%\Publish\Release
set release_apppool_name=%release_site_name%
Values of variables of the configuration file
output_path
The folder name where project files will be located: the source codes of its client and server parts as well as publication files for the debugging and product sites.
client_project_name
The folder name where files of the project client part will be located.
server_project_name
The folder name where files of the project server part will be located.
debug_site_name
The name of the debugging file.
debug_site_port
The port number of the debugging site.
debug_site_path
The path to the debugging site folder.
debug_apppool_name
The debugging site app pool name.
release_site_name
The product site name.
release_site_port
The port number of the product site.
release_site_path
The path to the product site folder.
release_apppool_name
The name of the product site app pool.
Using the set
Create an app project
1. Open the folder @angular-5–asp.net-core-2
2. Edit properties of the cmd.exe.lnk shortcut
In the app launch command cmd.exe after the “cd /k” symbols, specify the full path to the current folder.
3. Open the console using the cmd.exe.lnk shortcut
4. In the console, perform the command to create an app: create
Delete an app project
1. Open the folder @angular-5–asp.net-core-2
2. Open the console using the cmd.exe.lnk shortcut
3. In the console, perform the command to delete an app: delete
Develop an app
1. Open the folder @ in the app folder
2. Edit properties of the cmd.exe.lnk shortcut
In the app launch command cmd.exe after the “cd /k” symbols, specify the full path to the current folder.
3. Open the console using the cmd.exe.lnk shortcut
4. In the console, perform the command to launch the app in the development mode: start-dev
Deploy an app
1. Open the folder @ in the app folder
2. Open the console using the cmd.exe.lnk shortcut
3. In the console, perform the command to launch the app in the product mode: start-prod
Conclusion
A web app created and deployed applying the incoming and provided batch file set is the simplest of all possible variants. It is the so-called “empty” project. It can be further developed, adding authentication, authorization, logging, testing, data modelling, etc., as an input for new projects. Everyone can customize it and use it as a template for creating similar batch files for apps written in other technologies.
