In my latest project I’ve used Angular 6 and .Net Core so I wanted to create a working implementation to demonstrate the following technologies working together.
The project was created with the Visual Studio Angular Template. It is originally targeted to Angular 5 and Bootstrap. However, I decided to migrate it to Angular 6 and Angular Material. There are many samples out there using Bootstrap but not with Angular Material.
.Net Core is an excellent option to handle asynchronous request. It was designed for highly available and low latency server applications. The performance benchmarks are among the best comparing to other frameworks. You can see the ranking in the Techempower Benchmarks.
The fictitious company organizes private events such as weddings, graduation parties, concerts for customers. An event contains information about the venue, entertainer, customer information and specific details such as dates and cost of the event.
The project is organized in two parts, the first one is the server side that consists of a collection of .Net Core Web APIs that access SQL Server database through Entity Framework Core. The second part is an Angular 6 single page application that manages all the user interactions and calls the .Net Web APIs.
An ideal single page application contains only code that is responsible for user interactions and calls different external endpoints for fetching data and executing commands. The server-side code is located in a different project and deployed in a separate location. They could be web applications, docker containers, azure functions or API Gateways.
I decided to organize the server and client-side code in the same project to make it easy to run and to demo. This sample stills needs OAuth 2 authentication and additional logic to make it a production ready robust application. I have another implementation that shows how to implement OAuth2 with Auth0 in another post.
The code is available in my github. It is required to clone it and to create a local database either in SQL Express or any version of SQL Server.
Entity Framework Core uses data migrations to create the database tables and update the database. Modify the connection string and update the database using EF Core Tools. Read more, for additional information about migrations.
After getting the code execute the following commands:
PowerShell
Update-DatabaseConsole
dotnet ef database updateThe purpose of the application is to Create, Edit and View Events, Venues, Entertainers and Customers. In order to create an event the other entities should be populated first. The goal of the event planner is to have a database of the upcoming events that they will organize. Visit the live application.
This is the landing page that describes the technologies the application is using.
List of events that the user assembled by creating a new event and selecting a venue, entertainer, customer along with additional details about the event such as date and time
Detail information about an event. This a reactive form that has some required fields along with angular material controls such as the calendar that enables users to have a very smooth navigation. Notice after saving data either when editing the event there is a snack bottom bar that notifies the user of a successful operation.
List of entertainers that previously needed to be added before creating an event. The same goes for Venues and Customers.
Continuous integration and delivery deserves its own post. However, I wanted to show the basic steps to deploy an Angular single page application along with a .NET Core backend. The key is to use the VSTS Pipelines and include Node and npm install in the right order. The template will install the dependencies and also build the application using the production environment settings.
I hope you enjoyed this post. Please leave me any feedback or any question you have so I can answer it or provide additional information. Visit my blog to add comments.