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

One thought on “MEAN.TS: Getting Started

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