I have deployed a remix application on Vercel. Further, I have defined some environment variables in Vercel and want to perform some checks and use env variables in my app:
if (process.env.NODE_ENV === 'production') {
setPaths({
path: process.env.prod_path,
})
}
It gives me error, process is not defined. I even tried adding process && in the if statement, it did not help.
Second, I am unable to even set the env variables locally. I followed remix docs but it gives me undefined every time when I console.log as mentioned in the docs.
Any guide/pointer towards using environmental variables in remix would be really helpful.
I was able to solve this problem. I was using loader/useLoaderData to access server side environment variables. The problem was that I was trying to call these at component level. Apparently, we can only call them at the route level.
I'm not sure, but the name of the function (setXXX makes me think this is the setter of a hook), makes me think you are trying to use process.env in the browser, but process.env is only available in server-side code, if you want to use env variables in your react app you can use this guide to send the variables from the server side to you react app. If this code is server side code, maybe it's worth making a reproduction in stackblitz so we can have a better look at it.
Related
I've been using Replit.io as a means of hosting a bot I built. As a part of that I have to store some API keys / secrets / or ENV vars. The built in tools for this: https://docs.replit.com/tutorials/storing-secrets-and-history
are super helpful, and work, but I recently got hung up where these variables were returning as undefined. How can this be solved?
Simple refresh of the page after adding and saving the variables then waiting a minute or two before re-starting the bot itself.
I'm stuck on what seems like a simple task. I want to run a weather app I built in Svelte and run it on Replit. The app uses an API with a key, so I added my key to Secrets in Replit and gave it the name MY_API_KEY.
In the file that calls the API, I used the following:
const MY_API_KEY = process.env.MY_API_KEY;
Unfortunately, that doesn't work. My app doesn't load. When I change the variable in my file to include the key itself, the app runs fine, so I must not be calling up the environmental variable right. Does anyone know how this works in Svelte? I'd appreciate any help.
The base Svelte template on Replit uses Vite for building it's apps. This means you can do it the Vite way:
Call your environment variables something like VITE_ApiKey=123
And in your code use import.meta.env.VITE_ApiKey
Note that this only works for environment variables prefixed with VITE_
I'm just now realizing this behavior about nextjs env vars here, which is different from how nodejs apps are usually set up:
Note: .env files should be included in your repository, and
.env*.local should be in .gitignore, as those files are intended to be
ignored. Consider .local files as a good place for secrets, and
non-local files as a good place for defaults.
So I'm thinking of restricting myself to using a secret available only at build-time, to be used inside a "backend" /api route.
But do /api routes even behave like true backends? Since nextjs is SSR only when it has to be (?), I presume this /api code can also end up in the browser, therefore exposing the secret? Is there a way to force code to only run server-side and not in-browser? I am new to SSR concepts. My "real" backend won't be up for a while. This is not a hugely important secret, but still. Thx.
API routes won't end up in the client bundle, so any code you put in /pages/api will stay hidden from the user. These routes are meant to be run exclusively on a server environment.
The same concept applies to getStaticProps which only runs on a server during build.
NextJS has a mechanism called "inlined environment variables". Any references to environment variables that start with NEXT_PUBLIC_ will be automatically replaced with their values. So if your local/build/production machine has the variable NEXT_PUBLIC_APPNAME set, NextJS will replace references to process.env.NEXT_PUBLIC_APPNAME with the variable's value.
Alternatively you can define variables in an .env file. These will also be used by your application, and may end up in your client bundle if you reference them in any code that renders on the client (like the JSX in pages/about.js).
Conclusion: secrets should be added to .env, and only be referenced in server-side code like API routes and getStaticProps.
You may also be interested in this tool: https://next-code-elimination.vercel.app/
It lets you verify that your server-side code stays out of the client bundle.
I am on an Electron + Create React App stack.
I am using Electron Updater (https://github.com/develar/electron-updater) for auto updates.
Platform: Linux, Format: AppImage.
When my app checks for updates, I get the following error:
APPIMAGE env is not defined.
Has someone experienced the same issue? Suggestions required.
Please don't use electron-updater anymore, since it is no longer supported according to its GitHub page.
Most often, this occurs when you are trying to use the auto updater in development mode (or non-packaged AppImage mode). It only works in a packed production build.
For me however, this also occurred in a packed AppImage, and turned out to be caused by using the webpack DefinePlugin, like this:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
},
...
Removing the process.env definition allowed APPIMAGE to be defined once again in the distributed package. It seems the rest of the definitions can be left in place safely without breaking the auto-updater.
If removing this definition is not possible for your use-case, according to some users it's possible to simply override it at the beginning of your main thread (not renderer thread) file like this:
process.env.APPIMAGE = path.join(__dirname, 'dist', `MyApp-${app.getVersion()}.AppImage`)
... obviously with the correct file name in the 3rd argument of Path.join.
This override approach didn't seem to do anything for me though, so I myself went with simply removing process.env from the DefinePlugin definitions, but it may help in other cases.
try to use electron-builder for building your app cause this module is is in maintainance only mode.
the autoUpdate for linux is not possible, you can do that only for mac and windows try to read this documentation.
i am trying to store my api keys in a variable via the terminal but i am unsure why it is not saving/storing my api keys.
for example, in the terminal when i type the below:
export GMAIL_USERNAME="myname#gmail.com"
then when i type in env i can see the varaibale has been stored:
but when i restart my terminal the variable GMAIL_USERNAME="myname#gmail.com" is no longer there
could one tell me where i am going wrong? all i would like to do is
store in development my api secret keys in a variable. your help would
be much appreciated
While you can persist environment variables by adding them to a script that gets called on shell startup, that approach has a few problems.
The biggest problem is that they are available globally across your shell, and not scoped to a project.
What happens if you have another project, and want to use a different gmail account?
A better solution is using dotenv or direnv and set those environment variables for the current project only.