Can i use replit secrets in a front-end react project?

I want to use a different url for a backend server for the deployed version of my frontend react project. Ideally, I would just have an environmental variable that would determine which url to use, so that the dev version of my react project would use one base url for the backend server, and the deployed version of my react project would use a different url for the backend server.

It seems like replit will not let me use my own .env files, and will also not let me access replit secrets in a react environment, so i don’t know how to accomplish this. Am i missing something? I tried using REACT_APP_ prefix for my replit secret, but then i get a ‘process is not defined error’ when i try to use it as replit suggests, like this: const BASE_URL = process.env[‘REACT_APP_BACKEND_URL’]

any suggestions?



Hi @Lukewhite9!

HTML/JS/CSS is the only “special” kind of Repl. Things that apply for “all” Repls do not apply, and things that apply for it do not apply to others. Like the HTML/JS/CSS Repls are not actually hosted in the Repl, and they also do not have access to secrets or Replit DB. This is because they are frontend, and if they had access to secrets or DB, anyone who used your website could view / modify them!

If you want to use these features, I recommend a backend like Python Flask or NodeJS Express, which will let you safely use these features.


But how can i set my base url for my backend server to be different depending on the dev vs deployed version of my repl? Do i just have to hard-code it differently when i deploy, or is there another method i’m missing?

You could configure the .replit hidden file. It has a section for the dev environment and the deployed environment. It’s pretty versatile since it just executes the run command as bash so the sky’s the limit.

In the case of this file, lines 1-2 are the dev environment and lines 10-11 are the deployment environment.

1 Like

Thank you for the suggestion! But, I don’t fully understand. What do I put in the .replit file, and how do I reference that variable in my code? I can’t use process.env in react, right?

1 Like

The .replit file should already exist (if not your repl is broken and will not work). You can store your secrets as variables using Replit Secrets, but that won’t work on a frontend project. Backend is required.

You can’t use that on any project on Replit; use Secrets instead.

1 Like

Yes I have the .replit file.

This is it’s content:

run = "npm run dev"
entrypoint = "src/App.jsx"

hidden = [".config", "tsconfig.json", "tsconfig.node.json", "vite.config.js", ".gitignore"]

channel = "stable-22_11"

PATH = "/home/runner/$REPL_SLUG/.config/npm/node_global/bin:/home/runner/$REPL_SLUG/node_modules/.bin"
npm_config_prefix = "/home/runner/$REPL_SLUG/.config/npm/node_global"

requiredFiles = [".replit", "replit.nix", ".config"]

language = "nodejs"
 packageSearch = true
 guessImports = true
 enabledForHosting = false

 pattern = "**/{*.js,*.jsx,*.ts,*.tsx}"
   start = "typescript-language-server --stdio"

build = ["sh", "-c", "npm run build"]
run = ["sh", "-c", "npm run preview"]
deploymentTarget = "cloudrun"

If I wanted to use a different base url, let’s say with variable BASE_URL, how could I modify this .replit file to define it differently in my dev version vs. my deployed version? Are you saying that’s possible? How would I reference the content of the .replit file elsewhere in my react front end code?

That isn’t possible. Sorry if I gave the wrong impression.

No worries! So, it sounds like there is no way in Replit to do what I’m trying to do: in a front-end react project, direct api calls to different URL’s, depending on whether in the it’s the dev version or deployed (prod) version of said react project.