Variable setup correctly, working in railway CLI, but not accessible in staging

brandonmchu

HOBBYOP

2 years ago

I have a variable setup in my staging service, REACT_APP_CLERK_PUBLISHABLE_KEY

my react app is trying to call that variable:

> process.env.REACT_APP_CLERK_PUBLISHABLE_KEY

index.tsx///

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import { ClerkProvider } from '@clerk/clerk-react'

const PUBLISHABLE_KEY = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;

console.log('Publishable Key:', PUBLISHABLE_KEY); // Add this line

if (!PUBLISHABLE_KEY) {

throw new Error("Missing Publishable Key")

}

const root = ReactDOM.createRoot(

document.getElementById('root') as HTMLElement

);

root.render(

<React.StrictMode>

</React.StrictMode>

);

Getting error in browser:

index.tsx:11 Uncaught Error: Missing Publishable Key

at index.tsx:11:9

at index.tsx:20:11

I tried running locally in railway CLI and it works. Not sure how to troubleshoot anymore.

6 Replies

brody

EMPLOYEE

2 years ago

Do you have that variable added in the service variables?

brandonmchu

HOBBYOP

2 years ago

Yes

Again, I tired this through railway CLI (which as I understand uses the railway service variables). and it works locally with it

brody

EMPLOYEE

2 years ago

Are you deploying with a Dockerfile or nixpacks? if Dockerfile, please attach it.

brandonmchu

HOBBYOP

2 years ago

# Use an official Node runtime as the base image
FROM node:20-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the frontend code
COPY . .

# Build the app
RUN npm run build

# Install serve to run the application
RUN npm install -g serve

# Expose the port the app runs on
EXPOSE 3000

# Serve the app, using the PORT environment variable if available
CMD ["sh", "-c", "serve -s build -l ${PORT:-3000}"]

via Dockerfile - here it is

brandonmchu

HOBBYOP

2 years ago

And my package.json fwiw//

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@clerk/clerk-react": "^5.2.8",
    "@headlessui/react": "^2.1.1",
    "@heroicons/react": "^2.1.4",
    "@supabase/supabase-js": "^2.44.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.7.2",
    "clsx": "^2.1.1",
    "eslint-config-react-app": "^7.0.1",
    "framer-motion": "^11.2.12",
    "marked": "^13.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.0",
    "react-scripts": "5.0.1",
    "serve": "^14.2.3",
    "socket.io-client": "^4.7.5",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "serve": "serve -s build -l 3000"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/socket.io-client": "^3.0.0"
  }
}

brody

EMPLOYEE

2 years ago

Two issues -

You are missing ARG directives thus variables are not available during the build, they are needed during the build because variables are "baked" into the site files during the build.
You are using serve, in my experience serve has caused some difficulties for users so it would be best to use a production-grade web server, such as Caddy.

Here is an updated Dockerfile -

# Use an official Node image for the build step
FROM node:20-alpine AS build

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy the rest of the frontend code
COPY . ./

# Define any needed variables during the build here
ARG REACT_APP_CLERK_PUBLISHABLE_KEY

# Build the app
RUN npm run build

# Use caddy as the final image
FROM caddy

# Set the working directory in the container
WORKDIR /app

# Copy in the Caddyfile from the project files
COPY Caddyfile ./

# Format the Caddyfile
RUN caddy fmt Caddyfile --overwrite

# Copy over the build folder from the build stage
COPY --from=build /app/build ./build

# Start the Caddy web server
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]

You will also need the Caddyfile from this repo - https://github.com/brody192/create-react-app-starter

Welcome!