Let’s shave this yak

I was quite optimistic when i cloned the MEAN starter pack in order to use it for the purpose of my project. I don’t have professional experience with git but I already tried a bit and wasn’t expecting problems here. It is so usuall, that this is this where my problems started… I had to learn a bit about git forking in order to have updates from the starter owner as he checks in bugfixes and extensions. Firstly I have reorganized things a bit and that resulted in quite a mess when trying to pull something from the original repo.

Let’s assume the origin is at github under originUrl. You want to fork this repository and work on it still being able to pull from the origin, then the following pattern will suit your needs:


#so first we clone the origin
git clone originUrl
cd originUrl

#the origin will now be refered to as upstream
git remote add upstream originUrl

#we would like to set up our own origin, so let's remove the old one
git remote rm origin

#now that's our new origin
git remote add origin newOriginUrl
git push origin

#since we keep the base repo as upstream remote we can now do
git pull upstream master

Basically this is what I had to do with my repo to get one bugfix and to not miss another ones in the future. It’s so easy when you know how…

What I didn’t like about the organization of this starter is that the server side stuff like: mongodb models and Express routes, are written in pure JavaScript. If TypeScript is our choice for scripting why the heck wouldn’t we involve it in this part as well? I can imagine having classes and types may come handy when speaking about data modeling in code.

In order to enable TypeScript on the server side, or rather enable Visual Studio Code to give me a hand on TypeScript coding (like intellisense), I had to modify a bit the configuration. First I needed to update my tsconfig.json to take our server side part of the directory into account. This resides in the ./app folder so I had to include TypeScript files from there. Like that:

"filesGlob": [
 "./app/**/*.ts"
]

Next one was gulp, which in this starter is responsible for the server side build. To be honest, since for now everything was done in pure javascript, there was no need for some sophisticated build system, except a documentation build process, which has been implemented with this tool by the author. New gulp task to compile TypeScript files on the fly while content is updated was added to the gulp pipeline. So that now when you ‘gulp serve’ you get Express server started and files are watched for changes so that when they occur, the TypeScript files are compiled and serwer is restarted. Without going much into details, more or less like that:

function() {
 var tsProject = ts.createProject(path.resolve('./tsconfig.json'));
 return gulp.src(path.resolve('./app/**/*.ts'))
 .pipe(ts(tsProject))
 .js
 .pipe(gulp.dest(path.resolve('./app')))
}

Finally I was able to start working on the server side with TypeScript, so I started with an example data model for mongo. The javascript module for MongoDB is called ‘mongoose’ and I had to install type definitions for those two modules. There’s another JS module to help you with that called typings which make it as easy as ‘typings install …’. So few minutes later I already had all typings installed and I could start with data model coding.

As soon as I had everything tied up together and ready to start coding, I realized it’s time to sleep. What a pity…

I decided to go this MEAN way mostly for angular 2 and I just can’t wait to put my hands on that, but first, I have to shave this yak…

 

Leave a Reply

Your email address will not be published. Required fields are marked *