It's time to start adding the functionality this front-end app requires and watch the whole system take shape!
You should have your front-end app running in a browser (run npm run start from the front-end directory. Navigate your browser to http://localhost:4200) and head to "parts 1 + 2."
Send Back Stuff for Sale
Let's check together how to send back stuff for sale on the next video!
As you may have noticed, the front-end app currently shows "No stuff for sale" and indicates an error in the console. This is because it is trying to reach the API (which does not exist yet!), and retrieve the sale items. Let's try and make that stuff available.
In your app.js file, replace all the middleware with the following:
app.use('/api/stuff', (req, res, next) => {
const stuff = [
{
_id: 'oeihfzeoi',
title: 'My first thing',
description: 'All of the info about my first thing',
imageUrl: '',
price: 4900,
userId: 'qsomihvqios',
},
{
_id: 'oeihfzeomoihi',
title: 'My second thing',
description: 'All of the info about my second thing',
imageUrl: '',
price: 2900,
userId: 'qsomihvqios',
},
];
res.status(200).json(stuff);
});The first difference you will notice is the extra argument passed to the use method: you are passing it a string that corresponds to the endpoint where you want this piece of middleware registered. In this case, that endpoint will be http://localhost:3000/api/stuff, as that is the URL being requested by the front-end app.
In this middleware, create an array of stuff with the specific data schema required by the front end. Then send that stuff as JSON data, along with a 200 status, for a successful request.
If you make a GET request to this endpoint from Postman, you will see that you receive the stuff array. However, refreshing the browser doesn't seem to work. So what exactly is going on here?
CORS Errors
CORS stands for cross-origin resource sharing. It is a standard that allows you to relax default security rules that prevent HTTP calls between servers. You want your two origins: localhost:3000 and localhost:4200, to communicate with each other. For this, you need to add some headers to your response object.
Back in the app.js file, add the following middleware before your API route:
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
next();
});This will allow requests from all origins to access your API. You can also now add valid image URLs to the stuff sent back by the API, completing the GET route. If you refresh the front-end app, you should see your stuff for sale:
Let's Recap!
The
app.use()method lets you attribute a piece of middleware to a specific route in your app.CORS defines how web servers and browsers interact, specifying which resources can be legitimately requested — by default, AJAX requests are forbidden.
To allow cross-origin requests (and prevent CORS errors), specific access control headers must be set on your server response object.
Now that you have successfully implemented a basic route to return the stuff for sale, let's see about allowing users to put their own stuff up for sale.
