Express

Today we will learn how to build web applications with Express.

Contents

1. Section 1: HTTP, Express, and Postman
2. Section 2. Queries, Parameters, and Status codes
3. Section 3. Templating and Handlebars
4. Section 4. HTML Forms

---

Section 1: HTTP, Express, and Postman

Watch me: Express Introduction

Watch me: HTTP Introduction + Postman

Section 1a. Postman

1. Install Postman and make a GET request to https://horizons-postman.herokuapp.com/

   When you are successful you will see a message in the output panel:

   Great, you're starting the Postman warmup exercise!
   

2. Make a GET request to https://horizons-postman.herokuapp.com/1 (note the /1 at the end) with the request parameter postman set to excellent.

   You can do this by either editing the URL directly or clicking on Params and adding a key and value.

   You should see:

   Success. Part 1 complete
   

   Screenshot

   

3. Now we can make a PUT request with some JSON contents. We put the contents of the request in the Body section and change the Content-Type header so the server knows how to interpret the data.

   1. Make a request to https://horizons-postman.herokuapp.com/2
   2. Set method to PUT

   3. Set the body to be raw add the content { "foods": ["bacon", "lettuce", "tomato"] }

      Screenshot

      

   4. Set header Content-Type to application/json

      Screenshot

      

   You should see

   Success. Part 2 complete
   

Section 1b. Express GET routes

1. Open your terminal and navigate to the /5_express/1_express_intro/ folder
2. Run npm install
3. Open /5_express/1_express_intro/server.js in your favourite text editor.
4. Require the express library (var express = require('expres'))
5. Initialize your express app instance (var app = express())
6. Create the following routes:
   • GET /: Send the string "The Horizons Poet API v1.0".
   • GET /api/*: Send the string "We couldn’t find any routes matching this endpoint".
     • * denotes any string (i.e. /api/anything, /api/unicorn, /api/p/r/a/t/h, etc.)
     • you will need to use app.use() for this
   • GET /api/poem: Send the text from the file /5_express/1_express_intro/poem.txt
     • use the following code to read poem.txt js var fs = require('fs'); var poem = fs.readFileSync('./poem.txt', 'utf8');
   • POST /api/success: Send the json {success: true} using res.json()
7. Listen on port 3000
8. Use Postman to verify all the routes you have created. You can

connect to your local server at http://localhost:3000

---

Section 2. Queries, Parameters, and Status codes

Watch me: HTTP Queries and Parameters

Watch me: Status Codes

1. Open this folder (/5_express/1_express_intro/express_echo) in your Terminal on Mac or Git Bash on Windows.
2. Install dependencies with NPM: bash npm install
3. Open app.js in your editor of choice and add an express http endpoint so that it prints correctly on step 5 (follow the directions in the app.js file).
4. Start your server. Note: When you change app.js you have to restart it to see your changes! bash npm start

5. Verify that your code is working correctly by opening http://localhost:3000/hello?name=Simba in Chrome. It should print:

   Hello there Simba!
   

6. Stop your server with Control+C in your Terminal/PowerShell.

---

Section 3. Templating and Handlebars

Section 3a. Setting up Handlebars

Watch me: Express Templating

The following set of tasks will require setting up your own express app with handlebars templating. You should refer back to the video if you get stuck on a task.

1. Navigate to /5_express/1_express_intro/handlebars_examples/hello_world/: This is the folder you will be working in
2. Start your Node App (you can use npm init)
3. Install the required packages
   • express
   • express-handlebars
4. Create an app.js file: This is where you will set up express to use handlebars
5. Create the following routes:
   • /: Displays the text "Hello World" from a .hbs file
   • /:error: Displays the text "<error> page not found, did you enter the correct url?" where <error> is the text entered as a param.
     • Example: /about will render a handlebars page with the text about page not found, did you enter the corrent url?.
6. Run your node app and make sure the above routes work!

Section 3b. If-Else in Handlebars

Watch me: If-Else Handlebars

1. Open /5_express/1_express_intro/handlebars_examples/conditional/app.js and note how the /:word endpoint is implemented.

   This endpoint renders condition.hbs with the following data:

   {
     isEven: Boolean, // true if word has even number of letters
     word: String // the word entered at :word
   }
   

2. Edit /5_express/1_express_intro/handlebars_examples/conditional/views/condition.hbs and display <h1>The word <entered-word-here> has an even number of letters!</h1> if isEven is true, otherwise display <h1>The word <entered-word-here> has an odd number of letters!</h1>

   Odd letter screenshot

   ![odd]

   Even letter screenshot

   ![even]

Watch me: Looping in Handlebars

1. Open /5_express/1_express_intro/handlesbars_examples/profiles/ in your Terminal
2. Run npm install
3. Take a look at data.json; this is a list of student info that contians first_name, last_name, email, and gender.
4. Create a Handlebars template under views that, given an array of students, displays their first name, last name, and email in a list.
5. Create the following routes that render the template you created in the previous step:
   • /: A directory of ALL students
   • /male: A directory of ALL MALE students
   • /female: A directory of ALL FEMALE students
6. Run node app.js to serve your handlebars files on localhost:3000
7. Make sure your above routes work as intended!

---

Section 4. HTML Forms

Section 4a. Input Fields & Names

Watch Me: Input Fields & Names

1. Open /5_express/1_express_intro/forms_examples/: For this example you will write code in the following files
   • example1.js
   • views/example1.hbs
2. Create a GET / route that renders a page with a header and a form.
   • h1: A heading tag that's text is based on the input box (in the form).
   • form: A form with an input box and a submit button

3. Test your route by running npm install then node example1.js in the terminal. Th e following steps should work:

   1. Open your favourite web browser and navigate to localhost:3000

   2. You should see a heading titled Default Header and a input box with a submit button (like below)

      Screenshot

      ![form_1_1]

   3. Type Change The Header into the input box and press submit

   4. The heading should change to Change The Header like below

      Screenshot

      ![form_1_2]

Section 4b. Form Action Attribute

Watch Me: Form Action Attribute

In this example you are to make a register form. Make sure that when you press submit, the form data does not change (use the value attribute).

1. Open /5_express/1_express_intro/forms_examples/: For this example you will write code in the following files - example2.js - views/example2.hbs
2. Create a register form (in views/example2.hbs) with the following inputs:
   • username (text input box)
   • password (password input box)
   • name (text input box)
   • gender: male/female/other (radio buttons)
   • BONUS state (dropdown)
3. BONUS Add logic in example2.js to make sure the data in your form will NOT be cleared when you press Register.
4. npm install && node example2.js to test your app.

5. Fill in the form (it should look something like the one below once filled) and click register. Make sure the form stays filled.

   Screenshot

   ![form_2_1]

Section 4c. Form Method Attribute

Watch Me: Form Method Attribute

Now for this example we're going to implement login functionality for our users. You are to create a Login Form which contains an email and password field. The list of accounts (along with their passwords) are stored as JSON in accounts.js.

1. Open /5_express/1_express_intro/forms_examples/: For this example you will write code in the following files
   • example3.js
   • views/example3.hbs
2. Create a login form (in views/example3.hbs) with the following inputs:
   • email (text input field)
   • password (password input field)
3. Add functionality for your form to POST to /login on submit

4. In example3.js create a POST route at /login which uses req.body to check if the entered email/password fields are in accounts.json

   • Given correct credentials render a h1 tag that says "Hi [insert-first-name-here]!" (example below). NOTE that first name can be found in accounts.json
   • Given incorrect credentials render a RED error message on your page.
   Screenshot

   ![form_3_1]

5. Fill in the form with random credentials and make sure the error message pops up

6. Fill in the form with someone's credentials from accounts.js and press Login. You should see the correct heading for that person pop up!

Woohoo! You've completed the individual exercises for the day!

Built With

• css
• html
• javascript