What is the process for modifying environment variables within Backstage.io?

Below is my configuration in Backstage:

auth:
  environment: development
  providers:
    gitlab:
      development:
        clientId: ${AUTH_GITLAB_CLIENT_ID}
        clientSecret: ${AUTH_GITLAB_CLIENT_SECRET}

I'm relatively new to configurations. How can I edit AUTH_GITLAB_CLIENT_ID to add a value to it? I have seen a method where values are passed during start up like this:

# navigating to the root of the Backstage repo
» cd packages/backend
» env AUTH_GITHUB_CLIENT_ID=eafc816045b5533ba581 AUTH_GITHUB_CLIENT_SECRET=34922f6547991760e8f5219a529a9c00b0fd44ea yarn start

However, I do not want to manually set it up every time I start. I believe there should be a secrets file somewhere, but I am unsure where to locate it?

UPDATE: Although using a .sh file is an option, I have decided to store all my keys in my app-config.local.yaml file and include it in my .gitignore file.

typescriptenvironment-variablesconfigbackstage

Answer №1

While conducting some investigation, I came across the existence of .env.yarn files (source). I concluded that this method was the most efficient way to incorporate environment variables without duplicating app-config.yaml.

To implement this approach, I established a .env.yarn file and included my desired environment variables in the following manner:

AUTH_BACKEND_SESSION_SECRET: shhhhhh
AZURE_TOKEN: blah
AZURE_TENANT_ID: lorumipsum

This configuration enabled yarn to fetch these values when executing yarn dev.

Answer №2

To streamline your development process, consider creating a custom startup.local.sh file where you can define all necessary variables behind the scenes. In my particular situation, we utilize bash for running our applications locally, so we indicated the location of this .sh file in our .bashrc. This ensures that every time we open a terminal session, these values are readily accessible within the current context. By following this approach, you can securely store all sensitive information within your codebase without the need to constantly modify your code.

I trust that this solution proves beneficial for your workflow!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that the function is referencing the class appropriately?

Typically when using this, it points to the class being referenced. However, in this scenario, this is set to dataChannel. How can I make this point back to VideoService? Thank you. export class VideoService { dataChannel:any; setupPeerConnectio ...

javascripttypescriptangularwebrtc

Is it possible to extract a single element from an array that is stored as a standard Observable?

Currently, I am using a regular observable instead of an observableArray. This observable keeps an array of elements which is defined as follows: public arrayOfItems: IArrayItem[]; public arrayOfItems$: BehaviorSubject<IArrayItem[]> = new BehaviorSu ...

angulartypescriptrxjs

How can you efficiently refresh cached data for multiple related queries after a single mutation in react-query?

Within my codebase, I have a few queries that need to be addressed: Retrieve all articles useInfiniteQuery( ['articles', { pageSize: props.pageSize }], queryFn ); Fetch articles within a specific category useInfiniteQuery( [&ap ...

reactjstypescriptreact-query

Guide to iterating through a Cheerio element within an asynchronous function and updating an external variable

To develop an API that scrapes GitHub repositories for specific data, including file name, extension, size, and number of lines, I have decided to utilize Node with TypeScript. In order to streamline this process, I have created an interface called FileInt ...

javascriptnode.jstypescriptweb-scrapingcheerio

Tips for creating test cases for the following Angular method

Looking for advice on creating Jasmine unit test cases for a method that opens a custom type dialog in my component. export class OpenPopUpComponent implements OnInit { constructor(public dialog:NewCustomDialog) {} ngOnInit() { } open ...

javascriptangulartypescriptunit-testingkarma-jasmine

Working with an arbitrary number of arguments in TypeScript

Looking for a way to pass an arbitrary number of arguments with different types into a function and utilize those types, similar to the following: function f<A>(a: A): A; function f<A, B>(a: A, b: B): A & B; function f<A, B, C>(a: A, ...

typescript

What is the purpose of the @NgModule annotation in Angular Material?

I've been struggling with using Angular-Material Components in different components. Despite watching and reading various tutorials, I still can't seem to get them to work. The error message I keep encountering is: compiler.js:2430 Uncaught Erro ...

angulartypescriptangular-material

Filtering Angular 6 elements by their start and finish dates

HTML <div> <nav class="navbar"> <a class="navbar-brand">Checkout-Reports</a> </nav> <div> <label>From </label> <input type="date" class="mx-3" /> <labe ...

htmlcsstypescriptangular6

Issue with Curry.js when attempting to export a rescript function that has multiple parameters and using genType

Encountering an error when exporting a function with multiple parameters (2 or more) indicates an issue related to importing curry.js. Below is an example along with the details of package versions. Error: Error [ERR_REQUIRE_ESM]: Must use import to load E ...

node.jstypescriptreasonbucklescriptrescript

Ways to access Vue computed attributes in typescript

When attempting to utilize a computed property within another one or inside a method, I encountered the following error message: Property 'comments' does not exist on type 'Vue' import { Component, Vue } from 'vue-property-decorato ...

typescriptvue.js

Generate a type error if the string does not correspond to the key of the object

How can I trigger a type error in TypeScript 4.4.3 for the incorrect string 'c' below, which is not one of the keys of the object that is passed as the first parameter to the doSomething method? const doSomething = ({ a, b }: { a: number, b: stri ...

typescript

A guide to accessing Firebase push notification content and triggering a method in Ionic 2

Can Ionic 2 allow access to push notification content and trigger a set of actions when notifications arrive or events are fired? ...

angulartypescriptfirebaseionic2ionic3

Run the middleware for each route request

Within my Express application, I establish routes in routes.ts: var Router = express.Router(); Router.route('/models/:modelId') .get(function (req, res) { service.setParameter(req) service.get(req,res) }); ...

javascriptnode.jstypescriptexpress

An in-depth guide on integrating lint-staged with jest and utilizing --collectCoverageFrom

I have incorporated lint-staged along with Jest testing framework to solely test the files that have been altered since the last commit, following the instructions outlined in this blog. Here is my current configuration: "src/**/*.{ts}": [ "prettier -- ...

javascriptjsontypescriptjestjslint-staged

I need RxJs to return individual elements to the subscriber instead of an array when using http.get

I've been developing an Angular 2 app (RC5) with a NodeJS backend RESTful API integration. One specific route on the backend returns an array of 'Candidates': exports.list = function (req, res, next) { const sort = req.query.sort || null ...

javascriptarraysangulartypescriptrxjs

"Angular Universal third-party library is throwing an error because the window object is

I've been working with the ng2-mqtt library and have integrated it into my component as shown below: import 'ng2-mqtt/mqttws31.js'; declare var Paho: any; However, I encountered the following error: ReferenceError: window is not defined ...

javascriptangulartypescriptangular-universal

How can I retrieve the date from the following week with Ionic?

I am looking to retrieve the date of today plus 7 days. Currently, I am retrieving today's date using the following code: public dateToday: string = new Date().toLocaleDateString('de-DE'); After searching on Google, I came across the soluti ...

javascripttypescriptionic-framework

Custom Pipe creates a mesmerizing infinite loop effect on images (blinking)

I have some data that needs to be displayed and it looks like this: https://drive.google.com/open?id=1Od-QC4xpfXXH4UgKDPkhkB90DQMUDAhV Here is the code snippet: <ion-grid *ngFor="let item of content | sortprogram: 'month'"> <ion-it ...

typescriptionic3

The getStaticProps() method in NextJS does not get invoked when there is a change in

I have integrated my front-end web app with Contentful CMS to retrieve information about various products. As part of my directory setup, the specific configuration is located at /pages/[category]/items/[id]. Within the /pages/[category] directory, you w ...

typescriptnext.js

Refreshing only a portion of the back-end using dynamic imports

Within my node backend, the file structure is as follows: project |-- expensive | |-- index.ts |-- files | |-- foo.ts | |-- bar.ts | `-- baz.ts |-- tsconfig.json |-- package.json `-- index.ts I am interested in reloading only a portion of my proje ...

javascriptnode.jstypescriptdynamic-import