Writing and debugging Linux C++ applications from Visual Studio using the “Windows Subsystem for Linux”

I’ve blogged about the “Windows Subsystem for Linux” (also known as “Bash on Ubuntu on Windows“) many times before. Response to this Windows feature has been a little funny because folks try to:

  • Minimize it – “Oh, it’s just Cygwin.” (It’s actually not, it’s the actual Ubuntu elf binaries running on a layer that abstracts the Linux kernel.)
  • Design it – “So it’s a docker container? A VM?” (Again, it’s a whole subsystem. It does WAY more than you’d think, and it’s FASTer than a VM.)

Here’s a simple explanation from Andrew Pardoe:

1. The developer/user uses a bash shell.
2. The bash shell runs on an install of Ubuntu
3. The Ubuntu install runs on a Windows subsystem. This subsystem is designed to support Linux.

It’s pretty cool. WSL has, frankly, kept me running Windows because I can run cmd, powershell, OR bash (or zsh or Fish). You can run vim, emacs, tmux, and run Javascript/node.js, Ruby, Python, C/C++, C# & F#, Rust, Go, and more. You can also now run sshd, MySQL, Apache, lighttpd as long as you know that when you close your last console the background services will shut down. Bash on Windows is for developers, not background server apps. And of course, you apt-get your way to glory.

Bash on Windows runs Ubuntu user-mode binaries provided by Canonical. This means the command-line utilities are the same as those that run within a native Ubuntu environment.

I wanted to write a Linux Console app in C++ using Visual Studio in Windows. Why? Why not? I like VS.

Setting up Visual Studio 2017 to compile and debug C++ apps on Linux

Then, from the bash shell make sure you have build-essential, gdb’s server, and openssh’s server:

$ sudo apt update
$ sudo apt install -y build-essential
$ sudo apt install -y gdbserver
$ sudo apt install -y openssh-server

Then open up /etc/ssh/sshd_config with vi (or nano) like

sudo nano /etc/ssh/sshd_config

and for simplicity’s sake, set PasswordAuthentication to yes. Remember that it’s not as big a security issue as you’d think as the SSHD daemon closes when your last console does, and because WSL’s subsystem has to play well with Windows, it’s privy to the Windows Firewall and all its existing rules, plus we’re talking localhost also.

Now generate SSH keys and manually start the service:

$ sudo ssh-keygen -A
$ sudo service ssh start

Create a Linux app in Visual Studio (or open a Makefile app):

File | New Project | Cross Platform | Linux

Make sure you know your target (x64, x86, ARM):

Remote GDB Debugger options

In Visual Studio’s Cross Platform Connection Manager you can control your SSH connections (and set up ones with private keys, if you like.)

Tools | Options | Cross Platfrom | Connection Manager

 

Boom. I’m writing C++ for LInux in Visual Studio on Windows…running, compiling and debugging on the local Linux Subsystem

I'm writing C++ in Visual Studio on Windows talking to the local Linux Subsystem

BTW, for those of you, like me, who love your Raspberry Pi tiny Linux computers…this is a great way to write C++ for those little devices as well. There’s even a Blink example in File | New Project to start.

Also, for those of you who are very advanced, stop using Mingw-w64 and do cool stuff like compiling gcc 6.3 from source under WSL and having VS use that! I didn’t realize that Visual Studio’s C++ support lets you choose between a number of C++ compilers including both GCC and Clang.


Sponsor: Thanks to Redgate! Track every change to your database! See who made changes, what they did, & why, with SQL Source Control. Get a full version history in your source control system. See how.


© 2017 Scott Hanselman. All rights reserved.
     

I've blogged about the "Windows Subsystem for Linux" (also known as "Bash on Ubuntu on Windows") many times before. Response to this Windows feature has been a little funny because folks try to:

  • Minimize it - "Oh, it's just Cygwin." (It's actually not, it's the actual Ubuntu elf binaries running on a layer that abstracts the Linux kernel.)
  • Design it - "So it's a docker container? A VM?" (Again, it's a whole subsystem. It does WAY more than you'd think, and it's FASTer than a VM.)

Here's a simple explanation from Andrew Pardoe:

1. The developer/user uses a bash shell.
2. The bash shell runs on an install of Ubuntu
3. The Ubuntu install runs on a Windows subsystem. This subsystem is designed to support Linux.

It's pretty cool. WSL has, frankly, kept me running Windows because I can run cmd, powershell, OR bash (or zsh or Fish). You can run vim, emacs, tmux, and run Javascript/node.js, Ruby, Python, C/C++, C# & F#, Rust, Go, and more. You can also now run sshd, MySQL, Apache, lighttpd as long as you know that when you close your last console the background services will shut down. Bash on Windows is for developers, not background server apps. And of course, you apt-get your way to glory.

Bash on Windows runs Ubuntu user-mode binaries provided by Canonical. This means the command-line utilities are the same as those that run within a native Ubuntu environment.

I wanted to write a Linux Console app in C++ using Visual Studio in Windows. Why? Why not? I like VS.

Setting up Visual Studio 2017 to compile and debug C++ apps on Linux

Then, from the bash shell make sure you have build-essential, gdb's server, and openssh's server:

$ sudo apt update

$ sudo apt install -y build-essential
$ sudo apt install -y gdbserver
$ sudo apt install -y openssh-server

Then open up /etc/ssh/sshd_config with vi (or nano) like

sudo nano /etc/ssh/sshd_config

and for simplicity's sake, set PasswordAuthentication to yes. Remember that it's not as big a security issue as you'd think as the SSHD daemon closes when your last console does, and because WSL's subsystem has to play well with Windows, it's privy to the Windows Firewall and all its existing rules, plus we're talking localhost also.

Now generate SSH keys and manually start the service:

$ sudo ssh-keygen -A

$ sudo service ssh start

Create a Linux app in Visual Studio (or open a Makefile app):

File | New Project | Cross Platform | Linux

Make sure you know your target (x64, x86, ARM):

Remote GDB Debugger options

In Visual Studio's Cross Platform Connection Manager you can control your SSH connections (and set up ones with private keys, if you like.)

Tools | Options | Cross Platfrom | Connection Manager

 

Boom. I'm writing C++ for LInux in Visual Studio on Windows...running, compiling and debugging on the local Linux Subsystem

I'm writing C++ in Visual Studio on Windows talking to the local Linux Subsystem

BTW, for those of you, like me, who love your Raspberry Pi tiny Linux computers...this is a great way to write C++ for those little devices as well. There's even a Blink example in File | New Project to start.

Also, for those of you who are very advanced, stop using Mingw-w64 and do cool stuff like compiling gcc 6.3 from source under WSL and having VS use that! I didn't realize that Visual Studio's C++ support lets you choose between a number of C++ compilers including both GCC and Clang.


Sponsor: Thanks to Redgate! Track every change to your database! See who made changes, what they did, & why, with SQL Source Control. Get a full version history in your source control system. See how.


© 2017 Scott Hanselman. All rights reserved.
     

Command Line: Using dotnet watch test for continuous testing with .NET Core 1.0 and XUnit.net

I’ve installed .NET Core 1.0 on my machine. Let’s see if I can get a class library and tests running and compiling automatically using only the command line. (Yes, some of you are freaked out by my (and other folks’) appreciation of a nice, terse command line. Don’t worry. You can do all this with a mouse if you want. I’m just enjoying the CLI.

NOTE: This is considerably updated from the project.json version in 2016.

First, I installed from http://dot.net/core. This should all work on Windows, Mac, or Linux.

C:\> md testexample & cd testexample

C:\testexample> dotnet new sln
Content generation time: 33.0582 ms
The template "Solution File" created successfully.

C:\testexample> dotnet new classlib -n mylibrary -o mylibrary
Content generation time: 40.5442 ms
The template "Class library" created successfully.

C:\testexample> dotnet new xunit -n mytests -o mytests
Content generation time: 87.5115 ms
The template "xUnit Test Project" created successfully.

C:\testexample> dotnet sln add mylibrary\mylibrary.csproj
Project `mylibrary\mylibrary.csproj` added to the solution.

C:\testexample> dotnet sln add mytests\mytests.csproj
Project `mytests\mytests.csproj` added to the solution.

C:\testexample> cd mytests

C:\testexample\mytests> dotnet add reference ..\mylibrary\mylibrary.csproj
Reference `..\mylibrary\mylibrary.csproj` added to the project.

C:\testexample\mytests> cd ..

C:\testexample> dotnet restore
Restoring packages for C:\Users\scott\Desktop\testexample\mytests\mytests.csproj...
Restoring packages for C:\Users\scott\Desktop\testexample\mylibrary\mylibrary.csproj...
Restore completed in 586.73 ms for C:\Users\scott\Desktop\testexample\mylibrary\mylibrary.csproj.
Installing System.Diagnostics.TextWriterTraceListener 4.0.0.
...SNIP...
Installing Microsoft.NET.Test.Sdk 15.0.0.
Installing xunit.runner.visualstudio 2.2.0.
Installing xunit 2.2.0.
Generating MSBuild file C:\Users\scott\Desktop\testexample\mytests\obj\mytests.csproj.nuget.g.props.
Generating MSBuild file C:\Users\scott\Desktop\testexample\mytests\obj\mytests.csproj.nuget.g.targets.
Writing lock file to disk. Path: C:\Users\scott\Desktop\testexample\mytests\obj\project.assets.json
Installed:
16 package(s) to C:\Users\scott\Desktop\testexample\mytests\mytests.csproj

C:\testexample> cd mytests & dotnet test

Build started, please wait...
Build completed.

Test run for C:\testexample\mytests\bin\Debug\netcoreapp1.1\mytests.dll(.NETCoreApp,Version=v1.1)
Microsoft (R) Test Execution Command Line Tool Version 15.0.0.0
Copyright (c) Microsoft Corporation. All rights reserved.

Starting test execution, please wait...
[xUnit.net 00:00:00.5539676] Discovering: mytests
[xUnit.net 00:00:00.6867799] Discovered: mytests
[xUnit.net 00:00:00.7341661] Starting: mytests
[xUnit.net 00:00:00.8691063] Finished: mytests

Total tests: 1. Passed: 1. Failed: 0. Skipped: 0.
Test Run Successful.
Test execution time: 1.8329 Seconds

Of course, I’m testing nothing yet but pretend there’s a test in the tests.cs and something it’s testing (that’s why I added a reference) in the library.cs, OK?

Now I want to have my project build and tests run automatically as I make changes to the code. I can’t “dotnet add tool” yet so I’ll add this line to my test’s project file:

<ItemGroup>
<DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
</ItemGroup>

Like this:

Adding <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />

Then I just dotnet restore to bring in the tool.

NOTE: There’s a color bug using only cmd.exe so on “DOS” you’ll see some ANSI chars. That should be fixed in a minor release soon – the PR is in and waiting. On bash or PowerShell things look fin.

In this screenshot, you can see as I make changes to my test and hit save, the DotNetWatcher Tool sees the change and restarts my app, recompiles, and re-runs the tests.

Test Run Successful

All this was done from the command line. I made a solution file, made a library project and a test project, made the test project reference the library, then built and ran the tests. If I could add the tool from the command line I wouldn’t have had to manually touch the project file at all.

Again, to be sure, all this is stuff you can (and do) do in Visual Studio manually all the time. But I’ll race you anytime. 😉


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!


© 2017 Scott Hanselman. All rights reserved.
     

I've installed .NET Core 1.0 on my machine. Let's see if I can get a class library and tests running and compiling automatically using only the command line. (Yes, some of you are freaked out by my (and other folks') appreciation of a nice, terse command line. Don't worry. You can do all this with a mouse if you want. I'm just enjoying the CLI.

NOTE: This is considerably updated from the project.json version in 2016.

First, I installed from http://dot.net/core. This should all work on Windows, Mac, or Linux.

C:\> md testexample & cd testexample


C:\testexample> dotnet new sln
Content generation time: 33.0582 ms
The template "Solution File" created successfully.

C:\testexample> dotnet new classlib -n mylibrary -o mylibrary
Content generation time: 40.5442 ms
The template "Class library" created successfully.

C:\testexample> dotnet new xunit -n mytests -o mytests
Content generation time: 87.5115 ms
The template "xUnit Test Project" created successfully.

C:\testexample> dotnet sln add mylibrary\mylibrary.csproj
Project `mylibrary\mylibrary.csproj` added to the solution.

C:\testexample> dotnet sln add mytests\mytests.csproj
Project `mytests\mytests.csproj` added to the solution.

C:\testexample> cd mytests

C:\testexample\mytests> dotnet add reference ..\mylibrary\mylibrary.csproj
Reference `..\mylibrary\mylibrary.csproj` added to the project.

C:\testexample\mytests> cd ..

C:\testexample> dotnet restore
Restoring packages for C:\Users\scott\Desktop\testexample\mytests\mytests.csproj...
Restoring packages for C:\Users\scott\Desktop\testexample\mylibrary\mylibrary.csproj...
Restore completed in 586.73 ms for C:\Users\scott\Desktop\testexample\mylibrary\mylibrary.csproj.
Installing System.Diagnostics.TextWriterTraceListener 4.0.0.
...SNIP...
Installing Microsoft.NET.Test.Sdk 15.0.0.
Installing xunit.runner.visualstudio 2.2.0.
Installing xunit 2.2.0.
Generating MSBuild file C:\Users\scott\Desktop\testexample\mytests\obj\mytests.csproj.nuget.g.props.
Generating MSBuild file C:\Users\scott\Desktop\testexample\mytests\obj\mytests.csproj.nuget.g.targets.
Writing lock file to disk. Path: C:\Users\scott\Desktop\testexample\mytests\obj\project.assets.json
Installed:
16 package(s) to C:\Users\scott\Desktop\testexample\mytests\mytests.csproj

C:\testexample> cd mytests & dotnet test

Build started, please wait...
Build completed.

Test run for C:\testexample\mytests\bin\Debug\netcoreapp1.1\mytests.dll(.NETCoreApp,Version=v1.1)
Microsoft (R) Test Execution Command Line Tool Version 15.0.0.0
Copyright (c) Microsoft Corporation. All rights reserved.

Starting test execution, please wait...
[xUnit.net 00:00:00.5539676] Discovering: mytests
[xUnit.net 00:00:00.6867799] Discovered: mytests
[xUnit.net 00:00:00.7341661] Starting: mytests
[xUnit.net 00:00:00.8691063] Finished: mytests

Total tests: 1. Passed: 1. Failed: 0. Skipped: 0.
Test Run Successful.
Test execution time: 1.8329 Seconds

Of course, I'm testing nothing yet but pretend there's a test in the tests.cs and something it's testing (that's why I added a reference) in the library.cs, OK?

Now I want to have my project build and tests run automatically as I make changes to the code. I can't "dotnet add tool" yet so I'll add this line to my test's project file:

<ItemGroup>

<DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
</ItemGroup>

Like this:

Adding <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />

Then I just dotnet restore to bring in the tool.

NOTE: There's a color bug using only cmd.exe so on "DOS" you'll see some ANSI chars. That should be fixed in a minor release soon - the PR is in and waiting. On bash or PowerShell things look fin.

In this screenshot, you can see as I make changes to my test and hit save, the DotNetWatcher Tool sees the change and restarts my app, recompiles, and re-runs the tests.

Test Run Successful

All this was done from the command line. I made a solution file, made a library project and a test project, made the test project reference the library, then built and ran the tests. If I could add the tool from the command line I wouldn't have had to manually touch the project file at all.

Again, to be sure, all this is stuff you can (and do) do in Visual Studio manually all the time. But I'll race you anytime. ;)


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!


© 2017 Scott Hanselman. All rights reserved.
     

dotnet new angular and dotnet new react

I was exploring the “dotnet new” experience last week and how you can extend templates, then today the .NET WebDev blog posted about Steve Sanderson’s work around Single Page Apps (SPA). Perfect timing!

image

Since I have Visual Studio 2017 RC and my .NET Core SDK tools are also RC4:

C:\Users\scott\Desktop\fancypants>dotnet --info
.NET Command Line Tools (1.0.0-rc4-004771)

Product Information:
Version: 1.0.0-rc4-004771
Commit SHA-1 hash: 4228198f0e

Runtime Environment:
OS Name: Windows
OS Version: 10.0.15031
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

I can then do this from the dotnet command line interface (CLI) and install the SPA templates:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

The * is the package version so this is getting the latest templates from NuGet. I’m looking forward to using YOUR templates (docs are coming! These are fresh hot bits.)

This command adds new templates to dotnet new. You can see the expanded list here:

Templates                                     Short Name      Language      Tags
------------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
MVC ASP.NET Core with Angular angular [C#] Web/MVC/SPA
MVC ASP.NET Core with Aurelia aurelia [C#] Web/MVC/SPA
MVC ASP.NET Core with Knockout.js knockout [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js react [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

See there? Now I’ve got “dotnet new react” or “dotnet new angular” which is awesome. Now I just “npm install” and “dotnet restore” followed by a “dotnet run” and very quickly I have a great starter point for a SPA application written in ASP.NET Core 1.0 running on .NET Core 1.0. It even includes a dockerfile if I like.

From the template, to help you get started, they’ve also set up:

  • Client-side navigation. For example, click Counter then Back to return here.
  • Server-side prerendering. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over. THIS IS HUGE.
  • Webpack dev middleware. In development mode, there’s no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
  • Hot module replacement. In development mode, you don’t even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.

Go and read about these new SPA templates in depth on the WebDev blog.


Sponsor: Big thanks to Raygun! Join 40,000+ developers who monitor their apps with Raygun. Understand the root cause of errors, crashes and performance issues in your software applications. Installs in minutes, try it today!


© 2016 Scott Hanselman. All rights reserved.
     

I was exploring the "dotnet new" experience last week and how you can extend templates, then today the .NET WebDev blog posted about Steve Sanderson's work around Single Page Apps (SPA). Perfect timing!

image

Since I have Visual Studio 2017 RC and my .NET Core SDK tools are also RC4:

C:\Users\scott\Desktop\fancypants>dotnet --info

.NET Command Line Tools (1.0.0-rc4-004771)

Product Information:
Version: 1.0.0-rc4-004771
Commit SHA-1 hash: 4228198f0e

Runtime Environment:
OS Name: Windows
OS Version: 10.0.15031
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

I can then do this from the dotnet command line interface (CLI) and install the SPA templates:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

The * is the package version so this is getting the latest templates from NuGet. I'm looking forward to using YOUR templates (docs are coming! These are fresh hot bits.)

This command adds new templates to dotnet new. You can see the expanded list here:

Templates                                     Short Name      Language      Tags

------------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
MVC ASP.NET Core with Angular angular [C#] Web/MVC/SPA
MVC ASP.NET Core with Aurelia aurelia [C#] Web/MVC/SPA
MVC ASP.NET Core with Knockout.js knockout [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js react [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

See there? Now I've got "dotnet new react" or "dotnet new angular" which is awesome. Now I just "npm install" and "dotnet restore" followed by a "dotnet run" and very quickly I have a great starter point for a SPA application written in ASP.NET Core 1.0 running on .NET Core 1.0. It even includes a dockerfile if I like.

From the template, to help you get started, they've also set up:

  • Client-side navigation. For example, click Counter then Back to return here.
  • Server-side prerendering. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over. THIS IS HUGE.
  • Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
  • Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.

Go and read about these new SPA templates in depth on the WebDev blog.


Sponsor: Big thanks to Raygun! Join 40,000+ developers who monitor their apps with Raygun. Understand the root cause of errors, crashes and performance issues in your software applications. Installs in minutes, try it today!


© 2016 Scott Hanselman. All rights reserved.
     

dotnet new angular and dotnet new react

I was exploring the “dotnet new” experience last week and how you can extend templates, then today the .NET WebDev blog posted about Steve Sanderson’s work around Single Page Apps (SPA). Perfect timing!

image

Since I have Visual Studio 2017 RC and my .NET Core SDK tools are also RC4:

C:\Users\scott\Desktop\fancypants>dotnet --info
.NET Command Line Tools (1.0.0-rc4-004771)

Product Information:
Version: 1.0.0-rc4-004771
Commit SHA-1 hash: 4228198f0e

Runtime Environment:
OS Name: Windows
OS Version: 10.0.15031
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

I can then do this from the dotnet command line interface (CLI) and install the SPA templates:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

The * is the package version so this is getting the latest templates from NuGet. I’m looking forward to using YOUR templates (docs are coming! These are fresh hot bits.)

This command adds new templates to dotnet new. You can see the expanded list here:

Templates                                     Short Name      Language      Tags
------------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
MVC ASP.NET Core with Angular angular [C#] Web/MVC/SPA
MVC ASP.NET Core with Aurelia aurelia [C#] Web/MVC/SPA
MVC ASP.NET Core with Knockout.js knockout [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js react [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

See there? Now I’ve got “dotnet new react” or “dotnet new angular” which is awesome. Now I just “npm install” and “dotnet restore” followed by a “dotnet run” and very quickly I have a great starter point for a SPA application written in ASP.NET Core 1.0 running on .NET Core 1.0. It even includes a dockerfile if I like.

From the template, to help you get started, they’ve also set up:

  • Client-side navigation. For example, click Counter then Back to return here.
  • Server-side prerendering. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over. THIS IS HUGE.
  • Webpack dev middleware. In development mode, there’s no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
  • Hot module replacement. In development mode, you don’t even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.

Go and read about these new SPA templates in depth on the WebDev blog.


Sponsor: Big thanks to Raygun! Join 40,000+ developers who monitor their apps with Raygun. Understand the root cause of errors, crashes and performance issues in your software applications. Installs in minutes, try it today!


© 2016 Scott Hanselman. All rights reserved.
     

I was exploring the "dotnet new" experience last week and how you can extend templates, then today the .NET WebDev blog posted about Steve Sanderson's work around Single Page Apps (SPA). Perfect timing!

image

Since I have Visual Studio 2017 RC and my .NET Core SDK tools are also RC4:

C:\Users\scott\Desktop\fancypants>dotnet --info

.NET Command Line Tools (1.0.0-rc4-004771)

Product Information:
Version: 1.0.0-rc4-004771
Commit SHA-1 hash: 4228198f0e

Runtime Environment:
OS Name: Windows
OS Version: 10.0.15031
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

I can then do this from the dotnet command line interface (CLI) and install the SPA templates:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

The * is the package version so this is getting the latest templates from NuGet. I'm looking forward to using YOUR templates (docs are coming! These are fresh hot bits.)

This command adds new templates to dotnet new. You can see the expanded list here:

Templates                                     Short Name      Language      Tags

------------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
MVC ASP.NET Core with Angular angular [C#] Web/MVC/SPA
MVC ASP.NET Core with Aurelia aurelia [C#] Web/MVC/SPA
MVC ASP.NET Core with Knockout.js knockout [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js react [C#] Web/MVC/SPA
MVC ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

See there? Now I've got "dotnet new react" or "dotnet new angular" which is awesome. Now I just "npm install" and "dotnet restore" followed by a "dotnet run" and very quickly I have a great starter point for a SPA application written in ASP.NET Core 1.0 running on .NET Core 1.0. It even includes a dockerfile if I like.

From the template, to help you get started, they've also set up:

  • Client-side navigation. For example, click Counter then Back to return here.
  • Server-side prerendering. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over. THIS IS HUGE.
  • Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
  • Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.

Go and read about these new SPA templates in depth on the WebDev blog.


Sponsor: Big thanks to Raygun! Join 40,000+ developers who monitor their apps with Raygun. Understand the root cause of errors, crashes and performance issues in your software applications. Installs in minutes, try it today!


© 2016 Scott Hanselman. All rights reserved.
     

Trying out “dotnet new” template updates and csproj with VS2017

I updated my Visual Studio 2017 RC installation today. Here’s the release notes. You just run “Visual Studio Installer” if you’ve already got a version installed and it updates. The updating processes reminds me a little of how Office 365 updates itself. It’s not as scary as VS updates of the past. You can download the VS2017 RC at https://www.visualstudio.com and it works side by side with your existing installs. I haven’t had any issues yet.

New Templating Engine for .NET Core CLI

It also added/updated a new .NET Core SDK. I am a fan of the command line “dotnet.exe” tooling and I’ve been pushing for improvements in that experience. A bunch of stuff landed in this update that I’ve been waiting for. Here’s dotnet new:

C:\Users\scott\Desktop\poop> dotnet new
Template Instantiation Commands for .NET Core CLI.

Usage: dotnet new [arguments] [options]

Arguments:
template The template to instantiate.

Options:
-l|--list List templates containing the specified name.
-lang|--language Specifies the language of the template to create
-n|--name The name for the output being created. If no name is specified, the name of the current directory is used.
-o|--output Location to place the generated output.
-h|--help Displays help for this command.
-all|--show-all Shows all templates


Templates Short Name Language Tags
--------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

Examples:
dotnet new mvc --auth None --framework netcoreapp1.0
dotnet new console --framework netcoreapp1.0
dotnet new --help

There is a whole new templating engine now. The code is here https://github.com/dotnet/templating and you can read about how to make your own templates or on the wiki.

I did a “dotnet new xunit” and it made the csproj file and a Unit Test. Here’s what’s inside the csproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp1.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.0.0-preview-20170123-02" />
    <PackageReference Include="xunit" Version="2.2.0-beta5-build3474" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.2.0-beta5-build1225" />
  </ItemGroup>
</Project>

That’s not too bad. Here’s a a library with no references:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard1.4</TargetFramework>
  </PropertyGroup>
</Project>

Note there’s no GUIDs in the csproj. Sweet.

Remember also that there was talk that you wouldn’t have to edit your csproj manually? Check this out:

C:\Users\scott\Desktop\poop\lib> dotnet add package Newtonsoft.Json
Microsoft (R) Build Engine version 15.1.545.13942
Copyright (C) Microsoft Corporation. All rights reserved.

Writing C:\Users\scott\AppData\Local\Temp\tmpBA1D.tmp
info : Adding PackageReference for package 'Newtonsoft.Json' into project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
log : Restoring packages for C:\Users\scott\Desktop\poop\lib\lib.csproj...
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json 1209ms
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg 181ms
info : Package 'Newtonsoft.Json' is compatible with all the specified frameworks in project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
info : PackageReference for package 'Newtonsoft.Json' version '9.0.1' added to file 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.

Doing “dotnet add package foo.bar” automatically gets the package from NuGet and adds it to your csproj. Just like doing “Add NuGet Package” (or add reference) in Visual Studio. You don’t even have to open or look at your csproj.

I’m going to keep digging into this. We’re getting into a nice place where someone could easily make a custom template then “nuget in” that templates then “File | New | Your Company’s Template” without needed yeoman, etc.

Please shared your feedback:

Also, be sure to check out the new and growing Docs site at https://docs.microsoft.com/en-us/dotnet


Sponsor: Track every change to your database. See who made changes, what they did, & why, with SQL Source Control. Get a full version history in your source control system. See how with Red Gate’s SQL Source Control.


© 2016 Scott Hanselman. All rights reserved.
     

I updated my Visual Studio 2017 RC installation today. Here's the release notes. You just run "Visual Studio Installer" if you've already got a version installed and it updates. The updating processes reminds me a little of how Office 365 updates itself. It's not as scary as VS updates of the past. You can download the VS2017 RC at https://www.visualstudio.com and it works side by side with your existing installs. I haven't had any issues yet.

New Templating Engine for .NET Core CLI

It also added/updated a new .NET Core SDK. I am a fan of the command line "dotnet.exe" tooling and I've been pushing for improvements in that experience. A bunch of stuff landed in this update that I've been waiting for. Here's dotnet new:

C:\Users\scott\Desktop\poop> dotnet new

Template Instantiation Commands for .NET Core CLI.

Usage: dotnet new [arguments] [options]

Arguments:
template The template to instantiate.

Options:
-l|--list List templates containing the specified name.
-lang|--language Specifies the language of the template to create
-n|--name The name for the output being created. If no name is specified, the name of the current directory is used.
-o|--output Location to place the generated output.
-h|--help Displays help for this command.
-all|--show-all Shows all templates


Templates Short Name Language Tags
--------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

Examples:
dotnet new mvc --auth None --framework netcoreapp1.0
dotnet new console --framework netcoreapp1.0
dotnet new --help

There is a whole new templating engine now. The code is here https://github.com/dotnet/templating and you can read about how to make your own templates or on the wiki.

I did a "dotnet new xunit" and it made the csproj file and a Unit Test. Here's what's inside the csproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp1.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.0.0-preview-20170123-02" />
    <PackageReference Include="xunit" Version="2.2.0-beta5-build3474" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.2.0-beta5-build1225" />
  </ItemGroup>
</Project>

That's not too bad. Here's a a library with no references:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard1.4</TargetFramework>
  </PropertyGroup>
</Project>

Note there's no GUIDs in the csproj. Sweet.

Remember also that there was talk that you wouldn't have to edit your csproj manually? Check this out:

C:\Users\scott\Desktop\poop\lib> dotnet add package Newtonsoft.Json

Microsoft (R) Build Engine version 15.1.545.13942
Copyright (C) Microsoft Corporation. All rights reserved.

Writing C:\Users\scott\AppData\Local\Temp\tmpBA1D.tmp
info : Adding PackageReference for package 'Newtonsoft.Json' into project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
log : Restoring packages for C:\Users\scott\Desktop\poop\lib\lib.csproj...
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json 1209ms
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg 181ms
info : Package 'Newtonsoft.Json' is compatible with all the specified frameworks in project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
info : PackageReference for package 'Newtonsoft.Json' version '9.0.1' added to file 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.

Doing "dotnet add package foo.bar" automatically gets the package from NuGet and adds it to your csproj. Just like doing "Add NuGet Package" (or add reference) in Visual Studio. You don't even have to open or look at your csproj.

I'm going to keep digging into this. We're getting into a nice place where someone could easily make a custom template then "nuget in" that templates then "File | New | Your Company's Template" without needed yeoman, etc.

Please shared your feedback:

Also, be sure to check out the new and growing Docs site at https://docs.microsoft.com/en-us/dotnet


Sponsor: Track every change to your database. See who made changes, what they did, & why, with SQL Source Control. Get a full version history in your source control system. See how with Red Gate's SQL Source Control.



© 2016 Scott Hanselman. All rights reserved.
     

Trying out “dotnet new” template updates and csproj with VS2017

I updated my Visual Studio 2017 RC installation today. Here’s the release notes. You just run “Visual Studio Installer” if you’ve already got a version installed and it updates. The updating processes reminds me a little of how Office 365 updates itself. It’s not as scary as VS updates of the past. You can download the VS2017 RC at https://www.visualstudio.com and it works side by side with your existing installs. I haven’t had any issues yet.

New Templating Engine for .NET Core CLI

It also added/updated a new .NET Core SDK. I am a fan of the command line “dotnet.exe” tooling and I’ve been pushing for improvements in that experience. A bunch of stuff landed in this update that I’ve been waiting for. Here’s dotnet new:

C:\Users\scott\Desktop\poop> dotnet new
Template Instantiation Commands for .NET Core CLI.

Usage: dotnet new [arguments] [options]

Arguments:
template The template to instantiate.

Options:
-l|--list List templates containing the specified name.
-lang|--language Specifies the language of the template to create
-n|--name The name for the output being created. If no name is specified, the name of the current directory is used.
-o|--output Location to place the generated output.
-h|--help Displays help for this command.
-all|--show-all Shows all templates


Templates Short Name Language Tags
--------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

Examples:
dotnet new mvc --auth None --framework netcoreapp1.0
dotnet new console --framework netcoreapp1.0
dotnet new --help

There is a whole new templating engine now. The code is here https://github.com/dotnet/templating and you can read about how to make your own templates or on the wiki.

I did a “dotnet new xunit” and it made the csproj file and a Unit Test. Here’s what’s inside the csproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp1.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.0.0-preview-20170123-02" />
    <PackageReference Include="xunit" Version="2.2.0-beta5-build3474" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.2.0-beta5-build1225" />
  </ItemGroup>
</Project>

That’s not too bad. Here’s a a library with no references:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard1.4</TargetFramework>
  </PropertyGroup>
</Project>

Note there’s no GUIDs in the csproj. Sweet.

Remember also that there was talk that you wouldn’t have to edit your csproj manually? Check this out:

C:\Users\scott\Desktop\poop\lib> dotnet add package Newtonsoft.Json
Microsoft (R) Build Engine version 15.1.545.13942
Copyright (C) Microsoft Corporation. All rights reserved.

Writing C:\Users\scott\AppData\Local\Temp\tmpBA1D.tmp
info : Adding PackageReference for package 'Newtonsoft.Json' into project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
log : Restoring packages for C:\Users\scott\Desktop\poop\lib\lib.csproj...
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json 1209ms
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg 181ms
info : Package 'Newtonsoft.Json' is compatible with all the specified frameworks in project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
info : PackageReference for package 'Newtonsoft.Json' version '9.0.1' added to file 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.

Doing “dotnet add package foo.bar” automatically gets the package from NuGet and adds it to your csproj. Just like doing “Add NuGet Package” (or add reference) in Visual Studio. You don’t even have to open or look at your csproj.

I’m going to keep digging into this. We’re getting into a nice place where someone could easily make a custom template then “nuget in” that templates then “File | New | Your Company’s Template” without needed yeoman, etc.

Please shared your feedback:

Also, be sure to check out the new and growing Docs site at https://docs.microsoft.com/en-us/dotnet


Sponsor: Track every change to your database. See who made changes, what they did, & why, with SQL Source Control. Get a full version history in your source control system. See how with Red Gate’s SQL Source Control.


© 2016 Scott Hanselman. All rights reserved.
     

I updated my Visual Studio 2017 RC installation today. Here's the release notes. You just run "Visual Studio Installer" if you've already got a version installed and it updates. The updating processes reminds me a little of how Office 365 updates itself. It's not as scary as VS updates of the past. You can download the VS2017 RC at https://www.visualstudio.com and it works side by side with your existing installs. I haven't had any issues yet.

New Templating Engine for .NET Core CLI

It also added/updated a new .NET Core SDK. I am a fan of the command line "dotnet.exe" tooling and I've been pushing for improvements in that experience. A bunch of stuff landed in this update that I've been waiting for. Here's dotnet new:

C:\Users\scott\Desktop\poop> dotnet new

Template Instantiation Commands for .NET Core CLI.

Usage: dotnet new [arguments] [options]

Arguments:
template The template to instantiate.

Options:
-l|--list List templates containing the specified name.
-lang|--language Specifies the language of the template to create
-n|--name The name for the output being created. If no name is specified, the name of the current directory is used.
-o|--output Location to place the generated output.
-h|--help Displays help for this command.
-all|--show-all Shows all templates


Templates Short Name Language Tags
--------------------------------------------------------------------------------------
Console Application console [C#], F# Common/Console
Class library classlib [C#], F# Common/Library
Unit Test Project mstest [C#], F# Test/MSTest
xUnit Test Project xunit [C#], F# Test/xUnit
Empty ASP.NET Core Web Application web [C#] Web/Empty
MVC ASP.NET Core Web Application mvc [C#], F# Web/MVC
Web API ASP.NET Core Web Application webapi [C#] Web/WebAPI
Solution File sln Solution

Examples:
dotnet new mvc --auth None --framework netcoreapp1.0
dotnet new console --framework netcoreapp1.0
dotnet new --help

There is a whole new templating engine now. The code is here https://github.com/dotnet/templating and you can read about how to make your own templates or on the wiki.

I did a "dotnet new xunit" and it made the csproj file and a Unit Test. Here's what's inside the csproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp1.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.0.0-preview-20170123-02" />
    <PackageReference Include="xunit" Version="2.2.0-beta5-build3474" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.2.0-beta5-build1225" />
  </ItemGroup>
</Project>

That's not too bad. Here's a a library with no references:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard1.4</TargetFramework>
  </PropertyGroup>
</Project>

Note there's no GUIDs in the csproj. Sweet.

Remember also that there was talk that you wouldn't have to edit your csproj manually? Check this out:

C:\Users\scott\Desktop\poop\lib> dotnet add package Newtonsoft.Json

Microsoft (R) Build Engine version 15.1.545.13942
Copyright (C) Microsoft Corporation. All rights reserved.

Writing C:\Users\scott\AppData\Local\Temp\tmpBA1D.tmp
info : Adding PackageReference for package 'Newtonsoft.Json' into project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
log : Restoring packages for C:\Users\scott\Desktop\poop\lib\lib.csproj...
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/index.json 1209ms
info : GET https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/newtonsoft.json/9.0.1/newtonsoft.json.9.0.1.nupkg 181ms
info : Package 'Newtonsoft.Json' is compatible with all the specified frameworks in project 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.
info : PackageReference for package 'Newtonsoft.Json' version '9.0.1' added to file 'C:\Users\scott\Desktop\poop\lib\lib.csproj'.

Doing "dotnet add package foo.bar" automatically gets the package from NuGet and adds it to your csproj. Just like doing "Add NuGet Package" (or add reference) in Visual Studio. You don't even have to open or look at your csproj.

I'm going to keep digging into this. We're getting into a nice place where someone could easily make a custom template then "nuget in" that templates then "File | New | Your Company's Template" without needed yeoman, etc.

Please shared your feedback:

Also, be sure to check out the new and growing Docs site at https://docs.microsoft.com/en-us/dotnet


Sponsor: Track every change to your database. See who made changes, what they did, & why, with SQL Source Control. Get a full version history in your source control system. See how with Red Gate's SQL Source Control.



© 2016 Scott Hanselman. All rights reserved.
     

Playing with an Onion Omega IoT device to show live Blood Sugar on an OLED screen

arduino_lb3dg8I’ve been playing with IoT stuff on my vacation. Today I’m looking at an Onion Omega. This is a US$19 computer that you can program with Python, Node.js, or C/C++. There’s a current IndieGogo happening for the Onion Omega2 for $5. That’s a $5 Linux computer with Wi-Fi. Realistically you’d want to spend more and get expansion docks, chargers, batteries, etc, but you get the idea. I got the original Omega along with the bluetooth dongle, Arduino compatible base, tiny OLED screen. A ton of stuff to play with for less than $100.

Note that I am not affiliated with Onion at all and I paid for it with my own money, to use for fun.

One of the most striking things about the Onion Omega line is how polished it is. There’s lots of tiny Linux Machines that basically drop you at the command line and say “OK, SSH in and here’s root.” The Onion Omega is far more polished.

Onion Omega has a very polished Web UI

The Omega can do that for you, but if you have Bonjour installed (for zeroconf networking) and can SSH in once to setup Wi-Fi, you’re able to access this lovely web-based interface.

Look at all the info about the Omega's memory, networking, device status, and more

This clean, local web server and useful UI makes the Onion Omega extremely useful as a teaching tool. The Particle line of IoT products has a similarly polished web-interfaces, but while the Onion uses a local web server and app, the Particle Photon uses a cloud-based app that bounces down to a local administrative interface on the device. There’s arguments for each, but I remain impressed with how easy it was for me to update the firmware on the Omega and get a new experience. Additionally, I made a few mistakes and “bricked” it and was able – just by following some basic instructions – to totally reflash and reset it to the defaults in just about 10 minutes. Impressive docs for an impressive product.

image

Onion Omega based Glucose Display via NightScout

So it’s a cool product, but how quickly can I do something trivial, but useful? Well, I have a NightScout open source diabetes management server with an API that lets me see my blood sugar. The resulting JSON looks like this:

[  
{
"_id":"5851b235b8d1fea108df8b",
"sgv":135,
"date":1481748935000,
"dateString":"2016-12-14T20:55:35.000Z",
"trend":4,
"direction":"Flat",
"device":"share2",
"type":"sgv"
}
]

That number under “sgv” (serum glucose value) is 135 mg/dl. That’s my blood sugar right now. I could get n values back from the WebAPI and plot a chart, but baby steps. Note also the “direction” for my sugars is “flat.” It’s not rising nor falling in any major way.

Let’s add the OLED Display to the Onion Omega and show my sugars. Since it’s an OpenWRT Linux machine, I can just add Python!

opkg update
opkg install python

Some may (and will) argue that for a small IoT system, Linux is totally overkill. Sure, it likely it. But it’s also very productive, fun to prototype with, and functional. Were I to go to market for real, I’d likely use something more hardened.

As I said, I could SSH into the machine but since the Web UI is so nice, it includes an HTML-based terminal!

A Terminal built in!

The Onion Omega includes not just libraries for expansions like the OLED Display, but also command-line utilities. This script clears the display, initializes it, and displays some text. The value of that text will come from my yet-to-be-written python script.

#!/bin/sh    

oled-exp -c

VAR=$(python ./sugar_script.py)

oled-exp -i
oled-exp write "$VAR"

Then in my Python script I could print the value that would be returned into VAR and then printed with the oled-exp command line utility.

OR, I can bypass the shell script entirely and use the Python Module for this OLED screen directly and do this. Grab the JSON, clean it up because apparently the json library sucks (?), then display it.

#!/usr/bin/env python                                                                                                        

from OmegaExpansion import oledExp
import urllib
import json

site="https://hanselmansugars.something/api/v1/entries/sgv.json?count=1"
jfile=urllib.urlopen(site)
jsfile=jfile.read()
jsfile=jsfile.replace("\n","")
jsfile=jsfile.replace("/","")
jsfile=jsfile.replace("]","")
jsfile=jsfile.replace("[","")

a=json.loads(jsfile)
sugar=a['sgv']
direction=a['direction']
info="\n" + str(sugar)+" mg/dl and "+direction

oledExp.driverInit()
oledExp.clear()
oledExp.write(info)

Now here’s a pic of my live blood sugar on the Onion Omega with the OLED! I could put this to run on a timer and I’m off to the races.

The OLED Screen says "149 mg/dl and Flat"

The next step might be to clean up the output, parse the date better, and perhaps even dynamically generate a sparkline and display the graphic on the small B&W OLED Screen.

Have you used a small Linux IoT device like the Onion Omega?


Sponsor: Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release


© 2016 Scott Hanselman. All rights reserved.
     

arduino_lb3dg8I've been playing with IoT stuff on my vacation. Today I'm looking at an Onion Omega. This is a US$19 computer that you can program with Python, Node.js, or C/C++. There's a current IndieGogo happening for the Onion Omega2 for $5. That's a $5 Linux computer with Wi-Fi. Realistically you'd want to spend more and get expansion docks, chargers, batteries, etc, but you get the idea. I got the original Omega along with the bluetooth dongle, Arduino compatible base, tiny OLED screen. A ton of stuff to play with for less than $100.

Note that I am not affiliated with Onion at all and I paid for it with my own money, to use for fun.

One of the most striking things about the Onion Omega line is how polished it is. There's lots of tiny Linux Machines that basically drop you at the command line and say "OK, SSH in and here's root." The Onion Omega is far more polished.

Onion Omega has a very polished Web UI

The Omega can do that for you, but if you have Bonjour installed (for zeroconf networking) and can SSH in once to setup Wi-Fi, you're able to access this lovely web-based interface.

Look at all the info about the Omega's memory, networking, device status, and more

This clean, local web server and useful UI makes the Onion Omega extremely useful as a teaching tool. The Particle line of IoT products has a similarly polished web-interfaces, but while the Onion uses a local web server and app, the Particle Photon uses a cloud-based app that bounces down to a local administrative interface on the device. There's arguments for each, but I remain impressed with how easy it was for me to update the firmware on the Omega and get a new experience. Additionally, I made a few mistakes and "bricked" it and was able - just by following some basic instructions - to totally reflash and reset it to the defaults in just about 10 minutes. Impressive docs for an impressive product.

image

Onion Omega based Glucose Display via NightScout

So it's a cool product, but how quickly can I do something trivial, but useful? Well, I have a NightScout open source diabetes management server with an API that lets me see my blood sugar. The resulting JSON looks like this:

[  

{
"_id":"5851b235b8d1fea108df8b",
"sgv":135,
"date":1481748935000,
"dateString":"2016-12-14T20:55:35.000Z",
"trend":4,
"direction":"Flat",
"device":"share2",
"type":"sgv"
}
]

That number under "sgv" (serum glucose value) is 135 mg/dl. That's my blood sugar right now. I could get n values back from the WebAPI and plot a chart, but baby steps. Note also the "direction" for my sugars is "flat." It's not rising nor falling in any major way.

Let's add the OLED Display to the Onion Omega and show my sugars. Since it's an OpenWRT Linux machine, I can just add Python!

opkg update

opkg install python

Some may (and will) argue that for a small IoT system, Linux is totally overkill. Sure, it likely it. But it's also very productive, fun to prototype with, and functional. Were I to go to market for real, I'd likely use something more hardened.

As I said, I could SSH into the machine but since the Web UI is so nice, it includes an HTML-based terminal!

A Terminal built in!

The Onion Omega includes not just libraries for expansions like the OLED Display, but also command-line utilities. This script clears the display, initializes it, and displays some text. The value of that text will come from my yet-to-be-written python script.

#!/bin/sh    


oled-exp -c

VAR=$(python ./sugar_script.py)

oled-exp -i
oled-exp write "$VAR"

Then in my Python script I could print the value that would be returned into VAR and then printed with the oled-exp command line utility.

OR, I can bypass the shell script entirely and use the Python Module for this OLED screen directly and do this. Grab the JSON, clean it up because apparently the json library sucks (?), then display it.

#!/usr/bin/env python                                                                                                        


from OmegaExpansion import oledExp
import urllib
import json

site="https://hanselmansugars.something/api/v1/entries/sgv.json?count=1"
jfile=urllib.urlopen(site)
jsfile=jfile.read()
jsfile=jsfile.replace("\n","")
jsfile=jsfile.replace("/","")
jsfile=jsfile.replace("]","")
jsfile=jsfile.replace("[","")

a=json.loads(jsfile)
sugar=a['sgv']
direction=a['direction']
info="\n" + str(sugar)+" mg/dl and "+direction

oledExp.driverInit()
oledExp.clear()
oledExp.write(info)

Now here's a pic of my live blood sugar on the Onion Omega with the OLED! I could put this to run on a timer and I'm off to the races.

The OLED Screen says "149 mg/dl and Flat"

The next step might be to clean up the output, parse the date better, and perhaps even dynamically generate a sparkline and display the graphic on the small B&W OLED Screen.

Have you used a small Linux IoT device like the Onion Omega?


Sponsor: Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release



© 2016 Scott Hanselman. All rights reserved.
     

Exploring Wyam – a .NET Static Site Content Generator

It’s a bit of a renaissance out there when it comes to Static Site Generators. There’s Jekyll and GitBook, Hugo and Hexo. Middleman and Pelican, Brunch and Octopress. There’s dozens, if not hundreds of static site content generators, and “long tail is long.”

Wyam is a great .NET based open source static site generator

Static Generators a nice for sites that DO get updated with dynamic content, but just not updated every few minutes. That means a Static Site Generator can be great for documentation, blogs, your brochure-ware home page, product catalogs, resumes, and lots more. Why install WordPress when you don’t need to hit a database or generate HTML on every page view? Why not generate your site only when it changes?

I recently heard about a .NET Core-based open source generator called Wyam and wanted to check it out.

Wyam is a simple to use, highly modular, and extremely configurable static content generator that can be used to generate web sites, produce documentation, create ebooks, and much more.

Wyam is a module system with a pipeline that you can configure and chain processes together however you like. You can generate HTML from Markdown, from Razor, even XSLT2 – anything you like, really. Wyam also integrates nicely into your continuous build systems like Cake and others, so you can also get the Nuget Tools package for Wyam.

There’s a few ways to get Wyam but I downloaded the setup.exe from GitHub Releases. You can also just get a ZIP and download it to any folder. When I ran the setup.exe it flashed (I didn’t see a dialog, but it’s beta so I’ll chalk it up to that) and it installed to C:\Users\scott\AppData\Local\Wyam with what looked like the Squirrel installer from GitHub and Paul Betts.

Wyam has a number of nice features that .NET Folks will find useful.

Let’s see what I can do with http://wyam.io in just a few minutes!

Scaffolding a Blog

Wyam has a similar command line syntax as dotnet.exe and it uses “recipes” so I can say –recipe Blog and I’ll get:

C:\Users\scott\Desktop\wyamtest>wyam new --recipe Blog
Wyam version 0.14.1-beta

,@@@@@ /@\ @@@@@
@@@@@@ @@@@@| $@@@@@h
$@@@@@ ,@@@@@@@ g@@@@@P
]@@@@@M g@@@@@@@ g@@@@@P
$@@@@@ @@@@@@@@@ g@@@@@P
j@@@@@ g@@@@@@@@@p ,@@@@@@@
$@@@@@g@@@@@@@@B@@@@@@@@@@@P
`$@@@@@@@@@@@` ]@@@@@@@@@`
$@@@@@@@P` ?$@@@@@P
`^`` *P*`
**NEW**
Scaffold directory C:/Users/scott/Desktop/wyamtest/input does not exist and will be created
Installing NuGet packages
NuGet packages installed in 101813 ms
Recursively loading assemblies
Assemblies loaded in 2349 ms
Cataloging classes
Classes cataloged in 277 ms

One could imagine recipes for product catalogs, little league sites, etc. You can make your own custom recipes as well.

I’ll make a config.wyam file with this inside:

Settings.Host = "test.hanselman.com";
GlobalMetadata["Title"] = "Scott Hanselman";
GlobalMetadata["Description"] = "The personal wyam-made blog of Scott Hanselman";
GlobalMetadata["Intro"] = "Hi, welcome to my blog!";

Then I’ll run wyam with:

C:\Users\scott\Desktop\wyamtest>wyam -r Blog
Wyam version 0.14.1-beta
**BUILD**
Loading configuration from file:///C:/Users/scott/Desktop/wyamtest/config.wyam
Installing NuGet packages
NuGet packages installed in 30059 ms
Recursively loading assemblies
Assemblies loaded in 368 ms
Cataloging classes
Classes cataloged in 406 ms
Evaluating configuration script
Evaluated configuration script in 2594 ms
Root path:
file:///C:/Users/scott/Desktop/wyamtest
Input path(s):
file:///C:/Users/scott/.nuget/packages/Wyam.Blog.CleanBlog.0.14.1-beta/content
theme
input
Output path:
output
Cleaning output path output
Cleaned output directory
Executing 7 pipelines
Executing pipeline "Pages" (1/7) with 8 child module(s)
Executed pipeline "Pages" (1/7) in 221 ms resulting in 13 output document(s)
Executing pipeline "RawPosts" (2/7) with 7 child module(s)
Executed pipeline "RawPosts" (2/7) in 18 ms resulting in 1 output document(s)
Executing pipeline "Tags" (3/7) with 10 child module(s)
Executed pipeline "Tags" (3/7) in 1578 ms resulting in 1 output document(s)
Executing pipeline "Posts" (4/7) with 6 child module(s)
Executed pipeline "Posts" (4/7) in 620 ms resulting in 1 output document(s)
Executing pipeline "Feed" (5/7) with 3 child module(s)
Executed pipeline "Feed" (5/7) in 134 ms resulting in 2 output document(s)
Executing pipeline "RenderPages" (6/7) with 3 child module(s)
Executed pipeline "RenderPages" (6/7) in 333 ms resulting in 4 output document(s)
Executing pipeline "Resources" (7/7) with 1 child module(s)
Executed pipeline "Resources" (7/7) in 19 ms resulting in 14 output document(s)
Executed 7/7 pipelines in 2936 ms

I can also run it with -t for different themes, like “wyam -r Blog -t Phantom”:

Wyam supports themes

As with most Static Site Generators I can start with a markdown file like “first-post.md” and included name value pairs of metadata at the top:

Title: First Post
Published: 2016-01-01
Tags: Introduction
---
This is my first post!

If I’m working on my site a lot, I could run Wyam with the -w (WATCH) switch and then edit my posts in Visual Studio Code and Wyam will WATCH the input folder and automatically run over and over, regenerating the site each time I change the inputs! A nice little touch, indeed.

There’s a lot of cool examples at https://github.com/Wyamio/Wyam/tree/develop/examples that show you how to generate RSS, do pagination, use Razor but still generate statically, as well as mixing Razor for layouts and Markdown for posts.

The AdventureTime sample is fairly sophisticated (be sure to read the comments in the config.wyam for gotcha) example that includes a custom Pipeline, use of Yaml for front matter, and mixes markdown and Razor.

There’s also a ton of modules you can use to extend the build however you like. For example, you could have source images be large and then auto-generate thumbnails like this:

Pipelines.Add("Images",
ReadFiles("*").Where(x => x.Contains("images\\") && new[] { ".jpg", ".jpeg", ".gif", ".png"}.Contains(Path.GetExtension(x))),
Image()
.SetJpegQuality(100).Resize(400,209).SetSuffix("-thumb"),
WriteFiles("*")
);

There’s a TON of options. You could even use Excel as the source data for your site, generate CSVs from the Excel OOXML and then generate your site from those CSVs. Sounds crazy, but if you run a small business or non-profit you could quickly make a nice workflow for someone to take control of their own site!

GOTCHA: When generating a site locally your initial reaction may be to open the /output folder and open the index.html in your local browser. You MAY be disappointed with you use a static site generator. Often they generate absolute paths for CSS and Javascript so you’ll see a lousy version of your website locally. Either change your templates to generate relative paths OR use a staging site and look at your sites live online. Even better, use the Wyam “preview web server” and run Wyam with a “-p” argument and then visit http://localhost:5080 to see your actual site as it will show up online.

Wyam looks like a really interesting start to a great open source project. It’s got a lot of code, good docs, and it’s easy to get started. It also has a bunch of advanced features that would enable me to easily embed static site generation in a dynamic app. From the comments, it seems that Dave Glick is doing most of the work himself. I’m sure he’d appreciate you reaching out and helping with some issues.

As always, don’t just send a PR without talking and working with the maintainers of your favorite open source projects. Also, ask if they have issues that are friendly to http://www.firsttimersonly.com.


Sponsor: Big thanks to Redgate! Help your team write better, shareable SQL faster. Discover how your whole team can write better, shareable SQL faster with a free trial of SQL Prompt. Write, refactor and share SQL effortlessly, try it now!


© 2016 Scott Hanselman. All rights reserved.
     

It's a bit of a renaissance out there when it comes to Static Site Generators. There's Jekyll and GitBook, Hugo and Hexo. Middleman and Pelican, Brunch and Octopress. There's dozens, if not hundreds of static site content generators, and "long tail is long."

Wyam is a great .NET based open source static site generator

Static Generators a nice for sites that DO get updated with dynamic content, but just not updated every few minutes. That means a Static Site Generator can be great for documentation, blogs, your brochure-ware home page, product catalogs, resumes, and lots more. Why install WordPress when you don't need to hit a database or generate HTML on every page view? Why not generate your site only when it changes?

I recently heard about a .NET Core-based open source generator called Wyam and wanted to check it out.

Wyam is a simple to use, highly modular, and extremely configurable static content generator that can be used to generate web sites, produce documentation, create ebooks, and much more.

Wyam is a module system with a pipeline that you can configure and chain processes together however you like. You can generate HTML from Markdown, from Razor, even XSLT2 - anything you like, really. Wyam also integrates nicely into your continuous build systems like Cake and others, so you can also get the Nuget Tools package for Wyam.

There's a few ways to get Wyam but I downloaded the setup.exe from GitHub Releases. You can also just get a ZIP and download it to any folder. When I ran the setup.exe it flashed (I didn't see a dialog, but it's beta so I'll chalk it up to that) and it installed to C:\Users\scott\AppData\Local\Wyam with what looked like the Squirrel installer from GitHub and Paul Betts.

Wyam has a number of nice features that .NET Folks will find useful.

Let's see what I can do with http://wyam.io in just a few minutes!

Scaffolding a Blog

Wyam has a similar command line syntax as dotnet.exe and it uses "recipes" so I can say --recipe Blog and I'll get:

C:\Users\scott\Desktop\wyamtest>wyam new --recipe Blog

Wyam version 0.14.1-beta

,@@@@@ /@\ @@@@@
@@@@@@ @@@@@| $@@@@@h
$@@@@@ ,@@@@@@@ g@@@@@P
]@@@@@M g@@@@@@@ g@@@@@P
$@@@@@ @@@@@@@@@ g@@@@@P
j@@@@@ g@@@@@@@@@p ,@@@@@@@
$@@@@@g@@@@@@@@B@@@@@@@@@@@P
`$@@@@@@@@@@@` ]@@@@@@@@@`
$@@@@@@@P` ?$@@@@@P
`^`` *P*`
**NEW**
Scaffold directory C:/Users/scott/Desktop/wyamtest/input does not exist and will be created
Installing NuGet packages
NuGet packages installed in 101813 ms
Recursively loading assemblies
Assemblies loaded in 2349 ms
Cataloging classes
Classes cataloged in 277 ms

One could imagine recipes for product catalogs, little league sites, etc. You can make your own custom recipes as well.

I'll make a config.wyam file with this inside:

Settings.Host = "test.hanselman.com";

GlobalMetadata["Title"] = "Scott Hanselman";
GlobalMetadata["Description"] = "The personal wyam-made blog of Scott Hanselman";
GlobalMetadata["Intro"] = "Hi, welcome to my blog!";

Then I'll run wyam with:

C:\Users\scott\Desktop\wyamtest>wyam -r Blog

Wyam version 0.14.1-beta
**BUILD**
Loading configuration from file:///C:/Users/scott/Desktop/wyamtest/config.wyam
Installing NuGet packages
NuGet packages installed in 30059 ms
Recursively loading assemblies
Assemblies loaded in 368 ms
Cataloging classes
Classes cataloged in 406 ms
Evaluating configuration script
Evaluated configuration script in 2594 ms
Root path:
file:///C:/Users/scott/Desktop/wyamtest
Input path(s):
file:///C:/Users/scott/.nuget/packages/Wyam.Blog.CleanBlog.0.14.1-beta/content
theme
input
Output path:
output
Cleaning output path output
Cleaned output directory
Executing 7 pipelines
Executing pipeline "Pages" (1/7) with 8 child module(s)
Executed pipeline "Pages" (1/7) in 221 ms resulting in 13 output document(s)
Executing pipeline "RawPosts" (2/7) with 7 child module(s)
Executed pipeline "RawPosts" (2/7) in 18 ms resulting in 1 output document(s)
Executing pipeline "Tags" (3/7) with 10 child module(s)
Executed pipeline "Tags" (3/7) in 1578 ms resulting in 1 output document(s)
Executing pipeline "Posts" (4/7) with 6 child module(s)
Executed pipeline "Posts" (4/7) in 620 ms resulting in 1 output document(s)
Executing pipeline "Feed" (5/7) with 3 child module(s)
Executed pipeline "Feed" (5/7) in 134 ms resulting in 2 output document(s)
Executing pipeline "RenderPages" (6/7) with 3 child module(s)
Executed pipeline "RenderPages" (6/7) in 333 ms resulting in 4 output document(s)
Executing pipeline "Resources" (7/7) with 1 child module(s)
Executed pipeline "Resources" (7/7) in 19 ms resulting in 14 output document(s)
Executed 7/7 pipelines in 2936 ms

I can also run it with -t for different themes, like "wyam -r Blog -t Phantom":

Wyam supports themes

As with most Static Site Generators I can start with a markdown file like "first-post.md" and included name value pairs of metadata at the top:

Title: First Post

Published: 2016-01-01
Tags: Introduction
---
This is my first post!

If I'm working on my site a lot, I could run Wyam with the -w (WATCH) switch and then edit my posts in Visual Studio Code and Wyam will WATCH the input folder and automatically run over and over, regenerating the site each time I change the inputs! A nice little touch, indeed.

There's a lot of cool examples at https://github.com/Wyamio/Wyam/tree/develop/examples that show you how to generate RSS, do pagination, use Razor but still generate statically, as well as mixing Razor for layouts and Markdown for posts.

The AdventureTime sample is fairly sophisticated (be sure to read the comments in the config.wyam for gotcha) example that includes a custom Pipeline, use of Yaml for front matter, and mixes markdown and Razor.

There's also a ton of modules you can use to extend the build however you like. For example, you could have source images be large and then auto-generate thumbnails like this:

Pipelines.Add("Images",

ReadFiles("*").Where(x => x.Contains("images\\") && new[] { ".jpg", ".jpeg", ".gif", ".png"}.Contains(Path.GetExtension(x))),
Image()
.SetJpegQuality(100).Resize(400,209).SetSuffix("-thumb"),
WriteFiles("*")
);

There's a TON of options. You could even use Excel as the source data for your site, generate CSVs from the Excel OOXML and then generate your site from those CSVs. Sounds crazy, but if you run a small business or non-profit you could quickly make a nice workflow for someone to take control of their own site!

GOTCHA: When generating a site locally your initial reaction may be to open the /output folder and open the index.html in your local browser. You MAY be disappointed with you use a static site generator. Often they generate absolute paths for CSS and Javascript so you'll see a lousy version of your website locally. Either change your templates to generate relative paths OR use a staging site and look at your sites live online. Even better, use the Wyam "preview web server" and run Wyam with a "-p" argument and then visit http://localhost:5080 to see your actual site as it will show up online.

Wyam looks like a really interesting start to a great open source project. It's got a lot of code, good docs, and it's easy to get started. It also has a bunch of advanced features that would enable me to easily embed static site generation in a dynamic app. From the comments, it seems that Dave Glick is doing most of the work himself. I'm sure he'd appreciate you reaching out and helping with some issues.

As always, don't just send a PR without talking and working with the maintainers of your favorite open source projects. Also, ask if they have issues that are friendly to http://www.firsttimersonly.com.


Sponsor: Big thanks to Redgate! Help your team write better, shareable SQL faster. Discover how your whole team can write better, shareable SQL faster with a free trial of SQL Prompt. Write, refactor and share SQL effortlessly, try it now!


© 2016 Scott Hanselman. All rights reserved.
     

Exploring Wyam – a .NET Static Site Content Generator

It’s a bit of a renaissance out there when it comes to Static Site Generators. There’s Jekyll and GitBook, Hugo and Hexo. Middleman and Pelican, Brunch and Octopress. There’s dozens, if not hundreds of static site content generators, and “long tail is long.”

Wyam is a great .NET based open source static site generator

Static Generators a nice for sites that DO get updated with dynamic content, but just not updated every few minutes. That means a Static Site Generator can be great for documentation, blogs, your brochure-ware home page, product catalogs, resumes, and lots more. Why install WordPress when you don’t need to hit a database or generate HTML on every page view? Why not generate your site only when it changes?

I recently heard about a .NET Core-based open source generator called Wyam and wanted to check it out.

Wyam is a simple to use, highly modular, and extremely configurable static content generator that can be used to generate web sites, produce documentation, create ebooks, and much more.

Wyam is a module system with a pipeline that you can configure and chain processes together however you like. You can generate HTML from Markdown, from Razor, even XSLT2 – anything you like, really. Wyam also integrates nicely into your continuous build systems like Cake and others, so you can also get the Nuget Tools package for Wyam.

There’s a few ways to get Wyam but I downloaded the setup.exe from GitHub Releases. You can also just get a ZIP and download it to any folder. When I ran the setup.exe it flashed (I didn’t see a dialog, but it’s beta so I’ll chalk it up to that) and it installed to C:\Users\scott\AppData\Local\Wyam with what looked like the Squirrel installer from GitHub and Paul Betts.

Wyam has a number of nice features that .NET Folks will find useful.

Let’s see what I can do with http://wyam.io in just a few minutes!

Scaffolding a Blog

Wyam has a similar command line syntax as dotnet.exe and it uses “recipes” so I can say –recipe Blog and I’ll get:

C:\Users\scott\Desktop\wyamtest>wyam new --recipe Blog
Wyam version 0.14.1-beta

,@@@@@ /@\ @@@@@
@@@@@@ @@@@@| $@@@@@h
$@@@@@ ,@@@@@@@ g@@@@@P
]@@@@@M g@@@@@@@ g@@@@@P
$@@@@@ @@@@@@@@@ g@@@@@P
j@@@@@ g@@@@@@@@@p ,@@@@@@@
$@@@@@g@@@@@@@@B@@@@@@@@@@@P
`$@@@@@@@@@@@` ]@@@@@@@@@`
$@@@@@@@P` ?$@@@@@P
`^`` *P*`
**NEW**
Scaffold directory C:/Users/scott/Desktop/wyamtest/input does not exist and will be created
Installing NuGet packages
NuGet packages installed in 101813 ms
Recursively loading assemblies
Assemblies loaded in 2349 ms
Cataloging classes
Classes cataloged in 277 ms

One could imagine recipes for product catalogs, little league sites, etc. You can make your own custom recipes as well.

I’ll make a config.wyam file with this inside:

Settings.Host = "test.hanselman.com";
GlobalMetadata["Title"] = "Scott Hanselman";
GlobalMetadata["Description"] = "The personal wyam-made blog of Scott Hanselman";
GlobalMetadata["Intro"] = "Hi, welcome to my blog!";

Then I’ll run wyam with:

C:\Users\scott\Desktop\wyamtest>wyam -r Blog
Wyam version 0.14.1-beta
**BUILD**
Loading configuration from file:///C:/Users/scott/Desktop/wyamtest/config.wyam
Installing NuGet packages
NuGet packages installed in 30059 ms
Recursively loading assemblies
Assemblies loaded in 368 ms
Cataloging classes
Classes cataloged in 406 ms
Evaluating configuration script
Evaluated configuration script in 2594 ms
Root path:
file:///C:/Users/scott/Desktop/wyamtest
Input path(s):
file:///C:/Users/scott/.nuget/packages/Wyam.Blog.CleanBlog.0.14.1-beta/content
theme
input
Output path:
output
Cleaning output path output
Cleaned output directory
Executing 7 pipelines
Executing pipeline "Pages" (1/7) with 8 child module(s)
Executed pipeline "Pages" (1/7) in 221 ms resulting in 13 output document(s)
Executing pipeline "RawPosts" (2/7) with 7 child module(s)
Executed pipeline "RawPosts" (2/7) in 18 ms resulting in 1 output document(s)
Executing pipeline "Tags" (3/7) with 10 child module(s)
Executed pipeline "Tags" (3/7) in 1578 ms resulting in 1 output document(s)
Executing pipeline "Posts" (4/7) with 6 child module(s)
Executed pipeline "Posts" (4/7) in 620 ms resulting in 1 output document(s)
Executing pipeline "Feed" (5/7) with 3 child module(s)
Executed pipeline "Feed" (5/7) in 134 ms resulting in 2 output document(s)
Executing pipeline "RenderPages" (6/7) with 3 child module(s)
Executed pipeline "RenderPages" (6/7) in 333 ms resulting in 4 output document(s)
Executing pipeline "Resources" (7/7) with 1 child module(s)
Executed pipeline "Resources" (7/7) in 19 ms resulting in 14 output document(s)
Executed 7/7 pipelines in 2936 ms

I can also run it with -t for different themes, like “wyam -r Blog -t Phantom”:

Wyam supports themes

As with most Static Site Generators I can start with a markdown file like “first-post.md” and included name value pairs of metadata at the top:

Title: First Post
Published: 2016-01-01
Tags: Introduction
---
This is my first post!

If I’m working on my site a lot, I could run Wyam with the -w (WATCH) switch and then edit my posts in Visual Studio Code and Wyam will WATCH the input folder and automatically run over and over, regenerating the site each time I change the inputs! A nice little touch, indeed.

There’s a lot of cool examples at https://github.com/Wyamio/Wyam/tree/develop/examples that show you how to generate RSS, do pagination, use Razor but still generate statically, as well as mixing Razor for layouts and Markdown for posts.

The AdventureTime sample is fairly sophisticated (be sure to read the comments in the config.wyam for gotcha) example that includes a custom Pipeline, use of Yaml for front matter, and mixes markdown and Razor.

There’s also a ton of modules you can use to extend the build however you like. For example, you could have source images be large and then auto-generate thumbnails like this:

Pipelines.Add("Images",
ReadFiles("*").Where(x => x.Contains("images\\") && new[] { ".jpg", ".jpeg", ".gif", ".png"}.Contains(Path.GetExtension(x))),
Image()
.SetJpegQuality(100).Resize(400,209).SetSuffix("-thumb"),
WriteFiles("*")
);

There’s a TON of options. You could even use Excel as the source data for your site, generate CSVs from the Excel OOXML and then generate your site from those CSVs. Sounds crazy, but if you run a small business or non-profit you could quickly make a nice workflow for someone to take control of their own site!

GOTCHA: When generating a site locally your initial reaction may be to open the /output folder and open the index.html in your local browser. You MAY be disappointed with you use a static site generator. Often they generate absolute paths for CSS and Javascript so you’ll see a lousy version of your website locally. Either change your templates to generate relative paths OR use a staging site and look at your sites live online. Even better, use the Wyam “preview web server” and run Wyam with a “-p” argument and then visit http://localhost:5080 to see your actual site as it will show up online.

Wyam looks like a really interesting start to a great open source project. It’s got a lot of code, good docs, and it’s easy to get started. It also has a bunch of advanced features that would enable me to easily embed static site generation in a dynamic app. From the comments, it seems that Dave Glick is doing most of the work himself. I’m sure he’d appreciate you reaching out and helping with some issues.

As always, don’t just send a PR without talking and working with the maintainers of your favorite open source projects. Also, ask if they have issues that are friendly to http://www.firsttimersonly.com.


Sponsor: Big thanks to Redgate! Help your team write better, shareable SQL faster. Discover how your whole team can write better, shareable SQL faster with a free trial of SQL Prompt. Write, refactor and share SQL effortlessly, try it now!


© 2016 Scott Hanselman. All rights reserved.
     

It's a bit of a renaissance out there when it comes to Static Site Generators. There's Jekyll and GitBook, Hugo and Hexo. Middleman and Pelican, Brunch and Octopress. There's dozens, if not hundreds of static site content generators, and "long tail is long."

Wyam is a great .NET based open source static site generator

Static Generators a nice for sites that DO get updated with dynamic content, but just not updated every few minutes. That means a Static Site Generator can be great for documentation, blogs, your brochure-ware home page, product catalogs, resumes, and lots more. Why install WordPress when you don't need to hit a database or generate HTML on every page view? Why not generate your site only when it changes?

I recently heard about a .NET Core-based open source generator called Wyam and wanted to check it out.

Wyam is a simple to use, highly modular, and extremely configurable static content generator that can be used to generate web sites, produce documentation, create ebooks, and much more.

Wyam is a module system with a pipeline that you can configure and chain processes together however you like. You can generate HTML from Markdown, from Razor, even XSLT2 - anything you like, really. Wyam also integrates nicely into your continuous build systems like Cake and others, so you can also get the Nuget Tools package for Wyam.

There's a few ways to get Wyam but I downloaded the setup.exe from GitHub Releases. You can also just get a ZIP and download it to any folder. When I ran the setup.exe it flashed (I didn't see a dialog, but it's beta so I'll chalk it up to that) and it installed to C:\Users\scott\AppData\Local\Wyam with what looked like the Squirrel installer from GitHub and Paul Betts.

Wyam has a number of nice features that .NET Folks will find useful.

Let's see what I can do with http://wyam.io in just a few minutes!

Scaffolding a Blog

Wyam has a similar command line syntax as dotnet.exe and it uses "recipes" so I can say --recipe Blog and I'll get:

C:\Users\scott\Desktop\wyamtest>wyam new --recipe Blog

Wyam version 0.14.1-beta

,@@@@@ /@\ @@@@@
@@@@@@ @@@@@| $@@@@@h
$@@@@@ ,@@@@@@@ g@@@@@P
]@@@@@M g@@@@@@@ g@@@@@P
$@@@@@ @@@@@@@@@ g@@@@@P
j@@@@@ g@@@@@@@@@p ,@@@@@@@
$@@@@@g@@@@@@@@B@@@@@@@@@@@P
`$@@@@@@@@@@@` ]@@@@@@@@@`
$@@@@@@@P` ?$@@@@@P
`^`` *P*`
**NEW**
Scaffold directory C:/Users/scott/Desktop/wyamtest/input does not exist and will be created
Installing NuGet packages
NuGet packages installed in 101813 ms
Recursively loading assemblies
Assemblies loaded in 2349 ms
Cataloging classes
Classes cataloged in 277 ms

One could imagine recipes for product catalogs, little league sites, etc. You can make your own custom recipes as well.

I'll make a config.wyam file with this inside:

Settings.Host = "test.hanselman.com";

GlobalMetadata["Title"] = "Scott Hanselman";
GlobalMetadata["Description"] = "The personal wyam-made blog of Scott Hanselman";
GlobalMetadata["Intro"] = "Hi, welcome to my blog!";

Then I'll run wyam with:

C:\Users\scott\Desktop\wyamtest>wyam -r Blog

Wyam version 0.14.1-beta
**BUILD**
Loading configuration from file:///C:/Users/scott/Desktop/wyamtest/config.wyam
Installing NuGet packages
NuGet packages installed in 30059 ms
Recursively loading assemblies
Assemblies loaded in 368 ms
Cataloging classes
Classes cataloged in 406 ms
Evaluating configuration script
Evaluated configuration script in 2594 ms
Root path:
file:///C:/Users/scott/Desktop/wyamtest
Input path(s):
file:///C:/Users/scott/.nuget/packages/Wyam.Blog.CleanBlog.0.14.1-beta/content
theme
input
Output path:
output
Cleaning output path output
Cleaned output directory
Executing 7 pipelines
Executing pipeline "Pages" (1/7) with 8 child module(s)
Executed pipeline "Pages" (1/7) in 221 ms resulting in 13 output document(s)
Executing pipeline "RawPosts" (2/7) with 7 child module(s)
Executed pipeline "RawPosts" (2/7) in 18 ms resulting in 1 output document(s)
Executing pipeline "Tags" (3/7) with 10 child module(s)
Executed pipeline "Tags" (3/7) in 1578 ms resulting in 1 output document(s)
Executing pipeline "Posts" (4/7) with 6 child module(s)
Executed pipeline "Posts" (4/7) in 620 ms resulting in 1 output document(s)
Executing pipeline "Feed" (5/7) with 3 child module(s)
Executed pipeline "Feed" (5/7) in 134 ms resulting in 2 output document(s)
Executing pipeline "RenderPages" (6/7) with 3 child module(s)
Executed pipeline "RenderPages" (6/7) in 333 ms resulting in 4 output document(s)
Executing pipeline "Resources" (7/7) with 1 child module(s)
Executed pipeline "Resources" (7/7) in 19 ms resulting in 14 output document(s)
Executed 7/7 pipelines in 2936 ms

I can also run it with -t for different themes, like "wyam -r Blog -t Phantom":

Wyam supports themes

As with most Static Site Generators I can start with a markdown file like "first-post.md" and included name value pairs of metadata at the top:

Title: First Post

Published: 2016-01-01
Tags: Introduction
---
This is my first post!

If I'm working on my site a lot, I could run Wyam with the -w (WATCH) switch and then edit my posts in Visual Studio Code and Wyam will WATCH the input folder and automatically run over and over, regenerating the site each time I change the inputs! A nice little touch, indeed.

There's a lot of cool examples at https://github.com/Wyamio/Wyam/tree/develop/examples that show you how to generate RSS, do pagination, use Razor but still generate statically, as well as mixing Razor for layouts and Markdown for posts.

The AdventureTime sample is fairly sophisticated (be sure to read the comments in the config.wyam for gotcha) example that includes a custom Pipeline, use of Yaml for front matter, and mixes markdown and Razor.

There's also a ton of modules you can use to extend the build however you like. For example, you could have source images be large and then auto-generate thumbnails like this:

Pipelines.Add("Images",

ReadFiles("*").Where(x => x.Contains("images\\") && new[] { ".jpg", ".jpeg", ".gif", ".png"}.Contains(Path.GetExtension(x))),
Image()
.SetJpegQuality(100).Resize(400,209).SetSuffix("-thumb"),
WriteFiles("*")
);

There's a TON of options. You could even use Excel as the source data for your site, generate CSVs from the Excel OOXML and then generate your site from those CSVs. Sounds crazy, but if you run a small business or non-profit you could quickly make a nice workflow for someone to take control of their own site!

GOTCHA: When generating a site locally your initial reaction may be to open the /output folder and open the index.html in your local browser. You MAY be disappointed with you use a static site generator. Often they generate absolute paths for CSS and Javascript so you'll see a lousy version of your website locally. Either change your templates to generate relative paths OR use a staging site and look at your sites live online. Even better, use the Wyam "preview web server" and run Wyam with a "-p" argument and then visit http://localhost:5080 to see your actual site as it will show up online.

Wyam looks like a really interesting start to a great open source project. It's got a lot of code, good docs, and it's easy to get started. It also has a bunch of advanced features that would enable me to easily embed static site generation in a dynamic app. From the comments, it seems that Dave Glick is doing most of the work himself. I'm sure he'd appreciate you reaching out and helping with some issues.

As always, don't just send a PR without talking and working with the maintainers of your favorite open source projects. Also, ask if they have issues that are friendly to http://www.firsttimersonly.com.


Sponsor: Big thanks to Redgate! Help your team write better, shareable SQL faster. Discover how your whole team can write better, shareable SQL faster with a free trial of SQL Prompt. Write, refactor and share SQL effortlessly, try it now!


© 2016 Scott Hanselman. All rights reserved.
     

Docker on a Synology NAS – Also running ASP.NET and .NET Core!

Docker on Synology is amazingI love my Synology NAS (Network Attached Storage) device. It has sat quietly in my server closet for almost 5 years now. It was a fantastic investment. I’ve filled it with 8TB of inexpensive Seagate Drives and it does its own flavor of RAID to give me roughly 5TB (which, for my house is effectively infinite) of storage. In my house it’s just \\SERVER or http://server. It’s a little GNU Linux machine that is easier to manage and maintain (and generally deal with) that just chills in the closet. It’s a personal cloud.

It also runs:

  • Plex – It’s a media server with over 15 years of home movies and photos. It’s even more magical when used with an Xbox One. It transcodes videos that then download to my Windows tablets or iPad…then I watch them offline on the plane.
  • VPN Server – I can remotely connect to my house. Even stream Netflix when I’m overseas.
  • Surveillance Station – It acts as a DVR and manages streams from a dozen cameras both inside and outside the house, scanning for motion and storing nearly a week of video.
  • Murmur/Mumble Server – Your own private VOIP chat service. Used for podcasts, gaming, private calls that aren’t over Skype, etc.
  • Cloud Sync/Backup – I have files in Google Drive, Dropbox, and OneDrive…but I have them entirely backed up on my Synology with their Cloud Sync.

51FvMne3PyL._SL1280_Every year my Synology gets better with software upgrades. The biggest and most significant upgrade to Synology has been the addition of Docker and the Docker ecosystem. There is first class support for Docker on Synology. There are some Synology devices that are cheaper and use ARM processors. Make sure you get one with an Intel processor for best compatibility. Get the best one you can and you’ll find new uses for it all the time! I have the 1511 (now 1515) and it’s amazing.

ASP.NET Core on Docker on Synology

A month ago Glenn Condron and I did a Microsoft Virtual Academy on Containers and Cross-Platform .NET (coming soon!) and we made this little app and put it in Docker. It’s “glennc/fancypants.” That means I can easily run it anywhere with just:

docker run glennc/fancypants

Sometimes a DockerFile for ASP.NET Core can be as basic as this:

FROM microsoft/aspnetcore:1.0.1
ENTRYPOINT ["dotnet", "WebApplication4.dll"]
ARG source=.
WORKDIR /app
EXPOSE 80
COPY $source .

You could certainly use Docker Compose and have your Synology running Redis, MySql, ASP.NET Core, whatever.

Even better, since Synology has such a great UI, here is Glenn’s app in the Synology web-based admin tool:

Docker on Synology - Node and ASP.NET Core Apps 

I can ssh into the Synology (you’ll need to SSH in as root, or you’ll want to set up Docker to allow another user to avoid this) and run docker commands directly, or I can use their excellent UI. It’s really one of the nicest Docker UIs I’ve seen. I was able to get ASP.NET Core and the Node.js Ghost blog running in minutes with modest RAM requirements.

image

Once Containers exist in Docker on Synology you can “turn them on and off” like any service.

ASP.NET Core on Docker on Synology

This also means that your Synology can now run any Docker-based service like a private version of GitLab (good instructions here)! You could then (if you like) do cool domain mappings like gitlab.hanselman.com:someport and have your Synology do the work. The Synology could then run Jenkins or Travis as well which makes my home server fit nicely into my development workflow without use any compute resources on my main machine (or using any cloud resource at all!)

The next step for me will be to connect to Docker running on Synology remotely from my Windows machine, then setup “F5 Docker Debugging” in Visual Studio.

image

Anyone else using a Synology?

* My Amazon links pay for tacos. Please use them.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.
     

Docker on Synology is amazingI love my Synology NAS (Network Attached Storage) device. It has sat quietly in my server closet for almost 5 years now. It was a fantastic investment. I've filled it with 8TB of inexpensive Seagate Drives and it does its own flavor of RAID to give me roughly 5TB (which, for my house is effectively infinite) of storage. In my house it's just \\SERVER or http://server. It's a little GNU Linux machine that is easier to manage and maintain (and generally deal with) that just chills in the closet. It's a personal cloud.

It also runs:

  • Plex - It's a media server with over 15 years of home movies and photos. It's even more magical when used with an Xbox One. It transcodes videos that then download to my Windows tablets or iPad...then I watch them offline on the plane.
  • VPN Server - I can remotely connect to my house. Even stream Netflix when I'm overseas.
  • Surveillance Station - It acts as a DVR and manages streams from a dozen cameras both inside and outside the house, scanning for motion and storing nearly a week of video.
  • Murmur/Mumble Server - Your own private VOIP chat service. Used for podcasts, gaming, private calls that aren't over Skype, etc.
  • Cloud Sync/Backup - I have files in Google Drive, Dropbox, and OneDrive...but I have them entirely backed up on my Synology with their Cloud Sync.

51FvMne3PyL._SL1280_Every year my Synology gets better with software upgrades. The biggest and most significant upgrade to Synology has been the addition of Docker and the Docker ecosystem. There is first class support for Docker on Synology. There are some Synology devices that are cheaper and use ARM processors. Make sure you get one with an Intel processor for best compatibility. Get the best one you can and you'll find new uses for it all the time! I have the 1511 (now 1515) and it's amazing.

ASP.NET Core on Docker on Synology

A month ago Glenn Condron and I did a Microsoft Virtual Academy on Containers and Cross-Platform .NET (coming soon!) and we made this little app and put it in Docker. It's "glennc/fancypants." That means I can easily run it anywhere with just:

docker run glennc/fancypants

Sometimes a DockerFile for ASP.NET Core can be as basic as this:

FROM microsoft/aspnetcore:1.0.1

ENTRYPOINT ["dotnet", "WebApplication4.dll"]
ARG source=.
WORKDIR /app
EXPOSE 80
COPY $source .

You could certainly use Docker Compose and have your Synology running Redis, MySql, ASP.NET Core, whatever.

Even better, since Synology has such a great UI, here is Glenn's app in the Synology web-based admin tool:

Docker on Synology - Node and ASP.NET Core Apps 

I can ssh into the Synology (you'll need to SSH in as root, or you'll want to set up Docker to allow another user to avoid this) and run docker commands directly, or I can use their excellent UI. It's really one of the nicest Docker UIs I've seen. I was able to get ASP.NET Core and the Node.js Ghost blog running in minutes with modest RAM requirements.

image

Once Containers exist in Docker on Synology you can "turn them on and off" like any service.

ASP.NET Core on Docker on Synology

This also means that your Synology can now run any Docker-based service like a private version of GitLab (good instructions here)! You could then (if you like) do cool domain mappings like gitlab.hanselman.com:someport and have your Synology do the work. The Synology could then run Jenkins or Travis as well which makes my home server fit nicely into my development workflow without use any compute resources on my main machine (or using any cloud resource at all!)

The next step for me will be to connect to Docker running on Synology remotely from my Windows machine, then setup "F5 Docker Debugging" in Visual Studio.

image

Anyone else using a Synology?

* My Amazon links pay for tacos. Please use them.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.