MEAN Todos app

This is sample app that use MEAN stack. ExpressJS, ExpressJS body parser, MLab,

You need to setup mLab db and fill dbusername and pwd in ./routes/todos.js:6 !!

• start server with node server
• compile frontend with npm run tsc:w

Structure:

client/ -frontend ng2 app using typescript, systemJs

routes/ - routes defined routes/index.js - defined what happens when <baseURL>/ url was hit routes/todos.js - defined what happens when <baseURL>/api/v1 url was hit and all other API calls such as GET /todos, PUT /todo/:id,...

views/index.html - index.html is defined here. It starts frontend ng2 app (see <my-app>Loading...</my-app> and necessary imports)

.bowerrc - file needs to be modified to change bower_components downloaded location

server.js - basic 'server' file that defines expressjs, bodyparser, routes, inicialize frontend(static content) folder and starts server

Notes during development:

• project based on expressjs, nodejs and angular 2 on frontend
• express server setup - commit
• mLab (mongo lab)
  • create account on mLab
  • on dashboard create new deployment and select AWS(cloud provider), single node, Sandbox and dbname: meantodos and confirm
  • open database > users and add db user. Remember user + pwd.
  • copy mongodb URI for example mongodb://<dbuser>:<dbpassword>@ds145659.mlab.com:45659/meantodos into todos.js - see commit
  • add collection todos and open it
  • click to Add document and pass this code there:

  {
     "text": "Finish Todo app",
     "isCompleted": false
  }
  

and click to create and go back and repeat last step with with

{
    "text": "Meeting with client",
    "isCompleted": false
}

• API get todo collection and todo with :id parameter - see commit
• API save/update/delete - see commit
• create client folder a initialize front end part of app - see commit and fix
• install bower globally npm i -g bower and setup folder - see commit
• install bootstrap bower install bootstrap --save and include it in head of index.html

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

and in body:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

• During local development we can start typescript compiler in watchmode npm run tsc:w
• Prepare template
• (FE) Display todos using our local server api - see commit
• (FE) Save todo using our local server api - see commit
• (FE) Update todo using our local server api - see commit
• (FE) Delete todo using our local server api - see commit