Question

Environment Variables not working for Static Site on DigitalOcean App Platform

Hey,

Like the title says, it seems like the environment variables are not working for my static site on App Platform.

I’m using create-react-app to build my React project.

This is my environment variable setup inside of App Platform: https://imgur.com/7fil5A7

I’ve added console logs to print out process.env, this is the result: https://imgur.com/BpDbZjv NOTE: The logs I added can be found here: https://github.com/stadro/web-app/blob/development/src/index.tsx

Like you can see, it doesn’t detect the environment variables specified inside of App Platform. Any idea what I’m doing wrong?

Project on GitHub: https://github.com/stadro/web-app/tree/development Project on DigitalOcean: https://stadro-qw44y.ondigitalocean.app/ DigitalOcean App Platform Spec:

name: stadro
region: ams
databases:
  - name: database
    engine: PG
    version: "12"
    size: db-s-dev-database
    num_nodes: 1
services:
  - name: server
    http_port: 3000
    instance_count: 1
    instance_size_slug: basic-xxs
    dockerfile_path: Dockerfile.development
    routes:
      - path: /api
    github:
      branch: development
      deploy_on_push: true
      repo: stadro/server
    envs:
      - key: NODE_ENV
        scope: RUN_AND_BUILD_TIME
        value: development
      - key: DOMAIN
        scope: RUN_AND_BUILD_TIME
        value: ${_self.PUBLIC_URL}
      - key: POSTGRES_HOST
        scope: RUN_AND_BUILD_TIME
        value: ${database.HOSTNAME}
      - key: POSTGRES_PORT
        scope: RUN_AND_BUILD_TIME
        value: ${database.PORT}
      - key: POSTGRES_USER
        scope: RUN_AND_BUILD_TIME
        value: ${database.USERNAME}
      - key: POSTGRES_PASSWORD
        scope: RUN_AND_BUILD_TIME
        value: ${database.PASSWORD}
      - key: POSTGRES_DATABASE
        scope: RUN_AND_BUILD_TIME
        value: ${database.DATABASE}
      - key: POSTGRES_CA_CERT
        scope: RUN_AND_BUILD_TIME
        value: ${database.CA_CERT}
static_sites:
  - name: web-app
    environment_slug: node-js
    build_command: yarn start:development
    routes:
      - path: /
    github:
      branch: development
      deploy_on_push: true
      repo: stadro/web-app
    envs:
      - key: NODE_ENV
        scope: BUILD_TIME
        value: development
      - key: SERVER_URL
        scope: BUILD_TIME
        value: ${server.PUBLIC_URL}
Show comments

Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bojan D
DigitalOcean Employee
DigitalOcean Employee badge
April 22, 2021
Accepted Answer

Hello,

Static sites are served as static content from CDN so they do not have access to run time environment and only build time environment variables apply to static site components.

One way to accomplish this is to generate a configuration file that you can read as part of the javascript (React) application, that then gets compiled into the final static content output.

For example if your static site spec has the env vars configured like you state:

envs:
      - key: NODE_ENV
        scope: BUILD_TIME
        value: development
      - key: SERVER_URL
        scope: BUILD_TIME
        value: ${server.PUBLIC_URL}

you could have a bash file config.sh like so:

#!/usr/bin/env bash
set -eE

# default for development
dev_api="http://0.0.0.0:3000"

# set to SERVER_URL env var or default if not present
api_url="${SERVER_URL:-$dev_api}"

# create JSON data
json=$(cat <<-END
    {
        "baseURL": "$api_url"
    }
END
)

# safe it to config.json
echo "creating src/config.json"
echo "$json" > "src/config.json"

As part of the build process you would call the bash file:

build_command: "./config.sh && yarn build"

Then in your React application you would use the config variable

import { baseURL } from './config.json'
// ...
const apiClient = axios.create({ baseURL })

Assuming that the building and bundling mechanism you use can automatically include the new file (config.json), that should allow you to call the server api. Hope this helps.

What worked for me was to prepend REACT_APP_ to the client-side environment variable.

Adding Custom Environment Variables

This comment has been deleted

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel