How can I deploy a GraphQL API and its React Client on Heroku?

Question

I have created an application with a GraphQL API and a React Client. My project's structure is as follows:

project
│   README.md    
│
└───server
│   │   package.json
│   │   
│   └───src
│       │   index.ts
│       │
│       └───entity/migration/resolver/etc.
│       │   ...
│   
└───client
│   │   package.json
│   │
│   └───public
│   │   │   index.html
|   |   |   ...
│   │   │
│   └───src
│       │   index.js
│       │
│       └───components
│       │   ...

I'd like to deploy this entire app to Heroku, but I'm not quite sure how to do so. On my local machine, I have my server running on localhost:4000 and my client running on localhost:3000, and my client makes requests to my server using @apollo/client. Would I need to deploy two separate apps to Heroku, or is there a way to deploy these both as one app?

Here's the code from my server/src/index.ts:

import dotenv from "dotenv"
import "reflect-metadata"
import { ApolloServer } from "apollo-server"
import { buildSchema } from "type-graphql"
import { createConnection } from "typeorm"

(async () => {  
  await createConnection()  

  const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [`${__dirname}/resolver/*.ts`],
    })
  })

  const port = process.env.PORT || 4000
  apolloServer.listen(port, () => {
    console.log(`Server started on port: ${port}`)
  })
})()

And here's the code from my client/src/index.js:

import React from "react"
import ReactDOM from "react-dom"
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"

import App from "./components/App"

const client = new ApolloClient({
    uri: process.env.ENDPOINT || "http://localhost:4000",
    cache: new InMemoryCache()
})

ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById("root"))