#VSCode: Quickly clone a git repository from #GitHub

download.pngI really enjoy Pluralsight.com as a place to refresh and learn new tech. In their courses they usually have example code on public GitHub repositories. Here’s the fast way to get them downloaded and up in VSCode (Visual Studio Code)

Here’s the fastest way to download a repo and open it in Visual Studio Code in the folder you’d like.

Step 1: Get the repo link.

For this example I’m using https://github.com/DanWahlin/Angular-JumpStart

Open the that link and press the Clone or Download button, then the Copy Link button seen here:

2020-03-11 09_43_03-DanWahlin_Angular-JumpStart_ Angular and TypeScript JumpStart example applicatio.png

Step 2: Open Windows Explorer to the folder you’d like it, then right click the folder and choose Open with Code 

2020-03-11 09_45_57-.png

Step 3: With VS Code open, press CTRL+<back tick> to open the Terminal

Type in git clone, then paste the URL:

2020-03-11 09_48_40-Welcome - Angular Architecture and Best Practices - Visual Studio Code.png

Done!

2020-03-11 09_50_11-Welcome - Angular Architecture and Best Practices - Visual Studio Code.png

 

#VSCode: Adding Windows Explorer Context Menus

1200px-Visual_Studio_Code_1.35_icon.svg.pngIn order to open VSCode in a specific folder, I used to Right Click the folder with SHIFT help down then choose Open PowerShell Window Here, then type code .

2020-03-11 09_05_44-Select Windows PowerShell.png

But, it turns out you can add Open in Visual Studio Code much easier if you choose the option in the Visual Studio Code installer.

If you have VSCode installed or not, just run the installer again. You can get it here.

Select these options:

2020-03-11 09_08_06-Setup - Microsoft Visual Studio Code (User).png

Now, when you right click a folder in Windows Explorer (SHIFT is not needed) you can choose the option:

2020-03-11 09_09_17-.png

Pro tip:

When you hold the SHIFT key down, you’ll get more options:

2020-03-11 09_11_22-.png

 

 

#VSCode: One #Angular Workspace with multiple projects

In VS Code (Visual Studio Code) you can create a single Workspace with 1 git repo but contain multiple projects. This lets you create library and app and contain them all under the same angular.json as well.

Here’s how.

Create a folder where you’d like to create the Workspace. In my example e:\ngLearn\CLIPlayGround

2020-03-09 10_42_08-Select Windows PowerShell.png

VS Code will appear. Open the Terminal Ctrl+Shift+`

Now, ask the CLI to create an Workspace, but with no default application:

ng new –createApplication=false

In the prompt give your workspace a name, like my-workspace

2020-03-09 10_46_33-CLIPlayGround - Visual Studio Code.png

It’s take a few minutes to set up. If you open Windows Explorer you’ll see the new workspace made, but without any application inside:

2020-03-09 10_47_29-my-workspace.png

Let’s now add a few applications by using the commands in the new folder

cd .\my-workspace\

ng g application

Run this twice and you’ll then notice there are 2 applications in your workspace: under a new Projects folder

2020-03-09 10_50_11-CLIPlayGround - Visual Studio Code.png

 

 

#NDepend – Rate your .Net code

download.pngRecently I tried out the NDepend tool to see how it can help with code reviews and code quality assessment of .Net code in Visual Studio.

I found this tool to be helpful and it quickly found areas of code in our projects that need some extra help.

Once you run the tool, you get a report which lays out the good, the bad and the ugly in your code. This is helpful as it lets us focus on what is important, and perhaps how much work needed to fix an issue.

Here’s a summary example:

2020-03-09 09_01_20-NDepend Report.png

 

You can then drill down and see the detail:

2020-03-09 09_02_25-NDepend Report.png

NDepend comes with a Visual Studio plug as well as a stand alone version.

#Redis Pub/Sub using .Net and #Docker – The easy way

PNG-image-00D34A55B376-1.pngSo, you’ve heard about Redis and want to go kick the tires. How does one do Pub/Sub between two .Net clients with Redis in the middle?

The Redis/Docker Part:

  • Docker will host our Redis. Go to https://hub.docker.com , sign up and download the Docker software. Install it and login with your new Docker Hub account. It’ll take a few moments to start.
  • Open a Powershell and enter this Docker command to download and run Redis in docker on the standard port:

docker run -it -d -p 6379:6379    redis 

(Pro tip: Here’s how to enable local file usage for Redis to record data to: docker run -it -d -p 6379:6379 -v e:/docker/redis:/data redis  where e: is a drive you enabled access to via the Docker Dashboard )

  • Close Powershell, it’s not needed any more.

Redis is now running, to check it, open Docker Dashboard by right clicking the little whale icon in your system tray. Docker will give the Redis a funny random name:

2020-02-20 08_23_02-.png        2020-02-20 08_23_48-Container list.png

The Coding Part:

Open Visual Studio Twice and create 2 Console apps. One will publish and one will subscribe.

In each project, add the Nuget StackOverflow.Redis

In the publisher app, add this class and call it from Main():

using StackExchange.Redis;
using System;
using System.Threading.Tasks;
 
 
namespace RedisTest
{
    public class Publisher
    {
        private ConnectionMultiplexer redis;
        public Publisher()
        {
            redis = ConnectionMultiplexer.Connect("localhost");
        }
 
        public async Task PublisherMessages()
        {
            ISubscriber sub = redis.GetSubscriber();
            for (int i = 0; i < 1300; i++)
            {
                sub.Publish("message"Guid.NewGuid().ToString());
            }
        }
    }
}

In the subscriber app, add this class and call it from Main():

using StackExchange.Redis;
using System;
using System.Threading.Tasks;
 
 
namespace RedisTest
{
    public class Subscriber
    {
        private ConnectionMultiplexer redis;
        public Subscriber()
        {
            redis = ConnectionMultiplexer.Connect("localhost");
        }
 
        public async Task SubscriberMessages()
        {
            ISubscriber sub = redis.GetSubscriber();
            await sub.SubscribeAsync("message"async (channelvalue) =>
            {
                Console.WriteLine(value);
            });
        }
    }
}

Let’s run them!

Start up the Subscriber, then the Publisher. The publisher will pump the messages to Redis, Redis will them pump them to the subscriber. Even on a low powered system, you should be able to do 1500 messages a second. There are basically an unlimited number of subscribers and publishers.

Afterward:

Get a tool like Redily to allow you to view the data inside Redis.

 

 

#Angular in #VSCode: Programmatic Router Outlet targeting

Mozilla_Firefox.pngdownload.jpgI wanted to put a component into a named router outlet, but do it from another component based on some database/API value. Here’s how I was able to get it to work relatively easily:

My main component, Customers, has this route setup:

    const routes: Routes = [
      {
        path: "customers",
        component: CustomersComponent,
        children: [
          {
            path: "customerlist",
            component: CustomerListComponent,
            outlet: "detailsOutlet"
          }
        ]
      }
    ];

and this named router outlet template:

   router-outlet name="detailsOutlet"

In the CustomerComponent I can then load the CustomerList component into the outlet:

    const parentPath = "customers";
    const childPath = "customerlist";
    this.router.navigate(
      [parentPath, { outlets: { detailsOutlet: childPath } }],
      {
        skipLocationChange: true
      }
    );

I used 2 const values to show where the string values come from. You’ll notice that the paths there match the route paths above.

I didn’t want the URL to change or the history to get the outlet assignment, so I specified the skipLocationChange.

 

#Angular and Asp.Net 3 Core 3: Creating up to date documentation

imagesAfter you create a new Asp.Net Core 3 Angular project, you’ll want to add documentation. Keeping it up to date is always a chore, but with some new tools, that can be made much easier.

We’re going to go over CompoDoc, a free tool to create and update Angular Documentation.

2019-11-12 11_15_10-Window.png

The first step is to install it into your Asp.Net Core 3 Angular app. Open up the ClientApp folder in a Terminal and enter this:

npm install --save @compodoc/compodoc

Once done, go to your package.json file and add the compodoc script to the script’s node:

2019-11-12 11_19_34-PluralsiteAngularRouting - Microsoft Visual Studio.png

To generate the docs, just run this in the same terminal:

 npm run compodoc

It will generate a ClientApp/documentation folder. Open the resulting index.html to view your new shiny docs.

Re-run the compodoc script to update as needed.

2019-11-12 11_23_01-Window.png

 

 

#Angular and Asp.Net 3 Core: Quick X-Ray into form properties

download.jpgOnce you have created an Angular app inside Visual Studio 2019 using the Asp.Net 3 Core template, you are ready to build some wonderful tools. Here are a few tips on how to quickly see behind the curtain in how Angular modifies and handles Forms and Form Fields.

Let’s start simple: Imagine you have a simple form where an input field is two-way bound to a field on your component:

<form>
  <div class="form-group">
    <input [(ngModel)]="name"  class="form-control" required />
  </div>

Let’s add an Angular local variable to the input called “#classTest

<input [(ngModel)]="name"  class="form-control" required #classTest />

We can now reference that field on the page and display the values by piping the classTest to a json pipe:

<h6>{{classTest|json}}</h6>

You’ll see this:

2019-11-09 20_06_43-PluralSiteAngularForms.png

These are internal properties Angular uses to manipulate and track the form field. Sweet!

Now, let’s see if we can better look at how the validation classes appear when the user edits. Change the h6 element to:

<h6>{{classTest.className|json}}</h6>

Now you’ll see Angular change the css classes applied to the field as data is entered:

2019-11-09 20_09_59-PluralSiteAngularForms.png

I find these tools useful when visualizing problems in the form.

#Angular and Asp.Net Core 3: #Bootstrap integration plus #Intellisence

When we build a new Angular application in Visual Studio 2019 we use lots of npm commands to get the resources needed. However because the node_modules folder is not included in the solution, Visual Studio will not pick up the bootstrap CSS for intellisence.

2019-11-09 16_25_42-Window.png

There is a simple fix, but let’s first review how to add Bootstrap to an Angular project in Asp.Net Core 3.

Open a terminal window and point to the ClientApp folder then type:

npm install –save bootstrap

In the node_modules folder you’ll see a new folder called bootstrap:

2019-11-09 16_28_11-Window.png

Open the angular.json and add a reference to the minified bootstrap css:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

 

Select the dist folder in the node_modules/bootstrap folder and press ctrl+c to copy it.

Create a new folder called “MyIntellisence”  in the root of the solution then paste in the contents of the dist folder:

2019-11-09 16_29_50-Window.png

That’s it! Now when you open a component, Visual Studio will give you gorgeous intellisence:

2019-11-09 16_31_27-Window.png

#Angular and Asp.Net Core 3: Faster debug cycles in Visual Studio 2019

Asp.Net Core 3 and Angular work great together. Here are a few tricks I use to have a super-fast development cycle when working on the client-side of my code. Note that this doesn’t apply to changes to c# code on your backend hosted in Asp.Net Core 3.

I assume that you have created your Angular 8+ app inside Asp.Net Core 3. If not, create one with the Create a New Project menu and choose the Angular option:

2019-11-08 09_29_03-Microsoft Visual Studio (Administrator).png

2019-11-08 09_29_40-Microsoft Visual Studio (Administrator).png

I like to run the Terminal inside Visual Studio, fewer windows to switch between. Go and install the free Extension Wack Wack.

Run Wack Wack from the View|Other Windows|Terminal menu and change the directory to the ClientApp folder.

2019-11-08 09_32_53-PluralSiteAngular - Microsoft Visual Studio.png

So that you and I are in the same version, update Angular then install all the packages by running these two commands:

ng update @angular/cli @angular/core

then

npm install

Once done we are ready.

Start up your Angular project with this command

npm start

Now, as you make changes to your Angular code and save them, the changes will instantly appear in the browser. No need to press F5 and wait for Visual Studio to connect and build.

2019-11-08 09_37_25-PluralSiteAngular - Microsoft Visual Studio.png