Static content is usually read from disc; it is the same on every request and for every user e.g. HTML, CSS and image files.
Dynamic content is content that can change from request to request, and might be different for different people. For example, when two Twitter users visit twitter.com/home each person's page is filled with content that is particular to them.
As another example, we can make a request like GET https://api.spotify.com/v1/artists/{id}/top-tracks - plugging in our favourite artist's id - and Spotify will return a JSON of that artist's top tracks. If we make the exact same request in a month's time, the top tracks may be different.
So where does the dynamic content come from? Dynamic content is usually stored in a database or comes from another service. The server receives a requests and applies some business logic to fetch the data and return a response as either HTML or in a data format such as JSON.
If we are serving dynamic content, our server is now called an 'application server'.
REpresentational State Transfer (REST) is an architectural style which is built around HTTP and the concept of resources. A resource can be considered similar to an object in Object Oriented Programming e.g. a bag, a scooter etc. RESTful APIs use HTTP methods, header and path information to specify the action a client wants to perform on a resource, for example:
| HTTP method | Path | Description |
|---|---|---|
| GET | /restaurants | Retrieve all restaurants |
| GET | /restaurants/1 | Retrieve restaurant 1 |
| POST | /restaurants | Create a new restaurant |
| PUT | /restaurants | Update restaurant 1 |
| DELETE | /restaurants | Delete restaurant 1 |
Note that resource names are typically lowercase and pluralised.
Listen to this video for a more detailed overview of REST.
Check your url https://www.youtube.com/watch?v=SLwpqD8n3d0 is the embed version for embeds to work correctly
The way we create an API to handle HTTP requests is by declaring an Express 'route' in our server.js file. Routes determine how an application’s endpoints (URLs) respond to client requests.
Here is an example route which returns the current date when the user navigates to the /now endpoint e.g. http://localhost:3000/now.
app.get("/now", (request, response) => {
const date = new Date();
response.send(date);
});
The app.get is telling Express that this endpoint is listening for HTTP GET requests. Remember, GET is the HTTP method used when you click a link or type in a URL. A request using a different HTTP method e.g. POST http://localhost:3000/now would not trigger this endpoint's callback.
The /now is telling Express that this endpoint is responsible for requests whith a /now path. If we decided to change this (say, to /date) a client trying to access http://localhost:3000/now would no longer hit this endpoint.
The 2nd argument to app.get is the callback function that fires when a request comes in which satisfies the endpoint's method+path combo. The request object contains a bunch of information about the incoming request. The response object has methods used to send data back to the client.
We call the entire set of endpoints for a service its Application Programming Interface (API). Just like a toaster has a User Interface (UI) - knobs, levers and buttons - which we use if we want to make things happen inside the toaster, so a service has an API which code running outside the service has to use if it wants to make things happen inside the server.
Modify your server.js to create an endpoint which listen for GET requests with the path /flipcoin. This endpoint should randomly respond with the text "heads" or "tails". Verify your code works by starting your server and visiting http://localhost:3000/flipcoin You should see the text displayed. Use Chrome Developer Tools to see the HTTP requests as you refresh the page.
Create a new endpoint in your server.js file. When a browser makes a GET request to http://localhost:3000/restaurants this endpoint should respond with the full array of restaurant objects. You'll need to use your code from the Sequelize assignment to populate your database. The endpoint will need to fetch these restaurants from the database - have a look at Sequelize Model's findAll method to help you with this. For now, don't worry about sending each restaurant's menus and items.
Push your code to Github and share the link with your coach for review
Visit some of your favourite websites. As you open pages and perform actions, watch the DevTools Network tab. See if you can guess which requests are hitting static endpoints and which are serving dynamic resources.
[Overview of Using Express routes (video)(https://www.youtube.com/watch?v=Kw5tC5nQMRY)]