nawafi / mustache_lab

Express! Mustache!

Lab

Part 1 - Setting up node

1. In terminal go to the express-app directory.
2. Run npm init (hit enter a bunch of times to accept the defaults and see the new package.json file)
3. Run npm instal express --save. (The --save option adds the module as a dependency in your package.json file. This allows anyone looking at your app (i.e. a dev team member) to be able to see what your app is "made of" and if they clone your app and run npm install all dependencies will be installed.)
4. Run npm install mustache-express --save

Take a look at the package.json file. Express and Mustache-Express should be included as dependencies:

"dependencies": {
  "express": "^4.15.3",
  "mustache-express": "^1.2.4"
}

Note:

If you accidentally install an incorrect package use npm uninstall [PACKAGE NAME GOES HERE] --save

Part 2 - Setting up the App

Lets start working in index.js to set up our app's structure. (There are lots of new steps here so key words will be highlighted to help.)

1. First require your packages (express and mustache-express).
2. Require the packages module.
3. Define your port.
4. Define your app using the express dependency you defined earlier.
5. Set your app engine to use mustache-express.
6. Set your app view engine to html.
7. Set your app views directory.
8. Tell your app to use the public directory as static.
9. Tell your app to listen on your port.

Part 3 - Routing in Express

Time to set up our routes! Here is a reminder of what a route looks like:

app.get('/', function(request, response){
  res.render('index', {
    title: 'Sending Data',
    text: 'This data can be used by mustache in the view!'
  });
});

Lets go over what is going on here:

• You are telling the app that when it receives a get request to the path / it will preform an action.
• This action is defined by an anonymous function that is taking two parameters:
  • The request.
  • The response.
• You are then telling the response to render a view. Earlier we told the app to look for views in the views directory. Since we are passing 'index' as an argument, it will find the index.html file to render.
• We are also sending a data object with the render. This object will be passed through to the template engine (which we set up to be mustache-express earlier). The data then can be used in the view to render the information we provide (we will get to that in part 4).

Feel free to look at the express docs to learn more!

• Basic Routing
• Static Files
• API Reference

Using this information, lets set up a couple routes.

1. Set up your root (/) get route

   • This route should render the index view
   • it should pass all of the packages to the view with the render

2. Create a get route for the root with an id parameter (/:id)

   • this route should render the show view
   • it should pass only the package with the id that matches the route's parameter

3. Go to localhost:[YOUR PORT HERE] to see if your index.html renders.

4. Go to localhost:[YOUR PORT HERE]/1 to see if your show.html renders.

Part 4 - Templating Our Data

Now lets work with mustache-express to render our data to our pages! We will be working in views/index.html and views/show.html.

1. Read Mustache's GitHub to refresh yourself on how mustache works.

2. Look over the package-data.json file to see the structure of your data.

3. In views/index.html render the following using mustache:

   • A h1 tag with the title

   • A h2 tag with the text

   • Loop through the packages and render:

     • an a tag for each of the packages with the package name that links to that package's show package.

     Hint:

     How did we set up the route for the show page?

     • an img tag with the package's image

4. In views/show.html render the following using mustache:

   • A title in the head with the name of the NPM package
   • A h1 tag with package name
   • A p tag with the package category
   • An img tag with the package's image
   • An a tag that links back to all the packages

BONUS - Another page!

The only way to feel more comfortable with this material is by doing it. Repeatedly. Often. So lets add another page!

1. Set up another get route to /random.
2. This route's callback should render a view called random and send a random package from the packageData object.
3. Create another html file in the /views directory named random.html. Add an h1 tag informing the viewer that they are viewing a random NPM package.
4. Using mustache render the package's information including the name, category and image.
5. Add an a tag to the same route to view another random package.
6. Add an a tag to the index.html that will direct them to the random page.

SUPER BONUS - Don't forget about CSS!

• Style your pages! Make them look pretty. It may be repetitive to style everything, but the more you do it, the easier it will be.
• Use flexbox to arrange your NPM package list
• Add a Google Font
• Add some cool default colors or mix your own using the color factory we made this morning!