The interest in the MEAN Stack (Mongo-Express-Angular-Node) seems to have peaked in May 2016 according to Google Trends. While I can imagine a multitude of reasons for this (from Anguar now being Angular4 , to mean / meanjs.org being quite out of date or the rise of other frameworks / libs like ReactJS or MeteorJS) , it's still a viable full-stack-js solution. For me, however, with one big change: MEAN-JS becomes MEAN-TS (TS = Typescript).
The use of typescript is literally exploding at the moment. Angular is now completely written in typescript. So is RxJS. The list of projects migrating is long, which is a good thing for friends of typed languages. However, for the backend-part (Mongo-Express-Node) of the MEAN stack, I haven't found a good typescript boilerplate yet. By good I mean 100% typescript, including the unit tests. So I set out to create this boilerplate. And this is what's resulted from it.
First, get the code using
git clone https://github.com/bersling/typescript-mongo-express-angular-node-seed.git project-name
cd project-name
git submodule init
git submodule update
Then, since backend and frontend are well separated through a REST-API, they are also installed separately.
To install & run the backend run
cd backend && npm install
npm start
or alternatively to npm start
, for running the tests:
npm test
The backend has good test coverage for the boilerplate code using mocha and chai. The tests are also written in typescript.
The frontend is suggested to be setup with Angular Cli. Like this you're also at Angular's newest version (Angular 2, Angular 4, Angular 5, ...). Refer to the Angular-Cli docs for more information.
In case you're not into Angular, you could also just use any other frontend architecture, since the backend is just a REST-API to consume. For example you could go with ReactJS & Redux, or no framework at all!
One advantage of using NodeJs in the backend, is that front- and backend
can share pieces of code. One example where it's pretty obvious that
sharing makes sense are the data-models. Since backend and frontend should
run independently (e.g. if you just want to send someone the backend code),
this shared code is a separate npm library. Like this, the backend / frontend
just pull the models from npm
and can run totally independently, while still
writing the code only once. Of course, having to npm version patch
and
npm publish
the models all the time in order to use them in the backend / frontend
is a bit annoying, but that's the tradeoff of modular code.
The project is split into subprojects that can be developed independently.
Those subprojects are the backend
, frontend
and
models
.
The backend is a separate git submodule and is located at backend
.
To get going, install as described above, then start a server with
npm start
or run the tests using
npm test
For further details, consult the backend repository's readme.
See Angular Cli.
Since both the backend and the frontend are using the same data-structure, the data-models are stored and maintained independently.
In order to write new models, add a new my-model.model.ts
file and
export it in index.d.ts
. Once you're done, you can npm version patch
and then npm publish
. Like this the models are retrievable by npm
in the backend- and frontend-projects, in order for them to be truly separated into their own git repos.