API hub configuration

In this guide, you'll learn to set environment variables in the API hub and access them in your extension handlers.

Configuring variables in API hub

You can provide your Frontastic API hub extensions with credentials to connect to your backend services. To do so, you need to edit the project.yml file in a directory you're not usually meant to touch: <customer>_<project>/config/project.yml. In this file, you can edit the section configuration and store arbitrary YAML content, which is then available to the FrontasticContext in each extension point.

apiKey: 
configuration:
    # ...
    commerce-backend:
        apiKey: <perfect-api-key-secrets>
        serverKey: <secret-server-key>

❗

️ Don't edit anything else!

You'll break your API hub setup if you edit any other section in this file.

Accessing variables in extension handlers

You can access the specified variables through the context property that's passed in as the second argument to your extension handlers. See the examples below to learn more.

export default {
  "dynamic-page-handler": async (
    request: Request,
    context: DynamicPageContext
  ): Promise<DynamicPageSuccessResult | DynamicPageRedirectResult | null> => {
    const { apiKey } =
      context.frontasticContext.project.configuration["commerce-backend"];
    // fetch data for dynamic pages
  },
  "data-sources": {
    "amazing-data-source": async (
      config: DataSourceConfiguration,
      context: DataSourceContext
    ): Promise<DataSourceResult> => {
      const { serverKey } =
        context.frontasticContext.project.configuration["commerce-backend"];
      // fetch data with the server key
    },
  },
  actions: {
    commerce: {
      getStores: async (
        request: Request,
        context: ActionContext
      ): Promise<Response> => {
        const { serverKey } =
          context.frontasticContext.project.configuration["commerce-backend"];
        // fetch stores with the server key
      },
    },
  },
};

Sourcing hierarchy

The files are sourced in the following order and values are overwritten by later files:

Production

• project.yml

Staging

• project.yml
• project.yml.staging

Development

• project.yml
• project.yml.dev

So, if you have the same key-value pair specified in both project.yml and project.yml.dev the .dev one will be used.