Random Ramblings

Menu

This is the second part in my small series on ASP.NET Core and the coolest of the cool JavaScript libraries out there, except that they are probably already outdated by the time I finish writing this.

In part I we took a look on how to install npm and webpack into our ASP.NET Core project. In this part we will set up TypeScript. Visual Studio (VS) will compile TypeScript for you automatically but we will disable that feature and let webpack do the TypeScript build just for the fun of it.

Notice how package.json is updated with typescript and ts-loader. You may be wondering what ts-loader is. I know I was. It is a “TypeScript loader for webpack” which really does not say much but it is the thing that makes webpack take care of our TypeScript code.

While we are at it let’s install Knockout.js which we will use for building view models in TypeScript.

npm install --save-dev knockout @types/knockout

By using @types we tell npm to install the typings for Knockout as well. I tend to think of typings being to TypeScript what header-files are to C++. The typings go into the node_modules folder as everything else.

Next we need to create a configuration file for TypeScript. Right-click your project node in VS solution explorer and click “Add New Item”. Search for “json” in the templates dialog and choose “TypeScript JSON Configuration File”. The file must be name “tsconfig.json”. Change the contents so that it looks something like this:

Notice that I have told the TypeScript loader to put the generated .js files in the folder “wwwroot/build”, and that I have told it to resolve any 3rd party modules by using “node” (i.e. it will look in the “node_modules” folder).

Test TypeScript build
Let us test that we can build TypeScript files. By default VS will build what ever .ts files you add to the project. Start by creating af Scripts folder in your project next to the wwwroot folder. Add a TypeScript a file named “myviewmodel.ts” to the folder. We will create a Knockout view model class so start by importing Knockout to the .ts file by adding the following line at the top.

import * as ko from "knockout"

Note how VS IntelliSense kicks in as you type. Very cool. Above we set “modeResolution” to “node” so that the TypeScript loader knows to look in node_modules to find Knockout. Now lets add a view model with two observable fields using the Knockout TypeScript definitions. The last line applies the Knockout bindings to the view.

Now if you build your project in VS, you will see a new folder underneath “wwwroot/build” with the compiled .js file.

Set up the webpack TypeScript load
Instead of letting VS do the TypeScript build we want webpack to do it and we already installed ts-loader to do it for us. Why would we want to do that now that VS can do it for us? I like to do it because I prefer to keep everything front-end-ish together. So, webpack does the build, the bundling, the code splitting, etc.

Now, add a file called webpack.config.js to your project at the project root. Paste the following into the file.

This configures webpack to compile the .ts files. It also instructs webpack to take the compiled .js file and bundle it together with some other site.js file that we might have in our project and put it all into a file called bundle.js places in “wwwroot/dist”. This is the file you want to reference in your HTML files. By the way, the compiled .js files will no longer end up in the “wwwroot/build” folder so you can delete that.

Webpack build
To build and bundle, first edit your package.json so that the build block looks like this.

"scripts": {
"build": "webpack"
},

Then remove the line containing “compileOnSave” from tsconfig.json.

Finally, go to the cmd prompt and run the following npm command from your project folder.

npm run build

You should now see the file bundle.js in “wwwroot/dist”.

Of course you don’t want to go to the cmd prompt every time you have changed something in your .ts files, so we want VS to run the npm build. Fortunately, the ever-present Mads Kristensen has created a VS extension that does it for you. After installing the extension you can see the npm custom build task in Visual Studio’s Task Runner Explorer. Right-click “build” to tell VS to run the build task before or after your normal VS build.

This will add a line to the package.json file.

"-vs-binding":{"BeforeBuild":["build"]}

Cleaning up
As I said above, VS automatically picks up .ts files and builds. You don’t want that when using webpack. To disable the VS build, right-click your project in Solution Explorer and choose “Edit [your project name].csproj”. Add the following line under the <PropertyGroup> element.

Also, you might want to remove bower.json and bundleconfig.json if present, as package.json and webpack.config.js replace them. As far as I know bundleconfig.json works with another Mads Kristensen extension to bundle .js files.

Things have been moving so fast in the last couple of years when it comes to web development. The days of page refreshes on web sites are long gone. The youngsters and hipsters want ajax, animations, spinners, and what not. The JavaScript world has exploded with cool libraries and what is the newest, coolest, hottest library right now changes faster than I change my underwear (or maybe I’m just getting old, or I need to change my underwear more often).

Recently, Microsoft came out with the final release of Visual Studio 2017 (VS), and I figured now would be a good time to get my head around ASP.NET Core and all the cool JavaScript things.

The case in mind is a small intranet website that will allow the users to do some quick actuarial calculations.

Getting started
Let’s start by creating a Visual Studio ASP.NET Core project. Start Visual Studio 2017 and create a new project from the “ASP.NET Core Web Application (.NET Framework)” template. We will choose this template to make the code compatible with non-Core assemblies (the actuarial assemblies are compiled for .NET 4.5.2).

At the top of the dialog, choose which .NET framework you wish to be compatible with.

In the next dialog choose “Web Application”, and Visual Studio will set up a basic structure for your project. Among other things, Visual Studio creates a folder named “wwwroot”. This is where the files that will be published to the actual web server should be placed. Don’t put anything else such as your code in that folder.

Setting up npm
To get all the JavaScript goodness into our project, we need to install the Node Package Manager (npm). As the name implies, npm is a package manager for JavaScript. Think Nuget for Javascript kind of thing. But npm can do more than that. It can also build TypeScript with the help of webpack which is what we will do later on.

You can install npm (Node.js) through the Visual Studio installer but you should always make sure that you are running the latest version. You can also download and install from the node.js web site.

Now we need to initialize node for our VS project directory. Open a command prompt and cd to the VS project folder (the folder where the .csproj file is located).

Run the command:

npm init -y

This will initialize npm for your project with default settings. The initialization creates a file named package.json. Notice how VS automatically recognizes the file and adds it to the web project.

You might want to open the package.json file and change the name attribute to all lower case since upper case letters are not supported (I have no idea why npm init does not change it to lower case while it is at it).

Run the following command to update npm at a later time.

npm install npm@latest

Installing webpack
Next up is webpack. Webpack seems to be the Swiss Army knife of JavaScript and it looks like people are moving from things like Grunt and Gulp to webpack. Also, in my humble opinion, the webpack documentation is far better than what you will se for a lot of the other “hot and cool” open source JavaScript libraries.

We will be using webpack for compiling TypeScript and for bundling script files.

Install webpack with npm by running the command

npm install webpack --save-dev

This will save webpack as a development (not production) dependency in package.json. We will be using webpack as part of the build process, hence the development dependency. The npm install command also creates a folder named “node_modules” in your project folder with dependencies. Do not include this folder in your project.

Next
In the next part of this series we will get up and running with TypeScript.

When you are a type 1 diabetic you have to put with a lot of “expert” advice. Everybody seems to have an opinion on why you have diabetes and how you should treat it. I put together a list of the top 5 annoying comments (the actual list seems endless):

Number 5:“Diabetics can eat anything”

This is not entirely wrong. Theoretically I just have to take my insulin. But the amount of insulin is dependent on the amount of carbohydrates I eat. Everytime I eat I need to estimate the number of carbohydrates in my meal and calculate the amount of insulin I should take. This calculation depends on a lot of things like exercise, stress, inflammation, headache – you name it. If the carbohydrates reach my blood faster or slower than the insulin kicks in, or I miscalculate the amount of necessary insulin, my blood sugar can go too low (hypoglycemia – which can kill me now) or too high (hyperglycemia – which can kill me in the long run). All in all, this is an extremely difficult task and the best advice is to eat slow carbohydrates and not too many.

Number 4:“Have some cake. It won’t hurt you just this once.”

Maybe not, but if I eat a piece of cake every time someone says that to me, it will definitely hurt me (see number 5).

Number 3:“This fruit/jam/candy/lemon/cola is organic, so you can eat/drink it. It’s good for you.”

While organic food may be good for you, it still contains lots of fast carbohydrates (see number 5).

Number 2:“As long as you take your insulin, everything is fine.”

Nope, that’s not how it works. See number 5.

Number 1:“I guess you should not have been drinking all that coke!”

It is true that I was addicted to Coke (the drink that is) for several years before I was diagnosed with diabetes but type 1 diabetes is an auto-immune disease where the immune system for some reason decides to attack and destroy the insulin-producing cells in the pancreas. This has nothing to do with how much sugar you intake. It is still unclear what causes the immune system to act this way but things such as vira, intestinal diseases, and stress are being investigated – anything that weakens your immune system. Some types of diabetes are even in your genes!.

Type 2 diabetes is a bit of different story. Research shows there is a correlation between type 2 diabetes and an unhealthy way of life.