Week 15 Calling the API with Fetch - Code-the-Dream-School/rails-guidebook GitHub Wiki

Week	Topic	Learning Objectives	Key Resources
15	Calling the API with Fetch	Build a front end for the REST API using HTML and JavaScript Make REST calls using fetch() from this front end Understand CORS (cross origin request sharing) and when it is needed (Optional) Modify the fetch() calls to support CORS (Optional) Configure Rails to support CORS requests	Lesson Materials Coding Assignment

In this lesson, students will:

1. Branch Management: Create a new Git branch named lesson14 to manage their work for this lesson.

2. Front-End Application:

   • Fetch API: Learn to make asynchronous requests to a Rails API using the fetch() function in JavaScript.
   • Code Implementation: Modify existing JavaScript code to handle API requests and operations for deleting members, creating facts, and updating facts.
   • Testing: Use the provided front-end application to interact with the Rails API and verify the implementation of CRUD operations.

3. CORS Configuration (Bonus):

   • CORS and Cookies: Understand Cross-Origin Resource Sharing (CORS) and how to configure cookies for cross-origin requests.
   • Server Setup: Configure a Rails application to handle CORS and cookie settings for development and testing.

• Branch Creation: Create a Git branch named lesson14.

• Front-End Code Updates:

  • Edit public/session_ops.js to implement missing fetch operations.
  • Ensure all required fetch calls are correctly handled with .then() and .catch().
  • Test the application for proper functionality of CRUD operations (delete, create, update).

• CORS Configuration (Bonus):

  • Add rack-cors gem to the Gemfile.
  • Configure CORS in config/initializers/cors.rb to allow requests from http://localhost:3001.
  • Apply monkeypatches for cookie handling in config/application.rb.
  • Run two instances of the Rails application (back end on port 3000, front end on port 3001).
  • Verify that CORS settings and cookie configurations work correctly.

• Submission:

  • Push the lesson14 branch to GitHub.
  • Create a pull request for the lesson14 branch.
  • If completing the bonus assignment, include links to both pull requests in your submission.