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 the page to create a new app on Heroku

Select the GitHub option again and search for the client repo this time.

Screenshot showing how to connect to GitHub client repo

Then, let's click Deploy Branch to start the manual deployment process.

When it finishes successfully, we can click View 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!