Thor Knows IT

Six Resources for Modern .Net development

Introduction

I realized when I was working on the last post that there are a number of resources I take for granted that may benefit people just getting started. These resources include SDKs, Platform Documentation, Tools and Expert Training.

SDKs and Documentation

These links will get you the information you need to get started with Microsoft's latest cross platform framework. 

• http://dot.net/core   - Software Development Kits provide you with the code and documentation needed to get the most out of the platform they support.
• http://asp.net/core - Documentation and additional resources for web developers that want to use Microsoft's latest version of Asp.Net

Tools

There are two code editor's that I use. They can both be found at the following site: https://visualstudio.com

Visual Studio Code is the light weight option. Visual Studio IDE requires payment but provides enhanced debugging and an exhaustive list of extensions.  There are multiple versions of the full Visual Studio IDE with comparisons available at the link provided previously.

Training

The following sites have been invaluable for providing up to date content about our chaotic world of software development:

• https://mva.microsoft.com Microsoft's Virtual Academy - this is a mix of free and paid content well worth bookmarking
• https://pluralsight.com - a paid service with free trials - The author's on this site are some of the most famous and talented in the industry. It combines video training with the ability to sign up for a mentor if you need it.
• https://www.packtpub.com/application-development/c-7-and-net-core-cookbook - a great book by a friend of mine: Dirk Strauss. He is in the process of writing another book about .Net Core. I will be writing more about who my favorite authors are and their books.

Don't forget to follow me on twitter: @thorckjr

Seven Steps Asp.Net Core 2.0 ThemedExample

Asp.Net Core 2.0 CLI with Angular and Bootswatch

Bootstrap's The Problem

My daughter really hated the default theme for Bootstrap that I had used on a site for her. She said it was boring and did not have enough color for her. I don't normally mess with the appearance of a site unless there are complaints. My strength is making them functional, everything from the interface to the database. What I found out was there is a ton of conflicting information about how to hook Bootswatch (Bootstrap themes) into a .Net Core cli Angular template.

I was frustrated and was not sure where the problem was. I kept getting errors about not being able to load a module. Is it TypeScript, Angular, WebPack? What's going on? I found a solution that worked for me. I doubt it is the best or if it will work with the next build of the .Net Core Cli. The seven steps that follow include screenshots that take you from dotnet new to a Bootswatch Yeti themed Angular application sample on .Net Core 2.0.

Before

This is what the site looks like before adding the theme.

 

Step 1

Use the .Net Core 2.0 CLI to generate the Angular SPA template. If you don't have a directory to hold your projects create it. I already had a folder like this called AngularProjects.  "themedexample" is the name of my project you can name yours whatever you want and just replace themedexample with your new project name.

1. Use the command prompt to navigate to the folder you want your project created in. 
2. type: dotnet new angular -n themedexample
3. Hit Enter
4. Ignore the instructions to run npm install at this point.

Step 2

Open the themedexample folder that was created in your code editor. You need to update the package.json and add an the following entry for bootswatch after the bootstrap entry: "bootswatch": "3.3.7" make sure you add a comma after the entry.

Step 3

Now you run npm install. The reason I had you wait is because you would have to run it again after adding the entry for bootswatch. When you run it the console should look like this.

Step 4

We are getting closer. This next step involves updating the webpack.config.js file so that it knows how to handle the font references in bootswatch. Add a comma then the following line to end of the rules section: { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'file-loader' }

 

Step 5

Update the webpack.config.vendor.js file. This is how webpack will know where to find the bootswatch  Add this after the bootstrap entry: 'bootswatch/yeti/bootstrap.css' and once again, do not forget to add a comma after this entry.

Step 6

The next command runs webpack and publishes your site locally.

1. Type: dotnet publish
2. Hit Enter

Step 7

Final step. In the console type the following:

1. Type: dotnet run
2. Hit Enter

After

This is after the theme has been applied.