- In terminal go to the
express-app
directory. - Run
npm init
(hit enter a bunch of times to accept the defaults and see the new package.json file) - 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 runnpm install
all dependencies will be installed.) - 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
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.)
- First
require
your packages (express and mustache-express). Require
thepackages
module.- Define your
port
. - Define your
app
using the express dependency you defined earlier. Set
yourapp
engine to usemustache-express
.Set
yourapp
view engine
tohtml
.Set
yourapp
views
directory
.- Tell your
app
touse
thepublic
directory
asstatic
. - Tell your
app
tolisten
on yourport
.
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 aget
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 theindex.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!
Using this information, lets set up a couple routes.
-
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
- This route should render the
-
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
- this route should render the
-
Go to
localhost:[YOUR PORT HERE]
to see if yourindex.html
renders. -
Go to
localhost:[YOUR PORT HERE]/1
to see if yourshow.html
renders.
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
.
-
Read Mustache's GitHub to refresh yourself on how mustache works.
-
Look over the
package-data.json
file to see the structure of your data. -
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
- an
-
-
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
- A title in the
The only way to feel more comfortable with this material is by doing it. Repeatedly. Often. So lets add another page!
- Set up another get route to
/random
. - This route's callback should render a view called
random
and send a random package from thepackageData
object. - Create another html file in the
/views
directory namedrandom.html
. Add anh1
tag informing the viewer that they are viewing a random NPM package. - Using mustache render the package's information including the name, category and image.
- Add an
a
tag to the same route to view another random package. - Add an
a
tag to theindex.html
that will direct them to the random page.
- 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!