Become a full stack developer, plug your frontend and backend 🔌

Let’s plug your front and your back in this final day of the portfolio project of mentorleo.co 💪

Previously:

In week 3/day 4 you automated the seeding of your database with fresh job offers everyday.

Today will be the simplest day and the last one of the portfolio project. You’ll plug your React app with your Node.js server 🚀

Enable CORS on your server

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos.[2] Certain “cross-domain” requests, notably Ajax requests, however are forbidden by default by the same-origin security policy.

cf https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Your frontend and your backend will be on separate domains. Therefore all ajax requests to fetch the jobs from the front to the back will fail.

That’s the issue you already dealt with in the week 1. You used a trick called JSONP to tackle this. But you don’t want it in your stack because the backend needs to be adapted for it, and it’s not the cleanest way of handling the problem.

There is an expressjs module for handling CORS that is extremely simple to use. Use the documentation of the project to install it and configure it. Prefer allowing CORS only on the route GET /jobs. It’s a bad practice to open it for all the routes if we don’t need it.

The documentation: https://github.com/expressjs/cors#enable-cors-for-a-single-route

Plug the front

  • remove the jsonp support from superagent (the lib to handle Ajax, see week 2/day 5)
  • call the route GET /jobs on your server, where you previously called github directly
  • make your backend run all the time on CleverCloud, see week3/day3

That’s it ! 👍

The end of the project

Now you have a beautiful and automated stack to run a dynamic portfolio. Stay tuned for new projects, and take time to add features to your portfolio now that you handle many concepts ! 😎

Call to action

Join us and get help from professional mentors !

Apply here, it will always be free ♥ https://mentorleo.co

Like what you read? Give Damien BRY a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.