Photo by Lacey Raper on Unsplash

Foreword

For nearly a decade now, I’ve been a software engineer. Along this crazy journey, I’ve learned languages, frameworks, design patterns, and all other manner of things that make me a pariah to most of the people I encounter. Add in the fact that my entire professional career has been in isolated government spaces, my mentors have been voiceless giants masked behind lines of text in documentation, books, and internet communities. I absolutely love it though. It’s a craft that requires absolute patience, humility, and above all else, passion.

Purpose

This series is aimed at giving back to the craft. Over those countless hours of pouring through documentation, one of the things that always struck me was how disjointed everything felt. Concepts were expressed in a vacuum, and it was up to me to stitch everything together in a way that made sense for what I was trying to accomplish. After years of stitching these pieces together, I feel it’s time to share my experience with anyone interested. The target audience is primarily aimed at someone who is new to writing web apps in a modern app stack. However, my hope is that anyone who reads this may glean some new insights, or provide those insights to me.

Technology

The app stack I’ll be using in this series is ASP.NET Core on the back end, and Angular on the front end with Angular Material as the design framework. This series isn’t meant to be a “my framework is better than yours” contest, so please don’t light me on fire for not using your favorite framework. As mentioned above, I work in isolated government spaces with limited access to the internet. These are the frameworks that I picked for very specific reasons, not least of which is that I’m competent in them.

For the sake of keeping the dialog informed, these are the reasons I picked these frameworks:

ASP.NET Core

Pass-through Windows Authentication with IIS enhanced with System.DirectoryServices.AccountManagement

Entity Framework is awesome

Middleware Pipeline

Dependency Injection

Web API

SignalR

Can cache NuGet dependencies

C# is fun to write in (to me!)

Angular

Integration with RxJS Observables

Modular design

Dependency Injection / Services

Robust Material framework built / managed by Google in Angular

Isolated component styling

Full modern framework that consolidates core features and prevents dependencies on unstable / no longer maintained libraries

Tools

The following are a list of the tools that I use for my workflow which will be needed to follow along with this series:

Windows Users: When installing Node.js, make sure to check the box to Automatically install the necessary tools for compiling npm modules. Material uses SASS, which relies on Visual Studio Build Tools and Python to compile.

Windows users should have this box checked

Starting Template Install

The template that serves as the foundation for this series is a modified version of the dotnet new angular template. I’ve stripped out Bootstrap in favor of Angular Material and added some theming infrastructure. Some basic services have been added, such as a notification service. The folder structure has been modified to make for an easier workflow.

To install the template:

open a command line / terminal to the location you want the template stored. Run the command git clone https://github.com/JaimeStill/FullstackTemplate Run the command dotnet new -i FullstackTemplate

Once the final command is run, the list of available templates for dotnet new should be listed, to include the Fullstack template:

Getting a Project Running

Before building the project, the network-timeout setting for Yarn needs to be bumped up. The way the template is setup, the Roboto font face is installed directly with the project (because I’m used to building stuff without an internet connection!) and can sometimes cause the yarn build to time out. This can be done from a command prompt / terminal with yarn config set network-timeout 60000 .

With the template installed, you can now generate a new project as follows:

Create a directory that you want to serve as the root of your project. In a command prompt /terminal pointed at that directory, run dotnet new fullstack .

You should end up with a directory that looks like this:

Now all that’s left is to build and run the project:

In the command prompt / terminal, change directory to the {Project}.Web directory (where Project is the name of the root directory you created. In this case, Fullstack.Web ). Run the command dotnet build . This will restore all of the .NET dependencies, build the .NET project, restore all of the npm modules, and build the Angular app.

Project built successfully

Once the project has been built, simply run the command dotnet run . A Kestrel server is started on http://localhost:5000 and hosts the ASP.NET Core app. Then, the Angular app is compiled and the app is ready to be served.

App hosted on localhost:5000

The app can now be accessed by navigating to http://localhost:5000.

Our humble beginning

Any saved changes to the Angular app files from an IDE (such as Visual Studio Code) will cause the app to update and reflect those changes in the browser thanks to an awesome technology called Hot Module Replacement.

Conclusion

Thank you for taking the time to engage in this article! The intent of this article was to introduce myself and kick start what I hope to be an engaging, educational series on full stack development. Looking ahead, I am planning on pushing out a post each week. Outside of the next post I have lined up, each entry will focus on a singular facet of development building upon the very project that was started here. It will culminate in a robust, modern framework that is capable of tackling some serious app capabilities and provide a holistic approach to full stack engineering.

Additional Posts