Tag Archives: Visual-Studio-Code

Launching your first webapp in Visual Studio Code through Gulp

I figured it’s about time I get a little more experienced with AngularJS. I want to create a website for my project VSDiagnostics and I plan on working with this technology at my internship, so it’s time to jump on the hype train.

What you’ll read here is just a quick overview of setting up gulp and Visual Studio Code to get your first AngularJS app working.

Download Visual Studio Code

This is our editor of choice. If you prefer to use something else then that’s fine — anything that can write plain text files is fine, really. I would suggest Notepad++ or Sublime Text as an alternative.

Visual Studio Code

Install NodeJS

The Node Package Manager (npm) will help us retrieve all the dependencies we’re interested in. Likewise, if you ever want to add a NodeJS backend — this will be needed.

Create a directory structure

I created my folder structure like this:

Write code

I’m working through a book on AngularJS myself so the little bit of AngularJS code here is just the first two examples shown in that book. It’s a simple demonstration of model-binding — a powerful feature of the AngularJS framework.

Once all this is done, I bet you’re interested to see what we just created. However if you’ll look around in the Visual Studio Code IDE, you’ll notice that there is no ‘run’ button or anything similar to it.

What there is, however, is a possibility to run a ‘task’. It might be best explained on the official documentation:

Lots of tools exist to automate tasks like building, packaging, testing or deploying software systems. Examples include Make, Ant, Gulp, Jake, Rake and MSBuild.

These tools are mostly run from the command line and automate jobs outside the inner software development loop (edit, compile, test and debug). Given their importance in the development lifecycle, it is very helpful to be able run them and analyze their results from within VS Code.

Here you can use whichever you like most (and is appropriate). I personally decided on Gulp for no particular reason: it’s a funny word and I vaguely recall using it in a class some time ago.

Running a task

In order to start a task (which in our scenario will consist of simply firing up our browser with the app we’re creating), you have to search for it. In VS Code, pres the key combination [Ctrl] + [Shift] + [P]. If you now search for ‘run task’, you will notice that it gives you the option to choose “Tasks: Run Task”, but with nothing to select from the dropdown menu.

In order to create our task, we have to get started with Gulp first. With Gulp we will define our task after which it will be available to us in the beforementioned dropdown menu.

Initializing package.json

Package.json is essentially your npm configuration. It contains metadata about your application like name, version, author as well as dependencies, files, etc. You could do without it but that would mean our dependencies wouldn’t be saved along with the application (and I do like that)!

In order to do so, issue the following commands:

You will now have to enter some information to setup the package.json file and after that we can get started (and finished) with Gulp.

Installing Gulp

We need two Gulp-related packages to do what we want it to do: Gulp and Gulp-Open. The first one will provide the general Gulp environment while the second one will provide a way for us to open the browser.

The following commands will install these packages:

Setting up gulpfile.js

Now it’s time to create our Task. In order to do so, go to your project’s root folder (in my case: \Examples\) and create a new file called gulpfile.js.

Afterwards, add the following contents:

What it does is simple: create a new task called ‘default’ and make it open the app.html file. This will prompt you for the default program to open .html files with (if you didn’t have that set already) and subsequently open it with that program.

Launching the browser

The last step is simply executing the given task. You have two options here: either you use the beforementioned [Ctrl] + [Shift] + [P] method which will spawn a second window with some console output, or you simply enter $ gulp in the command prompt at the location of your gulpfile.

This will give you an output that resembles this


and also opens app.html in your favorite browser.

Share on FacebookTweet about this on TwitterShare on LinkedInShare on TumblrShare on Google+Share on RedditFlattr the authorDigg this

Hello Linux!

Like many other .NET developers I have been following the Build conference that’s going on right now. One of its biggest announcements (so far) was the release of Visual Studio Code and the accompanying CoreCLR for Linux and Mac. It sounds nice and all but I wanted to try this out myself. I have decided to get a Console Application working in Ubuntu 14.04 since we’ve all seen by now how to deploy an ASP.NET web application. While reading this post, keep in mind that I have basically never used Linux so it’s possible I took hoops that shouldn’t have been taken. In case I did, leave me a comment so I can learn from it. Note that in this blogpost I will be using the Mono runtime and not the .NET Core one. At the time of writing there was only documentation available for the former however you can always get started with .NET Core here.

One of the things I am pleasantly surprised with is that there are several Yeoman templates available to create a solution structure. Whereas Visual Studio does that for you, it would have been a serious pain to have to do this yourself each time you create a new project in Visual Studio Code.

Without further ado, let’s get to it!

The setup

I installed Ubuntu 14.04 on an old laptop, which means it’s an entirely fresh installation. If you have already been using Linux and/or Mono then you probably know what steps you can skip.

We start by following the instructions here. You can see that we follow the ASP.NET documentation even though we’re building a Console Application: the setup for either is very, very similar with just about two commands differently.

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF

echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list

sudo apt-get update

sudo apt-get install Mono-Complete

Afterwards it’s time to install the DNVM. For more information about the .NET Version Manager you can take a look here (Github) and here (MSDN).

curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh

Next up is NodeJS. This will allow us to install Yeoman and in turn generate the project templates.

sudo apt-get install nodejs

sudo apt-get install npm

One problem I had here was that there was a naming conflict between node and nodejs which are apparently different packages. This is solved by executing

sudo apt-get install nodejs-legacy

Creating the solution

Afterwards create your own directory where we store our project. I did this in $HOME/Documents/code/yo-aspnet.

Now that we have this we can generate our project structure by first installing yo:

sudo npm install -g yo

and subsequently the generator:

sudo npm install -g generator-aspnet

When this is done, it’s time to pick the kind of project template we want to generate. Start yo


and you will be prompted to select the kind of application you’re interested in. You should see a screen like this:

Choosing the solution template
Choosing the solution template

Use the arrows keys to select “Console Application” and press enter. Give your project a name (in my case: “HelloWorld”) and everything should now have been created:

Console solution is generated
Console solution is generated

Notice how it’s a very minimal template and only consists of a gitignore, a main class and the project configuration file. There is no assemblyinfo, no bin/obj folders, no app.config, etc.

More information about the generator can be found here.

Installing Visual Studio Code

Time to get that new editor up and running!

Go to https://code.visualstudio.com and download the zip file. Navigate to your Downloads folder and create a folder which will hold the unzipped content. I just left this in Downloads, you might as well put this elsewhere (which you probably should if you use Linux properly).

mkdir VSCode

unzip VSCode-linux-x64.zip -d VSCode

cd VSCode

And start the editor with


Here’s one tricky thing: if you now look at Visual Code, there’s a good chance you’re seeing something like “Cannot start Omnisharp because Mono version >=3.10.0 is required”. When you look at your own installed Mono version (mono --version) you’ll notice that you have 3.2.8 installed. Likewise if you now try to execute the HelloWorld app, you will receive TypeLoadException errors.

Luckily this can be easily solved: install the mono-devel package. This will overwrite your installed Mono with version 4.0.1 which is released just yesterday and everything will work flawlessly.

sudo apt-get install mono-devel

Executing the Console application

There’s just one last thing left to do: create a .NET execution environment and execute our app.

First create a default execution environment:

dnvm upgrade

and execute the app (from the directory where Program.cs is contained):

dnx . run

You should now see Hello World printed out!

Hello World!
Hello World!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on TumblrShare on Google+Share on RedditFlattr the authorDigg this