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}
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!
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.
This comment has been deleted
What worked for me was to prepend REACT_APP_ to the client-side environment variable.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.