3x0pandemic / introjs-todo Goto Github PK

This simple web application implements a To Do application with both back end and front end components.

This application was written to provide a short tour of full stack web development with some of the core technologies and processes involved.

• A "Back End" that runs on the server (NodeJS, Express, & EJS)
• A "Front End" framework to help show our app in the browser (ReactJS)
• A database to "persist" or store the clients data (MongoDB)
• A cloud based deployment so our app is usable by anyone on the web (Heroku)
• Test code (mocha)
• A Continuous Integration and Test that automatically tests our code (TravisCI)

This process should work on most Macs, Windows, and Linux machines.

Install NodeJS, preferably the Current version (6.5+). Install MongoDB.

In a console, start up the MongoDB database.

sudo mongod

Leave the mongo database running in the previous console. In another console, change to the directory of this project and execute:

npm install
npm start

The above console should say "listening on this port: 3000". You should now be able to visit http://localhost:3000/. The web app displays a simple message "Hello World" followed by a simple form where you can type in a name, a description, and a date for each "todo", with a Submit button.

This document won't go into details. Consider it like a bus tour of London. The tour guide will just describe some things as we drive on past. But if you want to really see anything, you'll need to get off the bus and study it.

This application runs on a server using NodeJS and ExpressJS using EJS (Embedded JavaScript) as a templating engine to help connect the data on the server to the web browser.

NodeJS is a JavaScript environment, separate and independent of the JavaScript environment that runs on the browser. This environment provides a way to connect multiple modules of JavaScript code together using NPM, or the Node Package Manager.

You can take a quick peek at all of the packages used in this web app by typing in the console:

npm list

The listing will look something like the following:

[email protected] /Users/harold/prj/mtcode/introjs-todo
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected]
│ │ │   └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected]
│ │ │   ├── [email protected]
│ │ │   └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├── [email protected]
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ ├─┬ [email protected]
  │ │ └─┬ [email protected]
  │ │   ├── [email protected]
  │ │   └── [email protected]
  │ └─┬ [email protected]
  │   ├── [email protected]
  │   ├── [email protected]
  │   ├── [email protected]
  │   ├── [email protected]
  │   ├── [email protected]
  │   └── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ └── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  └── [email protected]

The main dependencies start closest to the left, such as chai, mongoose, mocha, express, and ejs. The others are packages needed by the main dependencies and so forth. Peek at the package.json file and see if you can find where the top level dependencies are described.

NodeJS by itself has some capacity to act as a server, but the ExpressJS library provides much more utilities to listen for communication requests from any browser that is able to reach the process (using Internet protocols).

If you want to peek under the hood to see the "back end" code, it starts in server.js.

The Front End framework we're using is ReactJS. This is a powerful framework that uses JavaScript to help describe and update the user interface.

Front End development usually depends HTML, CSS, and using JavaScript to update the HTML elements as they are displayed in the browser. There are other front end frameworks than ReactJS. All the powerful front end frameworks take advantage of the JavaScript capability of all browsers to help make the browser display dynamic and adaptive.

One of the appealing aspects of ReactJS is that it allows JavaScript to embed HTML within it. You can see the HTML embedded in the JavaScript in the files public/app.js and public/workingApp.js.

All useful applications need a way to store data in a way that the data won't get lost. Modern applications tend to use databases for this function, and there are many varieties of databases.

This application uses a "document" database called MongoDB. Databases are a very large topic, but for this application we have only one "collection" of data, which is the collection of todo's. Each todo has a name, a description, and a due date. You can see how this is set up in models/todo.js.

Although the application can run on your local machine, if you want to make the web application available to the general public you usually will want to "deploy" the app through some service. Heroku provides a cloud platform for deploying and running modern apps using a container system.

The app has already been deployed on heroku here: https://introjs-todo.herokuapp.com

If you want to experiment deploying this app through Heroku, you can do it free although you will have to provide a credit card to provision a MongoDB database. Follow the Getting Started on Heroku with Node.js tutorial to get an introduction to deploying with Heroku.

It is good to be able to test your code. We have tests in the file test/TodoTest.js. These tests have been written with MochaJS and the ChaiJS assertion library. Mocha provides a test harness that can run in NodeJS. It helps us make sure the code we write does what we expect it to, and to let us know if it stops doing that.

A good practice for software development teams is [Continuous Integration)(https://en.wikipedia.org/wiki/Continuous_integration). Continous Integration allows software to be packaged and built, and sometimes deployed, whenever a code change is made. The mocha/chai tests will get run any time our code base is changed, and it can send out emails to make sure someone will fix it right away.

We have used the free TravisCI platform to test this project whenever checkins are made. You can see the current state of our project at this URL. https://travis-ci.org/Montana-Code-School/introjs-todo