Welcome to Part 2 of deploying our Apollo GraphQL Castronaut App with Amazon Web Services. In Part 1, we deployed our Apollo GraphQL server using AWS Lambda. In this part, we will use AWS Amplify to launch our client side React Application.
Prerequisites
- Complete all lessons up to Apollo GraphQL tutorial – Lift Off Part 5 – Lesson Deploying Apollo Server
- Setup an AWS account
- Install the AWS CLI
- Configure the AWS CLI with user credentials
- Commit your updated ApolloClient URI changes to your GitHub Fork
Configuring AWS Amplify
To get started, navigate to AWS Amplify and sign into your account. Press the Get Started button and select the Amplify Hosting option.
Select Amplify Hosting to Deploy our React AppFrom here, much like for Heroku, you will need to connect your Git repository to AWS. Go ahead and select GitHub and continue. It’s best practice to ensure that when dealing with third party vendors that you authorize only the repository you need. In this case, that’s the odyssey-lift-off-part5-client repository.
After you have authorized with GitHub, you can select your repository and which branch you will want to deploy (in our case it’s main). Confirm your choices and press Next.Authorize GitHub to your Repository
Note: ensure the backend GraphQL server we set up in the previous tutorial (or elsewhere) is operational. If in the previous tutorial you deleted your AWS Lambda GraphQL server, you can easily spin it back up back navigating your terminal to the project’s root directory and typing
serverless deployMake sure you update the ApolloClient URI with your updated endpoint and commit the changes to GitHub before proceeding.
Deploying our Client side React App
AWS will now provision a server, build, and then deploy your react application which may take a few seconds to a few minutes.
While your application is building, you may notice the text Continuous deploys set up. This is enabled by default and means that any changes pushed to your GitHub branch will automatically trigger your application to rebuild with the new updates.AWS Amplify will deploy your react App
Once your application has been verified, our application is live! The link to your castronaut app is located right below the branch title (main). Pressing that link should bring us to our live application! You are now cleared to finish off your Castronaut mission and get credit as a Certified Associate Apollo GraphQL Developer!
Cleaning Up with AWS
Remember, once you are done using AWS services to delete them to avoid any unexpected costs. To delete our client side app, select Actions from the top left and select Delete app. You will be prompted to confirm the deletion of the App. Next, using the terminal in your server side root directory, enter the following command to remove everything that we created for the GraphQL server from your AWS account (including the Cloudformation, S3 Bucket, and Lambda Function).
npx serverless removeNow you are good to go! If you found this article helpful, feel free to reach out to me on Twitter. Thanks for reading!
