Building a “front-end build pipeline” from a C# devs perspective - Part 2

In the previous post, we looked at how we can use Gulp to run tasks for us. And in that post we used it to create tasks for transpiling LESS and TypeScript into CSS and JavaScript. But the example was very small and simple. It only contained 1 LESS file and 1 JavaScript file. But what if we have more than 1? Well, that’s when we need to start bundling the files together, and potentially minify them so that they are faster to download. Luckily, this is a piece of cake to do using Gulp. So in this post, we will have a look at how to do that, as well as how to get some TypeScript/JavaScript tests thrown in there as well.

Dislaimer: The solution will still be VERY small and simple. But at least it will be made big enough to be able to use bundling and minification. Which to be honest just means that we need more than one file of each type…

I assume that you have read the last post, and that if you are following along on your machine, you will need to be done with everything that was done in that post…

More...

Building a “front-end build pipeline” from a C# devs perspective - Part 1

I started building web-based software professionally around year 2000, just before the big IT crash in Sweden. It started out being just hacing together HTML, mostly using tables, and a little JavaScript. But slowly evolved into building ASP applications with VB Script and COM-components in VB. Since then, I have been in and out of the webdevelopment scene a whole bunch of times, and very little has changed. It is still HTML/CSS/JavaScript over HTTP…

Yes, on server-side there have been some changes. First an abstraction into WebForms, and then back to MVC. And to me, ASP.NET MVC is pretty similar to classical ASP in many ways. But the front end has pretty much stayed the same. It is still good ol’ HTML and JavaScript…and CSS of course. However, having been away from it for a little while now, coming back I realize that the scene has changed. A lot… Yes, the languages are unfortunately the same, but the methods have changed a lot.

The thing that has changed the most is that we are using MUCH more JavaScript and CSS. MUCH more. And that creates new requirements. Requirements like bundling and minifying, as well as testing even our front-end code. And in a lot of cases, we are authoring our code in other languages and have them “compiled”, or “transpiled”, into JavaScript and CSS, to make up for their “shortcomings”. Whether it be using CoffeScript or Dart for you JavaScript, or LESS or SASS for your CSS, it needs processing before we can use it… And this new way of building things has created the need for a front-end build pipeline… At least if you want to be really productive.

More...

Error handling in express

In my last post, I gave an introduction to using express to serve up your HTTP content to users. It walked through most of the features needed to get started, but there was one thing that was missing, but still very important, and that is error handling. However good you are at coding, you will get errors. It will obviously not be your fault, but you never know what the user manages to do… ;)

So it is definitely important for us to handle errors in a graceful way. Luckily, this is pretty simple to do… But first, we need to create a simple express-based webserver to work with…

More...

Introduction to the node.js module express.js

My last post covered module loading in node…or at least try to cover the basics in an understandable way… This time, it is time to create something a bit more useful, a proper web application, using a module called “express”. And instead of me talking a whole lot about what I am about to talk about, let’s just get into it…

The first step is to install express. This is done using the NPM as always. The only thing to really decide is whether or not you want to install it globally using the -g parameter, or just locally. Me, I am just going to do it locally, so I use the following command

npm install express

If you install it globally, you can use express to create a “skeleton” application by running the following command

express -s -J <folder name>

This will give you a fullblown express app to start working with. But as I intend to explain the basics, I will start from scratch, and thus just install express to begin with.

More...