Build and run queries against Apollo Server

In non-production environments, Apollo Server 4's landing page is an embedded version of Apollo Sandbox (served at http://localhost:4000 by default):

Apollo Server serves a different landing page in production.

Apollo Sandbox is a special mode of Apollo Studio used for local development, which doesn't require an Apollo account. Sandbox includes the Apollo Studio Explorer, a powerful web IDE that enables you to build and run operations against your server (or any other reachable server).

Production vs. non-production

In production environments (when NODE_ENV is production), Apollo Server serves a different landing page:

This is partly because Apollo Server disables introspection in production by default, which means that tools like Apollo Sandbox don't work.

For this reason, if you choose to change your Apollo Server landing page, we recommend using different settings for production and non-production environments (potentially even disabling your landing page in production).

Changing the landing page

You can change the landing page that's served from Apollo Server's base URL. You can choose to configure the default landing page, serve GraphQL Playground (a legacy open-source GraphQL IDE), create a completely custom landing page, or you can disable the landing page entirely.

You do this by installing one of a few different Apollo Server plugins.

Configuring the default landing page

Apollo Server uses one of these plugins to display its default landing page, depending on the environment:

ApolloServerPluginLandingPageLocalDefault (non-production environments)
ApolloServerPluginLandingPageProductionDefault (production)

You can install either of these plugins manually to configure its behavior.

For example, below, we set up our local landing page to serve up a splash page which contains a link to the Apollo Sandbox:

index.ts

1
import { ApolloServer } from '@apollo/server';
2
import {
3
  ApolloServerPluginLandingPageLocalDefault,
4
  ApolloServerPluginLandingPageProductionDefault,
5
} from '@apollo/server/plugin/landingPage/default';
6

7
const server = new ApolloServer({
8
  typeDefs,
9
  resolvers,
10
  plugins: [
11
    process.env.NODE_ENV === 'production'
12
      ? ApolloServerPluginLandingPageProductionDefault()
13
      : ApolloServerPluginLandingPageLocalDefault({ embed: false }),
14
  ],
15
});

For all available configuration options for these plugins, see the API reference.

Custom landing page

You can serve a custom HTML landing page from Apollo Server's base URL. To do so, define your own custom plugin that calls the renderLandingPage method, like so:

index.ts

1
const server = new ApolloServer({
2
  typeDefs,
3
  resolvers,
4
  plugins: [
5
    {
6
      async serverWillStart() {
7
        return {
8
          async renderLandingPage() {
9
            const html = `
10
              <!DOCTYPE html>
11
              <html>
12
                <head>
13
                </head>
14
                <body>
15
                  <h1>Hello world!</h1>
16
                </body>
17
              </html>`;
18
            return { html };
19
          },
20
        };
21
      },
22
    },
23
  ],
24
});

Disabling the landing page

You can disable Apollo Server's landing page by providing the following plugin to the ApolloServer constructor:

index.ts

1
import { ApolloServerPluginLandingPageDisabled } from '@apollo/server/plugin/disabled'; 
2

3
const server = new ApolloServer({
4
  typeDefs,
5
  resolvers,
6
  plugins: [ApolloServerPluginLandingPageDisabled()],
7
});

Edit on GitHub

Building integrations

Request format