Yes, it’s a chat app. But it serves its purpose in illustrating awesome features and reducing the cognitive lift I would have otherwise wasted on coming up with a clever demo app 😅

Setup

Before you can run the application, there are three things that will need to be managed:

Installing and configuring SQL

Registering a Microsoft app so that authentication will work

Creating the database

SQL

This app is setup to run using SQL Server Express. Alternatively, you can set the project up to run using PostgreSQL. In this section, I’ll walk through how to configure the project for both.

SQL Server Configuration

If you opted to use SQL Server, the only change that will need to be made is to the connection string in FullstackOverview.Web\appsettings.json :

Where {instance-name} is the name of an instance of SQL Server installed on your machine.

PostgreSQL Configuration

In addition to modifying the connection string, the PostgreSQL Entity Framework library will need to be installed, and the database context configuration will need to be updated.

From a command prompt / terminal pointed at the FullstackOverview.Web directory, run the following command:

dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL

In the FullstackOverview.Web\Startup.cs file, change the Entity Framework registration in the ConfigureServices() method as follows:

In the FullstackOverview.Web\appsettings.json file, change the connection string as follows:

The Server , UserId , and Password properties above will depend on your install configuration.

See the Entity Framework Core docs, as well as the Npgsql docs for more info on entity framework.

Registering an App with Microsoft

This registration method varies from the method discussed in the ASP.NET Core documentation, as the docs provide an outdated (but still relevant) source of app registration. However, if you find this confusing, feel free to reference the setup described in the docs: Microsoft Authentication

Login to the Azure Portal with your Microsoft account, and search for App Registrations in the search bar (this is a free service!), then click the result:

Click New App Registration and provide the details as follows:

The name of the app can be anything. The important part is the Application Type is set to Web app / API, and the Sign-on URL is set to http://localhost:5000/signin-microsoft. Click Create when finished.

Take note of the Application Id on the following screen, as you will need this for configuring authentication in the app:

Click Settings then click Keys in the subsequent menu. In the Password section at the top, provide a Description and set the Expires value, then click Save:

Be sure to copy the password value!!! This is the only opportunity that you’ll have to save it. Otherwise, you’ll have to generate a new password!

Adding App Authentication Settings

Now that the app has been registered, you need to provide the ApplicationId and the Password saved from the above steps in FullstackOverview.Web\appsettings.json :

As this is not a production app and is for learning purposes, this is fine. However, you would want to make use of more secure practices when handling app secrets. See the ASP.NET Core Documentation on how to keep secrets safe in development.

Update Database

Before the app can be run, the database needs to be created on the server. From a command prompt / terminal resolved to the FullstackOverview.Data directory, run the following command:

dotnet ef database update -s ..\FullstackOverview.Web

You should see output similar to the following:

Database created!

Build and Run

Change directory to FullstackOverview.Web and run the following command:

dotnet build

You should see the following:

Build succeeded

Now, it’s time to run the app. Run the following command:

dotnet run

The web server begins listening on localhost:5000 and the Angular app compiles. In a browser, navigate to http://localhost:5000 and you should be directed to the Microsoft Login screen:

Authenticate with a Microsoft account

After authenticating, the app launches:

Clicking on the username at the top opens up the user settings:

As you type the username, the app uses RxJS to with a debounce time of 300ms to check whether the username is available. It will also format the username so that it can be used in URL links.

Clicking the Uploads link in the side panel on the left will allow you to add / manage uploads:

During development, uploads are stored at FullstackOverview.Web\wwwroot . You can also adjust the preview size of images using the slider, and clicking on an image will open it at full resolution in a new tab.

Clicking the Channels link in the side panel will allow you to create a channel:

Like username, the channel name performs URL encoding and checks to make sure the name is available. You can also use the search bar to filter channels by any value contained in the title or description:

Clicking on a channel card will open the channel. If you have the channel open in two browsers (as demonstrated in the GIF found near the beginning of this post), any messages sent from one client will be received by all clients that are currently connected. If a client connects at a later time, they will still see all of the messages that have been posted. Any listening clients will be alerted when a user enters or leaves a channel:

Conclusion

The post to follow will walk through the overall layout of the application and how the pieces are generally connected. Each subsequent post to follow will walk through the specifics of a particular facet of the application. Thanks for sticking it out! I know these first two posts have been centered more around configuration than actual development, but rest assured, the fire hose is primed and ready.