Patterns and Practices

Format
Prerequisites
Overview
Visual Studio Code Extensions
Visual Studio
Installing the App Stack Template
Creating an App Stack Project
Building and Running

Format

Throughout this documentation, each major section will be linked at the top of the article. Clicking the header of each major section will bring you back to the top of this article.

Anywhere you see something referenced inside curly braces, i.e. - {value}, this means that the value isn't specific to the documentation and could be something that you come up with on your own. For example, a project name, a directory, etc.

Prerequisites

Before starting, ensure the following are installed and configured

Software	Notes	Mandatory?
Node.js	N/A	Yes
Git	CLI-based source control software	Yes
Yarn	Optimized client-side package manager	Yes
.NET Core SDK	SDK and Runtime for .NET Core	Yes
Visual Studio Code	Robust text editor that works really well with .NET and Angular	Yes
Visual Studio	IDE optimized for .NET development	Yes

Overview

The following provides an overview of the app stack. Greater detail of the configuration and capabilities of each part will be covered in their relevant sections throughout the documentation.

All of the links throughout this guide, as well as some additional helpful links, are provided in References - Links.

The current app stack is based on the dotnet new angular template provided by the .NET Core SDK.

The major modifications are as follows:

Removed Angular testing infrastructure
Removed unnecessary dependencies, including Bootstrap
Removed demo app resources
Added additional capabilities to the ASP.NET Core infrastructure
Configured JSON Serialization settings
Implemented Angular Material and provided an initial theming framework
Created modular infrastructure for conventional file structure based on Angular resource types
- Components
- Dialogs
- Services
- Modules
- Pipes
- Routes

Visual Studio Code Extensions

Extension	Description	Mandatory?
Angular Language Service	Editor services for Angular templates	Yes
C#	C# debugging support for Visual Studio Code	Yes
Debugger for Chrome	Debug JavaScript code in the Chrome browser	Yes
EditorConfig for VS Code	EditorConfig Support for VS Code	Yes
IntelliSense for CSS class names in HTML	CSS class name completion for the HTML class attribute based on the definitions found in your workspace	Yes
Node.js Modules Intellisense	Autocompletes Node.js modules in import statements	Yes
SCSS Formatter	A Visual Studio Code Extension to format SCSS	Yes
Settings Sync	Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist	Recommended
TSLint	TSLint for Visual Studio Code	Yes

For info on customizing and using Visual Studio Code, please refer to the official documentation

Visual Studio

There are 3 reasons why I install Visual Studio:

Installing and managing SQL Server Express
Installing the C++ Build Tools needed for compiling Sass
Debugging in IIS

The more I've worked with the new dotnet command line tools and Visual Studio Code, I've found myself returning to Visual Studio less and less. It's still useful incredibly useful, and you may prefer it more. This documentation will focus on a CLI-driven workflow and Visual Studio Code outside of the above-mentioned use cases.

Only the following workloads are needed in order to support the above-mentioned capabilities:

After Visual Studio is installed, navigate to Tools > Options (from the top menu in Visual Studio). Expand NuGet Package Manager and select Package Sources. Ensure the following package source is available:

Name: nuget.org
Source: https://api.nuget.org/v3/index.json

If only the Microsoft Visual Studio Offline Packages source is available, the following sections will fail to restore the declared NuGet packages for the projects in the template.

Installing the App Stack Template

The template is attached ot this project and is located in the template directory of this repository
Run the following command to add it to the available dotnet new templates:

dotnet new -i {path-to-template-folder}

After the command executes, the list of available dotnet commands is displayed, along with an updated list of available dotnet new templates. The following should closely represent what you see, with the new stack template highlighted:

Creating an App Stack Project

From a command prompt resolved to the created directory, execute the following:

dotnet new stack -n {ProjectName} -o {ProjectName}

Make sure your project name is not written in kebab-casing! It is recommended that you use PascalCasing for the project name to avoid solution project-resolution issues.

Building and Running

Once the project has been created, run the following sequence of commands:

{Project}>dotnet build
{Project}>cd {Project}.Web
{Project}.Web>dotnet run

When the dotnet run command is called, the server will spin up at http://localhost:5000, and the Angular app will compile.

mpskeeter / PatternsAndPractices