5. Deploying Apollo Client2m

💻 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 Railway are similar to what we previously did for the server. We'll connect our GitHub repo to Railway, 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 Railway, we can change this value to that production uri.

const client = new ApolloClient({
uri: "https://odyssey-lift-off-part5-server-production.up.railway.app/", // 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.

Task!

📋 Deploying on Railway

Back over to our Railway project, we'll click the New button and select the GitHub Repo option.

Railway dashboard, click New

This time, we want to connect our client app repository.

We don't need to set any environment variables for this app. Instead, we can go right to the Settings tab and click Generate Domain.

Let's check out the generated URL 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
Task!

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!

Previous
Next