Frontend/Backend

Explore the relationship between the Frontend and the Backend. You'll run simple API's in terminal, and access them from the browser using asynchronous calls with Axios.js.

Index

Learning Objectives

  • Frontend/Backend relations
  • Cross Origin Resource Sharing
  • Environmental Variables
  • Promises (cooler callbacks)

TOP

Specifications

  1. Run the Frontend/Backend projects locally to figure out what's going on.
    1. Clone this repo
    2. Run the API of your choice in the terminal (ie. node ./0-frontend-backend/backends/take-your-pick)
    3. Open the Frontend in your browser (ie. ./0-frontend-backend/frontend/index.html)
    4. Follow the documentation in the browser to access the API you're running.
      • (It's important to use the api_connection object because the browser can only send "get" requests from the url tab.)
  2. Build a new and pretty Frontend (HTML/CSS/JS) for the "api_connection" object provided as sample code, you can do it for whichever API you like most. (We recommend copying the file so you have the original as reference.)
  3. Deploy at least one of the provided backends to Heroku.
  4. Make a repository to host this project. Run the frontend you built on gh-pages, it will connect with your Heroku deployment.

Challenge:

  • Turn all 4 backends into a single service-based backend and deploy that to Heroku. Have a frontend with 4 pages, one for each backend.

TOP

Resources

Frontend vs Backend:

Promises:

CORS:

Environmental Variables:

TOP

results matching ""

    No results matching ""