Use env variables with BitBucket - javascript

Stuck with Bitbucket pipelines.
In my code i have some secret info
apiKey: process.env.apiKey,
authDomain: process.env.authDomain
But bitbucket pipeline during build can't access them.
Have set up variables via Bitbucket Env variables UI
In yml file i can access variables via $Variable, but how to do this with code?
Thanks

You can set up environment variables in Bitbucket, and access them via $variableName in the YAML build file.
Bitbucket uses the environment variables recorded in Bitbucket when running your build pipeline. But it only does this inside your YAML build file. It won't do anything with environment variables referenced in the rest of your code.
For the rest of your codebase, environment variables are worked out on the hosting server at runtime. So if you use environment variables elsewhere in your code (e.g. in your app.js), you need to configure these in your hosting environment.

This should provide more context for your use case - bitbucket docummentation
Create the environment variable in your env file
use $ENV_NAME to access your specified variable

Related

Reasoning between environment from express and dotenv

I've been seeing a lot of NodeJS and dotenv tutorials and articles where they define an ENV_MODE=development variable within the config.env file.
But require('express').get('env') already gives us the environment express is set on running. Why not just use the express env variable to check the environment mode? Why do we need to also set the explicit variable in the .env file?
You have to set the environment variable somewhere.
Doing it in a .env file ties it to a specific computer, which means you don't have to either:
Remember to set it manually before you run the program
Bind it into package.json and risk running the wrong command when you run the code on staging/qa/production
… and it lets you keep it with any other environment variables you have (such as API keys) which shouldn't be committed to version control (since they are secrets).

React configure variables based on environment

In my react app, I have a component say chart in which an external API is called.
While running in the local, the API URL will be localhost:8080
When deployed and the API URL should be prod:8080
The examples based on .env uses process.env and inside the component where the API is called process is undefined.
Is there a way to access the env file inside the component which runs on the browser.
If you are using CRA:
React's documentation on environment variables:
"Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_."
Otherwise you might use something like dotenv and import it in your application index.tsx
For your specific use case, you also want to have 2 .env files since you want one for development and production. So take a look a this.

Using environment Variables in Javascript file when deploying it on Heroku

I have an app written in JS,HTML and CSS which uses an API KEY. I have used environment variables locally to use API KEY. I have deployed it to heroku and while pushing to gitlab, I have added .env to gitignore and now after deployment, map is not visible because it can not access API KEY for maps.
I want to ask how to use environment variables in production (in Heroku deployment)?
You can either use their online dashboard or the CLI to add env vars.
See their docs here:
https://devcenter.heroku.com/articles/config-vars#managing-config-vars

How to use environmental variables in a static Netlify page

So i have a static Webpage which uses some API. There's app.js file that has API key in it stored in an object property.I need to hide it using Netlify dev. How do I do that? How do I use Netlify dev tools in native js? I most probably need node js installed as well but this topic is not entirely clear to me... Could someone make a step by step tutorial for me?
If it's a static site, it won't be able to directly access the hidden netlify env variables.
If you are hosting the app.js file along with your static site then it will be easy for someone to browse to it and see the API key you are trying to hide.
One solution though is to define a Netlify Function that does the API call, and then the JS in your static site can call that function.
Your Netlify Function will be effectively a backend for your app, and can access the ENV variables you set in the Netlify UI, via process.env.
See this tutorial for a step-by-step guide.
Update re the new gatsby-build information in comments.
You can put variables in a git-ignored .env file, which means they will not end up on git, but will still get pulled in and included in the gatsby production code, which will be visible to the client, so isn't recommended for API access keys. Ideally you should connect via a backend to secure those keys, as in the above original answer.
However, instead of using a .env file, if you are using the Netlify Dev CLI then this will automatically pull down any env vars you have set in the online Netlify settings, and allow you to use those in your local environment.
From the cli docs:
Netlify Dev brings the functionality of your Netlify production environment directly to your local machine. This includes custom headers/redirects and environment variables.

How do I link my Heroku Config Variables to a Node.js app

I've built a simple Twitter bot using Node.js, that can be found here. To avoid my Twitter access tokens being on view in my public Github repository I have deleted the config.js file and instead added the tokens into Heroku within the settings > config variables section. I'm now struggling to 'get' or 'call' these config variables for my app.
Any help would be appreciated.
Config Variables Heroku
Those configuration variables are stored in the environment for the running process: you can fetch them via process.env like any other environmental variable e.g. process.env.access_token_key.

Categories