Matech QuickStart is a cutting-edge ASP.NET Core / Angular / Admin Starter Project designed for Quick Application Development. It features a robust SOLID architecture, advanced authentication and authorization, comprehensive user and role management, and a suite of essential services. This powerful tool is engineered to accelerate your development process and elevate your projects to new heights.
🚀 The mission of developing our ASP.NET & Angular Admin Template is to empower developers with a comprehensive, efficient, and user-friendly foundation for building robust web applications. This template aims to streamline the development process, boost productivity, and ensure adherence to best practices from the outset. Our commitment is to facilitate rapid development while maintaining high standards of code quality, security, and performance.
- Onion Architecture
- RESTful API Backend using ASP.NET Core 8 Web API
- Database using Entity Framework Core
- Advanced Authentication/Authorization
- Real-time push notification system (with SignalR integration)
- Swagger integration
- Angular Material and TypeScript
-
[OPTION 1] Clone the Git Repository and edit with your favorite editor. e.g. Visual Studio, Visual Studio Code.
-
[OPTION 2] Download the Zip folder from github
When you open the downloaded zip file, you will see two folders
- QuickStart folder contains the server side ASP.NET Core solution and configured to work with Visual Studio.
- QuickStartUI folder contains the Angular UI application which is configured to work with the angular-cli.
Client and Server solutions are designed to work separately by default.
To deploy the database, follow these steps:
- Navigate to the QuickStart folder.
- Locate the solution file.
- Open the solution file, which will automatically launch Visual Studio.
-
In the QuickStart project, open
appsettings.json
. -
Modify the default connection string if necessary:
{ "ConnectionStrings": { "sqlConnection": "server=.; database=QuickStartDb; Integrated Security=true;TrustServerCertificate=true" }, }
The application uses the Code First approach of Entity Framework Core. All migration code is located in the QuickStart/Migrations folder.
-
Open the Package Manager Console in Visual Studio.
-
Set QuickStart as the default project.
-
Run the following command to update the database:
Update-Database
This will apply the migrations and set up your database.
After running the migrations, your database tables will be created as shown below:
Once you've configured the application, you can run the server-side application. The server-side application contains only APIs. The API is running on https://localhost:5001. Paste this URL into your browser to access the application and you will see the login page below:
LOGIN WITH USERNAME OR EMAIL ADDRESS
- Default Administrator Account
- Username: admin001
- Email: admin001@matech.com
- Password: AdminPassword123
- Default Standard Account
- Username: user002
- Email: user002@matech.com
- Password: UserPassword123
- For bug reports open an issue on github
Drag and drop QuickStartUI folder into VS code IDE
```bash
npm install
```
it will install the packages. Make sure that there is no error.
After install process now you can run local server- local server port is 'http://localhost:4200' For development start use this commend ng serve
```bash
ng serve
```
To merge and host the Angular application inside the ASP.NET Core API, follow these steps:
-
Build the Angular Application:
- Navigate to the
QuickStartUI
folder. - Run
ng build
to build the Angular application. This will create adist
folder containing the compiled Angular files.
- Navigate to the
-
Move Built Files to ASP.NET Core Project:
- Copy the contents of the
dist
folder. - Paste these contents into a new folder named
wwwroot
inside theQuickStart/QuickStart/wwwroot
folder. Thewwwroot
folder is the default location for static files in an ASP.NET Core application.
- Copy the contents of the
-
Configure ASP.NET Core to Serve Angular App:
- Open the
Program.cs
file in theQuickStart
folder. - Ensure that the
Configure
method is set up to serve static files and handle fallback routing for the Angular application:
var builder = WebApplication.CreateBuilder(args); app.UseRouting(); app.MapFallbackToController("Index", "Fallback");
- Open the
-
Run the Combined Solution:
- Open the
QuickStart
solution in Visual Studio. - Run the solution. The ASP.NET Core API should now serve the Angular application.
- Open the
By following these steps, you will successfully host the Angular application inside the ASP.NET Core API, creating a unified solution.
- Overview of Matech QuickStart
- Conceptual overview of what is ASP.NET Core
- Working with Data
- Angular 17 documentation overview
- Getting started with Angular CLI
- Angular Material
Matech QuickStart is actively maintained on GitHub. You can support it by
- Encouraging the developers by starring it
- Submitting your changes/improvements/features using pull requests
- Suggesting ideas or areas of improvements
- Linking to it and recommending it to others
Released under the MIT License.