CSCI 421 - Lecture 3

Instructor's Class Notes

1. Part 2:4 - Building a Static Site with Node and Express
• Overview
• "Part 2:4 - Building a Static Site with Node and Express" from the book covers the Loc8r app from Chapter 4 to show how to define routes, create views and controllers. Please, as part of your reading assignment and hands-on work, clone the repo from the book and work with the application on your own. The repo is here.
 
• Defining Routes
• As we have seen before, routes describe the relationship between the pages the user of the website sees and the the URLs that your website exposes for an application.
• Every application you design will start with some kind of functional layout of features. For example, your app will have a home page, maybe a search page, a contacts page, etc. If your application is an e-commerce site that sells things it will have a listings page, a product details page, etc.
  
  
• Start by figuring out the mapping of the different screens to their URL paths. You can even think of many pages grouped together in collections (more on that concept from the book).
  
  
 
• Using a "Routes and Controllers" Architecture
• Rather than utilize just routes and views that are 1:1 in nature, you may want to consider an architecture for your Express app that employs a single route along with a set of controllers for managing the relationship between URLs/pages and views, as shown as follows:
  
• Note that a single controller .js file can handle the routing to several views. The book refers to this as a collection of controllers.
• A Routes and Controllers architecture isolates your code changes placing most of your updates in a single routes file and eleviating the need to update app.js as the number of controllers and views grow with your website.
• A sample index.js that acts as a router is as follows:
  

  
  var express = require('express');
  var router = express.Router();
  var ctrlHome = require('../controllers/home');
  var ctrlContact = require('../controllers/contact');
  
  /* Setup routes to pages */
  router.get('/', ctrlHome.home);
  router.get('/contact', ctrlContact.contact);
  
  module.exports = router;                    
                      

  Note: As addtional views and controllers are added to your website it is this file alone that is updated accordingly.
• The controller code is almost identical to the router code it replaces, with the addition of it being more of a JavaScript module in its own right.
  

  contact.js - What follows is the Controller for Contact page:

  
  /* GET contact page. */
  module.exports.contact = function(req, res) {
    res.render('contact', { title: 'Contact Us' });
  };                    
                      

  Note: A single controller .js file may include multiple controllers, each with its own module.exports.<controller_name> code.
• Updating app.js to use Controller - To update app.js to use Controllers, you need only declare a variable for the route (e.g. index.js) and use that with the following additional code (including pre-existing placement of var app = express(); for reference:
  

  
  var routes = require('./routes/index');
  
  var app = express();
  
  ...
  
  app.use('/', routes);
                      

• Debugging Express - Sometimes when moving code around, developing new routes and controllers, your application can stop working. Instructions for starting an Express app in debug mode are here.
 
• Creating Views
• There is nothing special about views when using a Routes and Controller architecture. Everything that you have learned about views and the various View Engine still applies in the new architecture.
 
• Passing Data from Controllers to Views
• A controller can pass text data to a view using a name: value pair notation with the ability for the view to display and/or act on the data based in.
• For example, the title text for a contact page can be sent it via the controller as shown below in contact.js controller:
  

  
  /* GET contact page. */
  module.exports.contact = function(req, res) {
    res.render('contact', { title: 'Contact Us' });
  };                     
                      

  Note - Multiple name:value pairs may be sent, separated by commas.
• From within the view, displaying the text data passed in is relatively straightforward, though dependent on the syntax and convention of the View Engine in use. For example, here is the contact.ejs that view file in the EJS format:
  

  
  <!DOCTYPE html>
  <html>
    <head>
      <title><%= title %></title>
      <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
      <h1><%= title %></h1>
      <p>To contact us please send email to: goaway@nospam.net.</p>
    </body>
  </html>                      
                      

 
2. Using GitHub
• GitHub is the industry-leading, cloud-based source code repository. GitHub is especially powerful when used to store and get node applications like those developed using Express and the MEAN stack.
• The Manning book, "Getting MEAN", utilizes a GitHub repository with all the author's project samples. It is highly recommended you explore that repository, especially inspecting the source code available within its various branches.
• Creating a GitHub Account
1. For this course you will need to create a GitHub account if you don't already have one and use it for storing some of your labs.
2. When setting up a GitHub account make sure to set up two-factor authentication (2FA). Don't ask how to do this. Google is a wonderful thing.
3. After setting up 2FA for your GitHub account, create an access token to be used at the command line in lieu of your password by following the instructions given here. Save this access token in a secure location for future use.
• Creating a Repository for your MEAN Stack Application
1. Before publishing a local repository to a remote master for the first time, you must create that remote repository. Use the GitHub.com website and web UI for this, creating a new repository, sans the README.MD file.
2. Next you must initialize the local repository. When connected to your MEAN stack instance, at the Linux command line and within the application folder you wish to manage under GitHub source control, execute the following:
   

   
   > git init
   > git add .
   > git commit -m "First commit"                
                       

   Note: After the above is executed you have a local repository known to GIT. However, it still hasn't been published to the remote master repository.
3. Next you add the remote master repository to your local repository by executing the following from your app/local repository directory:
   

   
   > git remote add origin https://<userid>:<token>@github.com/<userid>/<repo>.git
                       

   Where:
     userid - Your GitHub userid
     token - The access token created from the step above
     repo - The name of the remote repository as supplied when you created it while on GitHub.com.
   
4. Lastly, publish the local repository contents to the master by executing the following command (and re-executing whenever you make changes you wish to publish):
   

   
   > git push -u origin master                    
                       

   If this is the first time you have published to the master repo, then feel free to go to GitHub.com and login to make sure all the expected files were uploaded and added to your repo. The files in your repo can be easily shared with others if the repo is public, and easily used by you to redeploy your code in the future.
5. You should now have a Git repository that you can use as a URL when cloning the repo into VSCode. The repository URL can be found in GitHub and has the format of: https://github.com/<userid>/<repo>.git
6. For additional info on using VSCode and GitHub see this video