MEAN.TS: Getting Started

Introduction

After putting aside some time to play around with MeanJS, I wanted to share my thoughts on getting my environment set up for migrating the JavaScript code over to TypeScript.

Get MeanJS running locally

My first task was to make sure I had everything needed to run the MeanJS code as-is from GitHub. I was fortunate to have all the prerequisites installed, including node and MongoDB, but if any further information is needed, the readme provides plenty of help.

To get everything running, I simply ran the following commands in the project’s directory:

$ npm install

$ bower install

$ grunt

If everything went well, you should be greeted with the following page on localhost:3000:

image

Add type definitions

Now that we know the code works, let’s get started with mixing in some TypeScript. We’ll start by automating the retrieval of type definition files:

$ tsd init

$ tsd query node --save --action install

$ tsd query express --save --action install

For more information on automatic retrieval of type definition files, refer to my previous post on the topic.

Create Visual Studio project and solution

Next I created new project and chose the option to use existing Node.js code:

image

Once I accept the options I just hit “Finish” when the wizard appears. Once the solution and project are created, you are greeted with the generated solution.

Just to test the compiler, we’ll just change article.server.model.js to article.server.model.ts and give it the following code:

'use strict';

/**
* Module dependencies.
*/
import mongoose = require("mongoose");
var Schema = mongoose.Schema;

/**
* Article Schema
*/
var ArticleSchema = new Schema({
   created: {
      type: Date,
      default: Date.now
   },
   title: {
      type: String,
      default: '',
      trim: true,
      required: 'Title cannot be blank'
   },
   content: {
      type: String,
      default: '',
      trim: true
   },
   user: {
      type: String, // Schema.ObjectId,
      ref: 'User'
   }
});

/**
* Article Interface
*/
export interface IArticle extends mongoose.Document {
   created: Date;
   title: string;
   content: string;
   user: string; //IUser;
}

mongoose.model<IArticle>('Article', ArticleSchema);

So let’s compile and… failed.

Well that didn’t go very well. My suspicion is that the compiler under Visual Studio is doing some strange things which I will need to investigate further. In the meantime, I’ll just use a gulp file similar to one discussed earlier to compile the project… and success!

Conclusion

So we hit a bit of a snag in getting the environment set up. Alongside with the compilation not working under Visual Studio, The IDE was very sluggish with the node project open. Although the node tools are still in beta, it is still quite disappointing considering that Visual Studio is my IDE of choice and would very much like to keep it that way. I will continue to work on this and hopefully come up with some more interesting points for discussion in the future.

Oh, and my first attempts will be up on GitHub as soon as I can make more substantial progress in my migration efforts.

Cheers!

Advertisements

My summer project: MEAN.TS

Now that I have spent several weeks looking into TypeScript and the MEAN stack, I have decided to spend the next few weeks to attempt and create a more complete application stack beyond a simple “hello world” application.

After looking at the various MEAN solutions out there, I chose to use MEAN.JS as a basis for the project. This is a popular option with great documentation and a growing community.

My plan from here is:

  1. To convert portions of the server-side code to TypeScript.
  2. To convert portions of the client-side code to TypeScript.
  3. To convert any remaining JavaScript code, such as tests, to TypeScript.

Over the following weeks, I will use this blog to track my progress, but also to share the challenges and topics of interest encountered. The code will be open source and available on GitHub.

This may end up as an interesting proof-of-concept boilerplate application, or as a catastophic mess. Nonetheless, I would not consider the outcome a failure, as the aim is to at gain some further insight in using TypeScript along with Node.js, Angular.js and Express.js. If others will find this journey interesting, then even better!

Now to create the fork and start coding…

Cheers!