React can't access my environment variables in kubernetes

You can use the React-dotenv : https://www.npmjs.com/package/react-dotenv

React example code :

import React from "react";import env from "react-dotenv";export function MyComponent() {  return <div>{env.REACT_APP_GHOST_API_KEY}</div>;}

Deployment goes like :

apiVersion: apps/v1kind: Deploymentmetadata:  name: dockuser-site-deploymentspec:  replicas: 1  selector:    matchLabels:      component: dockuser-site  template:    metadata:      labels:        component: dockuser-site    spec:      imagePullSecrets:        - name: dockhubcred      containers:        - name: dockuser-site          image:dockuser/dockuser-site:v003          ports:            - containerPort: 80          env:          - name: REACT_APP_GHOST_API_KEY            # value: "83274689124798yas"            valueFrom:              secretKeyRef:                name: ghostapikey                key: apikey

Option : 2

You can also use the config.json file and get variables from there.

import { Component } from '@angular/core';import Config from "../config.json";@Component({  selector: 'app-root',  templateUrl: './app.component.html'})export class AppComponent {  environment = Config.ENV;  baseUrl = Config.BASE_URL;}

config.json

{  ENV: "$ENV",  BASE_URL: "$BASE_URL"}

you can save the whole config.json into the configmap and inject into the volume.

https://developers.redhat.com/blog/2021/03/04/making-environment-variables-accessible-in-front-end-containers#inject_the_environment_variables