TypeScript and the MEAN Stack: Getting started Part 1

Introduction

Two areas that have gained my attention lately are TypeScript, Microsoft’s offering in making JavaScript more attractive for use in large-scale applications, along with the MEAN stack, a collection of open-source libraries that allows the use of JavaScript for web application development. I think it would be an interesting experiment to implement a basic MEAN stack in TypeScript instead of JavaScript.Today I will delve into what it takes to get the essentials working on a Windows development environment and create a simple project in Visual Studio.

Install the essentials

Prerequisites

There is a lot of information get the MEAN stack up and running on Linux and Mac environments and less information for Windows environments, even though the process is quite straightforward. At least for this tutorial, I assume you have a machine with some version of Windows installed, along with your favourite IDE. I have Windows 7 (Not yet ready/willing to jump to 8 yet) along with Visual Studio 2013. My plan is to start with the Node.js tools for Visual Studio (More on that below) and then move on to another IDE such as Sublime Text.

Git

Git will be used for source control. Git’s popularity can’t be ignored, and I hope to release a reasonable take sometime in the near future. Git for Windows provides all the necessary tools to get Git running on Windows, along with a nice bash shell. Despite being a sucker for Windows, I’ve always enjoyed the Unix-style commands over the command prompt.

MongoDB

MongoDB provides the data storage component of the MEAN stack. More specifically, it is a document-oriented NoSQL database. Along with the benefits of availability and scalability that we get from most NoSQL databases, all data is stored in JSON-like documents, providing a nice fit with JavaScript.

Once MongoDB is installed, we can run MongoDB as a Windows Service (Make sure you run as administrator):

$ mongod --logpath "C:\path\to\logfile" --dbpath "C:\path\to\dbdir" --install

And to remove the service:

$ mongod –remove

Node.js

Node.js is a platform that allows the development of scalable server-side applications with JavaScript. In our case, node will run the compiled TypeScript code on the server. node also comes with npm, which provides a vast collection of modules that expand on what node can provide.

Packages can be installed locally to a specific project:

$ npm install <package>

Packages can also be installed globally:

$ npm install -g <package>

TypeScript

For this tutorial, Visual Studio 2013 will be used to create and compile the project. TypeScript is available with Visual Studio 2013 Update 2. In the future, command-line tools will be used, so it’s worth installing now:

$ npm install –g typescript

Node Tools

Node.js Tools for Visual Studio is still in beta, but it provides an excellent starting point for putting together a node project, especially if you are familiar with using Visual Studio.

Create a Project

Once everything is installed, we’ll create a Basic Express Application in Visual Studio:

image

Upon generating the application, we get the following project:

image

If you’re coming from a pure .NET world, there’s some new things for you:

  • The views generated are not in html, but in Jade. Jade files will be discussed in a future post.
  • Style-sheets is not written in CSS, but in a pre-processor language called Stylus.
  • The file package.json contains information on the npm packages the project depends on.

So a few things different from a standard node/express project. Obviously, there are no JavaScript files, with TypeScript files taking their place. Another point of interest are the typing files. For each of the installed npm packages, there is a type definition file, which allows the use of the npm packages with stronger type definitions in TypeScript. A vast collection of type definitions for several popular packages can be found at the Definitely Typed website. Seeing that we are there. I grabbed the latest versions of the definition files that I will be using in the project.

I see Express

If you look at the npm packages, you can see that Express is already installed as a dependency. Express sits on top of node and provides a framework to run node as a more complete web application, including the use of views, routing, etc.

I don’t see Angular

Angular is not an npm package, but it’s a framework that will be used client-side. Since the focus has been on server-side, Angular was not discussed. Angular will get its due in a future post.

Run the application

Once the npm packages are downloaded for the project we can hit F5 and see what happens. the TypeScript files are compiled into JavaScript and we get the following in a browser:

image

Success! We have a decent starting point, but we have quite a bit ahead. This is a good a place to take a breather.

Conclusion

Today we got all the necessary tools to get a simple node/express application written in TypeScript running in a Windows environment, along with having git and MongoDB installed. In part 2, I will attempt to hook up my application with MongoDB and in part 3, get angular working on the client-side.

Cheers!

Advertisements

5 thoughts on “TypeScript and the MEAN Stack: Getting started Part 1

  1. 1) Git is not necessary. We can manually download files. Also, many npm tools are there for getting type definintions for Visual Studio. Also, the intent of tools is not given – why we have to use all these tools?
    2) Also, this article is old and TypeScript is installed with VS 2015.
    3) The link for Node.js Tools for Visual Studio is changed.
    4) The new project template of VS 2015 is changed.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s