Update Config

5. Update the Website Config

Update the /src/config.js file in your website deployment to include the invoke URL of the stage you just created. You should copy the invoke URL directly from the top of the stage editor page on the Amazon API Gateway console and paste it into the _config.api.invokeUrl key of your sites /src/config.js file. Make sure when you update the config file it still contains the updates you made in the previous module for your Cognito user pool.

✅ Step-by-step directions

  1. On your Cloud9 development environment open src/config.js
  2. Update the invokeUrl setting under the api key in the config.js file. Set the value to the Invoke URL for the deployment stage your created in the previous section.

An example of a complete config.js file is included below.

⚠️ Note: The actual URL in your file will be different.

module.exports = {
    api: {
        invokeUrl: 'https://rfk14x9w40.execute-api.us-east-1.amazonaws.com/prod'
    }
}
  1. Save the modified file making sure the filename is still config.js.
  2. Commit the changes to your git repository:

    git add src/config.js 
        
    git commit -m "Configure API invokeURL"
        
    git push

Amplify Console should pick up the changes and begin building and deploying your web application. Watch it to verify the completion of the deployment.

Implementation Validation

✅ Step-by-step directions

  1. Visit /ride under your website domain.
  2. If you are redirected to the sign in page, sign in with the user you created in the previous module.
  3. After the map has loaded, click anywhere on the map to set a pickup location.
  4. Choose Request Unicorn. You should see a notification in the right sidebar that a unicorn is on its way and then see a unicorn icon fly to your pickup location.