Learning objectives:

1. Learn Express router
2. Practise using promises
3. Practise server side rendering

When complete, your application might look like this:

• After cloning this repo, install dependencies with npm install, and start the dev server with npm run dev

  More about getting started

  • To start the server: npm start
  • To debug the server (and have it reload with Nodemon after changes): npm run dev
  • To run the tests: npm test

• Let's get our server running with a default route

  More about the server

  1. In the server/server.js, add an HTTP GET root route (/). For now, let's just send the word 'Pupparazzi'
  2. Start the server and go to http://localhost:3000 to see if we are winning

  Now that we have a root route, let's use it to see some puppies.

• As a user, I want to see some puppies, so that I can say "awwww"

  More about displaying puppies

  In our server file, change the GET / route function. We will use this route to:

  1. read the puppies from our data.json file (which lives in the sibling ./data directory) using readFile from 'node:fs/promises'. Don't forget to parse the data into a JavaScript object
  2. render the puppies using the home view (that has already been created) and your puppies data

  
  

  If your page renders, but there are no puppies:

  • check what data the view is expecting to receive
  • console.log the view data object you are passing to the render and make sure this matches what the view is expecting

  
  

  You should now have the puppies rendering on the / page. If you click on the picture however, the link it takes you to is broken (because we haven't written it yet). Let's fix that now.

• As a user, I want to click on a puppy and see their name, breed, and who their owner is

  More about puppy pages

  1. Take note of the url you are sent to (perhaps /puppies/1)
  2. Create a routes.js file in the main repo directory - this will store all of our routes
  3. require Express in your routes.js file and create a router. Also, don't forget to export the router
  4. require and use our newly created routes.js file in our server. We'll use the string /puppies to define the prefix path for our router. Note that the use line of code should come after your server configuration and handlebars configuration
  5. Create a GET route in your routes.js to render a particular puppy. The route should contain the id as a parameter so you can access it via req.params.id (so perhaps /:id)
  6. Similarly to the / route in server.js, it should read the puppies from our JSON file, but this time, we will need to use the id to find only the selected puppy from the puppies array
  7. Render the puppy. As before, the details view has already been created for you

• As a user, I want to be able to update the puppy's name, breed, and owner

  More about pupdates

  For this, we are going to need GET a form to edit/update the puppy information. This form also needs to POST the updated information from the form to the server. Hence, we are going to need two routes this time (don't panic!)

  For the GET /puppies/:id/edit route:

  1. Loop through our JSON file and find the puppy that we want to edit (don't forget that id as a parameter)
  2. Render the form using the edit view and the puppy data that we want to edit

  For the POST /puppies/:id/edit route:

  1. Create an object of the updated puppy data from the request body
  2. Read in the JSON file and locate the puppy we are going to update
  3. Update the puppy in the array
  4. Write the entire array back into the JSON file (with fsPromises.writeFile)
  5. Redirect to the GET /puppies/:id route

  If all goes well, you should be able to update the puppy information. If that isn't happening, undoing the changes you've made to the JSON file might come in handy.

Provide feedback on this repo