5. Deploying Apollo Client

💻 Deploying the client app

Our server is now running in production, but we're not done yet. Let's not forget about our client app, that's what the catstronauts-in-training are going to use!

The steps to get our client application up and running on Heroku are similar to what we previously did for the server. We'll connect our GitHub repo to Heroku, and then deploy.

Before we go ahead, we need to change a property in our client code.

👩🏽‍💻 Updating the client code

Let's go to our client repo this time. Open up the src folder, and the index.js file. Here, we previously initialized our Apollo Client with properties such as the uri and cache.

Right now, our uri property is set to localhost:4000. Now that our server is on Heroku, we can change this value to that production uri.

const client = new ApolloClient({
uri: 'https://server-catstronauts.herokuapp.com/', // change this to YOUR server URI
cache: new InMemoryCache()

That's the only change we need to make. With that, let's save and commit our changes, and push those changes to our main branch on GitHub.


📋 Deploying on Heroku

Following the same steps from the previous lesson, we'll create a new app on Heroku and give it a name.

Screenshot showing Heroku and creating a new app

Note: As of April 18th 2022, Heroku is preventing the deployment of apps from GitHub through the Heroku dashboard or via Heroku automation. The steps in the video rely on deploying using the Heroku dashboard GitHub integration. Please refer to the section below for alternative steps to deploy your app using the Heroku CLI.

Install the Heroku CLI (if you haven't already)

Refer to the Heroku instructions in their documentation to install the Heroku CLI for your operating system.

Create a Heroku remote to our existing app.

Back to our terminal window, let's add our new Heroku client app as a remote connection to our repo using the heroku git:remote command.

heroku git:remote -a [APP_NAME]

Replace [APP_NAME] with the name of the app you created earlier.

Deploying code

To deploy our client app, we'll use the Heroku CLI in the terminal and run the following command:

git push heroku main

When it finishes successfully, go back to your client app on the Heroku dashboard, click on Open App and there it is! We can see our app with its homepage of tracks, click on a track and see its details and the number of views updating!

Houston, we have lift-off! 🚀🐱🧑‍🚀

GIF of cat being picked up with space background appearing as if being launched into space


Our Catstronauts app is now fully running in production, which means it's available for the world to see. Pretty exciting. And maybe a little scary. Fortunately, we have the schema registry to make us more confident when we add new features, fix bugs, and make changes to our schema. Let's see what that process looks like!