Create a web server

[kitchen-boy]

User Stories

• As a user, I can request for a list of all animal data

• As a user, I can request data for just one animal based on its id value

• As a user, I want to be able to do this from anywhere and not just my computer

[kitchen-boy]

11.1.1 Intro:

Lesson Objectives:

• Set up & run a Node.js web server using Express.js
• Handle two types of GET requests using parameters.
• Make the application production-reading & deploy it on Heroku.

[kitchen-boy]

11. 1.2. Preview:

• Zoo Keepr application - front end:

• Lesson objective = finish building the back end (i.e., server), then connect it to the front-end code.

• This will allow the front end to make AJAX requests to the server.

• AJAX = Asynchronous JavaScript And XML.

• AJAX uses a combination of: -- A browser built-in XMLHttpRequest object (to request data from a web server) --JavaScript and HTML DOM (to display or use the data). With AJAX, you can:

• Update a web page without reloading the page

• Request data from a server - after the page has loaded

• Receive data from a server - after the page has loaded

• Send data to a server - in the background

  Steps in this lesson:

  1. Set up the project in GitHub.

• Create the project's repo in GitHub & establish the feature branches using issues.

  2. Create an Express.js server.

• Use a library called Express.js to create a Node-based web server.

  3. Handle requests for animals.

• Use Express.js to create an HTTP route that sends the requestor all of the animal data as JSON.

  4. Deploy to Heroku.

• Will get introduced to Heroku early on for this project so that we can continuously deploy the server as we go.

  5. Handle requests for a specific animal.

• Will create one more API route that allows us to search for one specific animal in the array.

• Need to set up Express.js, one of the industry-leading libraries for creating web servers in Node.js, before we can create the routes for our API to handle requests.

• Need to deploy the app to Heroku because GitHub Pages doesn't support Node applications. Choosing to deploy Heroku earlier so that we can continuously deploy as we work on the project -- even though we could deploy to Heroku at end of this lesson.

[kitchen-boy]

11.1.3 Set Up the Project:

• Create a GitHub repo & clone it on our local machine.
• Create GitHub issues to define the requirements for each feature.
• Create feature branches to work in

  Create the Repo:

  1. Create a new repository in GitHub called <zookeepr>. -- Make it a public repo & check the box for "Initialize this repo with a README".
  2. Add a <.gitignore> file. -- Select <Node> from the gitignore options when creating your repo.

     Create the GitHub Issues:

• Got to the Issues tab & create the following issue(s) to make feature branches from (refer to Issues tab).

  Set Up the Project Directory:

• Create & set up your local project directory:
  1. At the command line, use the <cd> command to navigate to the directory where you will clone the repo.
  2. Clone the repo using the <git clone> command.
  3. Use the <cd> command to once more go to the newly created directory for your repo.
  4. In the command line, create a <develop> branch that will store completed work before merging into the <main> branch. -- the following command will create this branch & check it out:
  5. Create a feature branch for the initial project code:

     Create the Project Files:

• The data that we use will be stored as a JSON.
• The zoo has already provided us with JSON file containing their animals.
  1. Download that file from the following link: Animals JSON data
  2. Create a new folder called </data> & move the JSON into that new folder.
  3. In the root project directory (not in the </data> folder), create the main file that our server will run from. -- Name that file <server.js>.

[kitchen-boy]

11.1.4. Create an Express.js Server:

• Express.js follows similar pattern to working with server-side APIs: -- Whenever you needed to retrieve data from an API, you would make a request to an endpoint. -- After a short period of time, the server would return the data to the client in the form of a response.
• Already created Node.js applications, but they haven't been servers. -- A machine or program needs to provide some functionality to a client to be considered a server. -- We want that functionality to be accepting a request & sending back a response - in our case => Node.js has built-in libraries that support this functionality. -- BUT: Writing Node.js servers requires significantly more code than using Express.js to do the job -- Node's documentation on HTTP - more info about the Node.js module for setting up a server & handling http traffic.

  Set up server so that it's listening for incoming requests:

• Install Express.js by running the following commands: -- to initalize npm -- to install the Express.js npm package Note:
• <*-y> flag in the first command = "yes", means to initialize a local npm repo with an implicit "yes" for all of the prompts, i.e. accepting all of the default settings & bypassing the interactive user prompts altogether.
• <i> flag in the second command = "install", can be used instead of <npm install>.

  Add code to the top of <server.js> file:

  

• We will <require> Express.js at the tope of the file, just like any other npm package.
• Express.js has documentation to help you get started, Express.js v4 documentation.

  Setting up the server only takes two steps:

  1. Need to instantiate the server,
  2. Then tell it to listen for requests.

To instantiate the server, add the following code to <server.js>:

• Use this code to start Express.js: assign <express()> to the <app> variable so that we can later chain on methods to the Express.js server.

  To make our server listen, add the <listen()> method code to the end of <server.js>:

  

• This is code to chain the <listen()> method onto the server.

  Run <npm start> in your terminal.

• You should see the console message in the preceding code:
• port numbers can range from 1024 to 49151.
• Chose a port number around 3000 => to avoid permission restrictions and fairly easy to remember.
• Ports with numbers 1024 & under are considered special by the operating system, & often require special permissions (e.g. running the process as an administrator).
• Wikipedia's list of TCP & UDP port numbers: for list of port numbers.
• DONE: Set up the server.
• NEXT: Add code to it so that it can return data to requests.

Note:

• host = address of a website.
• port = it gives the exact destination on the host.
• e.g. visiting the address on one of two ports: 80 or 443. -- 80 => for sites that begin with <http://>; 443 => for sites that begin with <hhtps://>.

[kitchen-boy]

11.1.5 Handle Requests for Animals:

Create a route that the front-end can request data from.

Start by requiring the data

• Add the following code to the top of <server.js>:

  Add the route that the front-end can request data from:

• Type the following code just before <app.listen()>:

Note 2 important things about this code:

1. The <get()> method requires 2 arguments: --i) a string that describes the route the client will have to fetch from. --ii) a callback function that will execute every time that route is accessed with a GET request.
2. We are using the <send()> method rom the <res> parameter (short for response) to send the string <Hello!> to our client.

• Express.js documentation on response: The <res> object gives us access to much more than just the <.send()> method. -- The res object represents the HTTP response that an Express app sends when it gets an HTTP request. -- The object is always referred to as res (and the HTTP request is req) but its actual name is determined by the parameters to the callback function in which you’re working.

Save the code.

• Stop the previous server (if you haven't stopped it already) by: -- entering <Ctrl+c>, then <Y> at the prompt (if you are prompted).

Run <npm start> to start the server again.

• Once the server has started: -- navigate to http://localhost:3001/api/animals in your browser. -- Should see something like following image:

• Use <send()> method to send short messages.

• To send lots of JSON (e.g. from APIs), change <send> to <json>. -- Do this to change the headers (i.e. additional metadata that's sent with every request/response) so that hte client knows it's receiving JSON.

  • MDN web docs on HTTP headers: info on Requests and Response Headers.

Update the code to use <res.json()>:

• by changing the second line in the following code block from <res.send('Hello!');> to <res.json(animals);>:
• Run <npm start> again.
• Visit http://localhost:3001/api/animals again in your browser. -- Should see similar image: -- The JSON data appears => now have a working route on our server.

To create specifying functionality with our own server:

• (e.g.. To specify parameters with your query by using <?> or <:> when working with server-side APIs)

• Add another function called <filterByQuery()> to create this query. -- This is going to help to handle different kinds of queries. -- Start by extracting the data from after the question mark. -- Use the <req> parameter, which is short for "request".

• Note: Express.js documentation on Request -- the <req> object gives us access to much more than just the <.query> property (just like the <res> object).

Access the <query> property on the <req> object:

• Navigate to http://localhost:3001/api/animals?name=Erica in the browser. -- Check the command line after that page loads. -- Should see an object with the property <name> & value <Erica> as shown:

• Whatever string of query parameters you use on the URL will become JSON: -- i.e. ?name=Erica -- e.g. ?a=111&b=222$c=333 will become: -- e.g. ?a=111&b=222&b=333 will become an array in the JSON, if you repeat the same query name with different values:

Create a new function called <filterByQuery()> by adding the following code, above the <.get()>:

-- Going to break the filter functionality into its own function, instead of handling the filter functionality inside the <.get()> callback. -- This function will take in <req.query> as an argument & filter through the animals accordingly, returning the new filtered array.

Call the <filterByQuery()> function in the <app.get()> callback * as shown in the following code:

• Test route in browser: http://localhost:3001/api/animals?name=Erica -- Should see a JSON array returned, with only an animal named Erica:
• Code works well querying properties that are strings.

Next question: How to filter out animals based on their personality traits?

-- Different filter and more complex: -> because the personality traits are within an array. -> users might want to filter animals by multiple personality traits at the same time. ==> Will have to handle <query.personalityTraits> differently from the way we handle the other queries.

How does this process differ when querying for one versus multiple personality traits?

• To query multiple personality traits: -- Add <&personalityTraits=quirky&personalityTraits=rash> to the end of the URL in the browser:
• Will cause <req.query.personalityTraits> to become the following array: <['quirky', 'rash']>.
• To query by only ONE personality trait: -- Add <personalityTraits=rash> to the end of the URL in the browser.
• Will cause <req.query.personalityTraits> to become the string <rash>.

To combat this, modify the filterByQuery() function to handle both cases:

*Add the following code:

• Refer to comments in code.
• Revised the <filteredResults> array for each trait that we loop through with <.forEach()>. -- Each iteration revises <filteredResults> so that it only contains animals that possess the indicated trait. -- At the end of the <.forEach()> loop, will have a <filteredResults array that only contains animals that have all of the traits we're targeting.

Now: the <filterByQuery()> method ensures that <query.personalityTraits> is always an array before the <.forEach()**> method executes.

• Test the new route in the browser.
• Filter by just one personality trait: -- Type the route <personalityTraits=hungry> in the browser:

*Test the route again in the browser: -with personalityTraits <hungry> and <zany>.

• Type the route <personalityTraits=hungry&personalityTraits=zany>, as shown:

[kitchen-boy]

11.1.6 Deploy to Heroku:

We need to use Heroku because:

• We need to deploy a <server.js> file that is going to run a Node.js process.
• GitHub Pages only deploys static sites made up of HTML pages.

1. Create a Heroku account at Heroku

2. Download the Heroku CLI (Command Line Interface).

• The CLI (Command Line Interface) makes it easy to create & manage (i.e. to deploy) your Heroku apps directly from the terminal.

To create a new Heroku application:

• Enter the following command into the terminal:

• You can specify the name of your application by adding <app-name> after <heroku create>. -- It must be a UNIQUE name that isn't used anywhere else on Heroku. -- If this is your first time using CLI, you'll be prompted to login with your Heroku account.

• Should see output like the following image:

• The deployment steps rely on a Git branch (just as with GitHub Pages).

• We will push to <heroku main>: -- This is a new location for our repo's code to go. -- NOT pushing to <origin main>. -- The "remote" => <origin> or <heroku> in our <git push> commands.

Heroku doesn't allow for cross-branch actions the same way GitHub allows.

• i.e. We cannot say <git push heroku main> when we aren't currently in the local <main> branch.

• We can push from a local feature branch to Heroku. -- To see our progress as we go & zoo will ultimately host the final product somewhere else.

Run the following commands from the command line:

• Should see output like the following images:

DONE: Created app with Heroku!

Open your newly created app in the browser using the output from the command line:

-- 2 items in the output from the command line that look like links:

1. <your-app-name>.herokuapp.com => Open this link in the browser

2. Do NOT open the one that ends with <.git>.

   OR:

   Open the application by entering <heroku open> from the command line.

• Should see a page like the following image:
• Application error!
• Application error happened because we used the hardcoded port of 3001. -- Heroku apps get served using port 80.

Tell our app to use an environment variable instead of hardcoding our app to use 80.

When Heroku runs our app, it sets an environment variable called:

-- Tell our app to use that port if it has been set, and if not, default to port 80.

IMPORTANT:

Applications served over Heroku as well as most hosts must run on port 80. If the host uses HTTPS, then the port would be set to 443.

Add this code before , in :

Replace the hardcoded value with the variable:

-- Go down to where we have our application listening>

Add & commit your application.

Push to <heroku feature/MVP:main>:

-- Need to add, commit & push changes to <heroku feature/MVP:main> before app can be successfully opened in the browser. -- Open the app by entering <heroku open> from the command line!

• SUCCESS!

• Should see a JSON response when you navigate to:

  https://vast-woodland-24839.herokuapp.com/api/animals

  (https://.herokuapp.com/api/animals) -- To show your progress to the zoo, share this link.

• View video about the difference between development (local) and production (Heroku) environments.

[kitchen-boy]

11.1.7 Handle Requests for a Specific Animal: