PROJECT: Node ToDo List

 

Brief

Aim is to create a todo list for work in my shed. This todo list will

• be cloud based
• Allow for entering and updating to do items (todos)
• Allow for completion of to do items (todos)
• Allow for different kinds of to do list (categories)
• Have a detail view with a  description for each todo
• So a todo model will have
  • name
  • description
  • completed
  • category

Stretch goal

• have some form of user authentication

My plan is to do the following:

• Create it in node.js, using express as the hosting framework and mongoDB as my database.
• My hosting solution will be heroku.
• This will be based in a large part, on the local library app. 

Setting Up

• Let’s set up a node development environment.
• I am going to work in my JavaScript Projects folder, in a folder called nodetodo
• Let’s check node version: node -v and npm version: node -v
• Then install express using the express generator: npm install express-generator -g
• Now we need to create our project (using the express generator):

express nodetodo —view=pug

• Then we can move into the directory (cd nodetodo) and install the dependencies (npm install)
• And let’s run the app for the first time:

DEBUG=nodetodo:* npm start

• This actually accesses a script in the package.json file which has been configured to call “node ./bin/www” whenever start is entered.
• Can then access it at localhost:3000
• Let’s also add nodemon. 
• Nodemon will automatically restart the server when we make changes. This is not the same as automatically refreshing the browser
• CAN I AUTOMATICALLY REFRESH THE BROWSER?
• I’ve done this before with browsersync
• But that was with a different app. 
• This was a bit tricky.
• Here’s what I did.
• I installed browsersync:

npm i -D browser-sync

• Then set up the config files:

browser-sync init

• Then edited app.js by adding this code: 

var port = process.env.PORT || ‘8000’; 

app.listen(port, listening);

function listening () {

  browserSync({

    proxy: ‘localhost:’ + port,

    files: [“**/*.css”, “**/*.pug”, “**/*.js”]

  });

}

• https://ponyfoo.com/articles/a-browsersync-primer

Setting up the database

• Next step is to set up the database
• This is a bit of a change for me, as it’s a non-relational database.
• We’re going to use Mongoose as our Object Data Model/ Object Relational Model. 
• This maps the database into JS objects that we can make use of.
• Bit of a cost in performance. 
• Mongoose – a front end to MongoDB
• MongoDB is an open source NoSQL database.
• It has a collection of documents (e.g.  a table of rows).
• So what kind of objects do we want to have? And what kind of information should each have?
• todo: 
  • todo_name: String
  • todo_description: String
  • category: Category, 
  • completed: Boolean
  • url: String
  • 0..* to 0..*
• category:
  • category_name: String
  • url: String
• Next step: install mongoose: npm install mongoose
• Then let’s get set up with MongoDB
• From the home screen (home):
  • Click create a cluster
  • Select any free tier available product
  • Click create cluster
  • Then in the collections section – add my own data
  • Create database
  • Give it a name -> NAME
  • Give the collection a name
  • Create the database
• Then we can click connect to cluster0
  • Allow access from anywhere
  • Add Ip address 0.0.0.0/0
  • User kheggart, Bentley3000!
  • Choose a connection method 
  • Connect your application
  • Copy the connection string
  • Connection String: 

mongodb+srv://kheggart:Bentley3000!@cluster0.tum4j.mongodb.net/nodetodo?retryWrites=true&w=majority

• Now we need to set up our app to talk to it