Frontity Docs
  • ยป Welcome to Frontity
  • ๐Ÿš€Getting started
    • Quick start guide
  • ๐Ÿ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • ๐Ÿ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • ๐Ÿ—๏ธArchitecture
    • Decoupled Mode
    • Embedded Mode
  • ๐ŸŒŽDeployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • ๐ŸŒ—Isomorphic React
  • โšก๏ธ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • ๐Ÿ”ŽSEO
  • ๐Ÿ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • ๐Ÿ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • Adding environment variables to a Frontity Project
  • Accessing the environment variables
  • Private access to the environment variables
  • Generic access to the environment variables

Was this helpful?

  1. Guides

Using Environment Variables in a Frontity project

PreviousSetting the URL of the WordPress data sourceNextWordPress requirements for Frontity

Last updated 3 years ago

Was this helpful?

Environment variables are a very useful way of managing custom data that shouldn't be in the code. A prime example would be API KEYs or other authentication credentials for external APIs.

Since a we need to consider whether these environment variables should be accessible only to the code running server-side, or whether they should also be accessible to the code running client-side.

Adding environment variables to a Frontity Project

In order to access environment variables from your Frontity project you can use a package such as or .

If you use cross-env, you will not have to do anything special in Frontity. You just need to add it to your package.json scripts thus:

{
  "scripts": {
    "dev": "cross-env MY_VARIABLE=xxx frontity dev",
    "serve": "cross-env MY_VARIABLE=xxx frontity serve",
    "build": "cross-env MY_VARIABLE=xxx frontity build"
  }
}

dotenv only runs in Node, so rather than using an index.js file you should instead .

If client.js and server.js exist, the index.js file can also still exist but it will be ignored by both the server and the client.

So for dotenv we must create a .env file:

MY_VARIABLE=xxx

Accessing the environment variables

The content of the server.js file could be something like this:

import { config } from "dotenv";
import { fetch } from "frontity";
import packageClient from "./client";

// Launch dotenv.
config();

export default {
  ...packageClient,
  actions: {
    theme: {
      ...packageClient.actions.theme,
      beforeSSR: async ({ state }) => {
        const {API_TMDB} = process.env
        const URL = `https://api.themoviedb.org/3/movie/550?api_key=${API_TMDB}`
        const detailsMovie = await fetch(URL)
          .then( response => response.json() )
        state.tmdb = { detailsMovie }
      }
    }
  },
};

In this example a API_TMDB environment variable is defined in a .env file included in that project

If you need to use the ENV variable also in the client, the best way is to add it to the state.

You can use frontity.settings.js or your package state for that, whichever is more appropriate for your situation.

frontity.settings.js:

import { config } from "dotenv";

// Launch dot-env.
config();

const settings = {
  name: "my-project",
  state: {
    env: {
      myVariable: process.env.MY_VARIABLE
    }
  },
  packages: [
    // ...
  ];
}

packages/my-package/src/server.js:

import { config } from "dotenv";

// Launch dot-env.
config();

export default {
  state: {
    theme: {
      myVariable: process.env.MY_VARIABLE,
    },
  },
};

Either way, the ENV variable will be serialized with the rest of the state and it will be sent to the client for the React hydration.

Please note that any ENV variable exposed in state will end up in the client. Do not expose any secret API KEY or password.

Private access to the environment variables

As for our Frontity theme package by creating separate server.js and client.js files (that will each only be executed in the appropriate environment), we are therefore able to privately access the content of the environment variable on the server (for example to perform a request to an external API and storing this data in the state so it can be accessed from your React components).

illustrating the use of an environment variable in server.js.

This method (beforeSSR defined in the server.js) will ensure that your API credentials are secure (i.e. they will not be part of the client bundle) and are only visible to the code running server-side. However, remember to take into account that this logic will be executed in the (i.e. for any page loaded the first time).

Generic access to the environment variables

๐Ÿ“–
Frontity app is an Isomorphic React app
cross-env
dot-env
divide the content of your index.js file across two files, namely client.js and server.js
Here a demo
we can create different entry points
initialization (or bootstrapping) of the Frontity app