Typescript Mongo Express Angular.io Node (MEAN) Boilerplate

UPDATE: A cool project has developed out of my initial Typescript-MEAN seed!

Check it out on Github!

I was a bit shocked when I searched for Typescript MEAN (Mongo-Express-Angular.io-Node) tutorials and boilerplate code (with Angular.io I mean Angular2 or above). There is some material, but it’s pretty outdated. Of course it’s a bit unfortunate that you have to count 2015 as outdated in 2017, but that’s how it is in the frontend world. So I set out to build my own boilerplate code for MEAN (Mongo-Express-Angular.io-Node) apps that use TYPESCRIPT for many apps to come. I also wanted the boilerplate to include unit tests, so this is not something you’ll have to add later on, but can start with right away.

So basically the requirements that I had for this boilerplate were:

  • 100% typescript. Furthermore, the backend and the frontend should have shared code (e.g. data models).
  • Full coverage with unit tests
  • Support simple REST calls of the form api/v1/:resourceName/:resourceId

It turned out, that for the frontend part I didn’t have to do anything. This is because Angular2 comes with angular-cli, an always up-to-date build & scaffolding tool for your Angular apps. So in order to build the Angular part, I simply had to refer to Angular Cli. But for the backend, the Mongo-Express-Node part, a lot of setup had to be done.

In order to being able to develop independently on the frontend and the backend, e.g. if you have backend devs and frontend devs on your team, I setup the basic structure of the boilerplate like this:

typescript-mongo-express-angular-node-seed
├── .git
├── backend/
│ ├── .git
│ ├── db/
│ ├── ...
│ └── package.json
└── (frontend: just use angular cli)

So there are the two repos on the same level: backend, frontend. Additionally you could add a third repo with shared code between frontend and backend. First I have put the data models into a shared folder and published this to npm (so they could be reused from frontend and backend), but it turned out to be quite annoying since they had to be changed too often and my editor was lacking autocompletion for this workflow. Anyways, the backend and frontend  are completely separated. By completely separated I mean, the backend has it’s own git-repo. I can send my backend dev just the link to the backend repo.

The real work lies in the backend. There, we need to setup express, an app configuration, connect to mongo, build unit tests etc. The backend structure now looks like so:

typescript-mongo-express-node-backend
├── properties (gitignored)
├── dist (gitignored)
├── src/
│ ├── api/
│ ├── auth/
│ ├── config/
│ ├── db/
│ ├── logger/
│ ├── test/
│ └── index.ts
├── package.json
├── README.md
└── tsconfig.json

There are different layers, all including unit tests written with chai and mocha. So what I’d recommend you to do at this point is to just go and checkout the seed / boilerplate. You can find it at:

The README will have further instructions how to install, run & test the code. I hope this boilerplate helps you to get you started with typescript & the MEAN stack. In the following, I also append a short “Why the MEAN stack”, because knowing the why is even more important than knowing the how, but I only append it because I guess most came here because of the “how”, since the why is already well covered in other articles.

Why the MEAN stack?

Developer experience

As opposed to backend and frontend in different languages, you’ll just need to write Javascript / Typescript most of the time. This makes you a bit faster as a full-stack dev, since you don’t have to switch context that much and just need to be fluent in one language. Also, if you’ve implemented some routine in the backend, but you decide it would be better to run it in the frontend (or vice-versa), it’s much easier to migrate the code.

On the downside, with a backend in Node & Mongo, also a lot of problems can arise. Node uses the non-blocking asynchronous nature of javascript (more on that in the next section), which requires for a lot of callbacks. This makes programming harder and less linear. For example if you have java-devs in your team, they might have a hard time adjusting to this and mutter “wtf, that’s retarded” quite a few times.

Non-Blocking I/O

Node runs on a single thread and all it’s calls, for example to the mongodb, are asynchronous. This means node can have a good performance when you have thousands of requests per second. Whether you really have that or will ever have that is not mine to judge.

Conclusion

The MEAN (Mongo-Express-Angular2-Node) Stack can be the stack of choice for frontend devs going full stack. However, there doesn’t seem to be a lot of good, up-to-date and typed (typescript) boilerplate code out there for the backend part. So I set out to create & maintain this boilerplate code. Here you can find the current seed. To get the latest news check it on Twitter. Additionally, there now is a small tutorial page how to get it up & running from scratch: tsmean.com !