Now that you have a feel for how to write a server using Express, we'll apply that knowledge to one of your prior front-end exercises. (It's the rendering exercise - Remember? The one where we rendered Circles, Tweets, and Albums? Yeah, that one!)
Let's take a quick tour of this repo:
The main things you should notice about package.json is that 1) express is listed as a dependency, and 2) you can run npm start to start this server
This is the server code! Notice that this server is currently only set up to server the files in the /public folder. You'll be doing your work in this file for this exercise.
This folder contains all of the front end html, css, and javascript. It's nearly identical to the files in my repo called 'rendering'
Notice that each of the render functions make use of axios to fetch data from your server. (A couple weeks ago, there was no axios code here - instead, the abstractions were hardcoded as arrays and objects)
These files all contain the abstractions we're interested in. Notice that we export the abstractions with module.exports = .... These files are imported via require() statements in server.js
- Install this project's depencies with
npm install - Run the server
npm start - Open
localhost:3000in Google Chrome - Notice that the buttons don't work! That's because your buttons are trying to fetch data from the server at routes like
/api/albumsand/api/poker, but they aren't implemented yet! - Implement these routes in
server.js. Restart your server and verify that your server is properly serving the data!