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?
thanks!
Luke
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.
2 Likes
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"]
[nix]
channel = "stable-22_11"
[env]
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"
[gitHubImport]
requiredFiles = [".replit", "replit.nix", ".config"]
[packager]
language = "nodejs"
[packager.features]
packageSearch = true
guessImports = true
enabledForHosting = false
[languages]
[languages.javascript]
pattern = "**/{*.js,*.jsx,*.ts,*.tsx}"
[languages.javascript.languageServer]
start = "typescript-language-server --stdio"
[deployment]
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.
2 Likes
