Wednesday, March 22, 2017

My 1st MEAN project

MEAN is A MEN
A is angular which is doing the client work.
MEN is server side implemented by Nodejs, Express and MongoDB (Mongoose). Basically use these 3 technologies to build a restful service.

To create a Nodejs project, use "npm init", then start with Express, integrate with Mongoose to access MongoDB. It is quite straight forward.

Here is a good tutorial about Nodejs and Mongoose
https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications

This youtube video teaches you how to build MEAN project step by step. It is awesome.
https://www.youtube.com/watch?v=PFP0oXNNveg&t=2226s
I basically followed the steps in this video. The only difference is that I use Angular 2 CLi to create the client angular 2 project. In the nodejs directory, I ran “ng new client”, which will generate a Angular 2 client project under the client folder.
About how to use Angular 2 Cli, here are the helpful tutorial.
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
https://www.sitepoint.com/angular-2-tutorial/
https://www.sitepoint.com/ultimate-angular-cli-reference/
https://github.com/angular/angular-cli/wiki/build

It seems we shall start two web servers, one is running angular 2. The other one is running nodejs restful service. This may bring in AJAX cross domain issue.

The best way is to run only one web server which can have both angular 2  and restful service. I run "node server.js" which can bring up the restful service. Angular2 need build from typescript to javascript. And the default build directory of Angular 2 Cli is client/dist. We have to let the express server know that.
Here is my server.js

When developing, it is convenient to let it auto-build when files are changed. Run this command in the client folder can implement auto-build.
Then run this command to restart nodejs server, when any change is detected

https://www.npmjs.com/package/nodedev
nodedev allows developers to debug node js code in chrome. Open http://127.0.0.1:7001/debug?port=7000, then I can setup breakpoints and view the variable value. https://bitbucket.org/bonbonniere/mywork/src/7efaf965a5dd0699c5002c512a1f5d1bced2de5f/nodejs/myTaskList/?at=master

Here are some other good tutorials
https://www.youtube.com/watch?v=uONz0lEWft0
https://www.youtube.com/watch?v=_-CD_5YhJTA

No comments:

Post a Comment