• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/21/22

Create a GET Route

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:

website shows with two items 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.

Example of certificate of achievement
Example of certificate of achievement