Tips for integrating TypeScript projects with AWS AppConfig feature flags

I'm facing a problem with my TypeScript application that involves utilizing the AWS SDK. My objective is to retrieve the Feature Flag I set up in my AWS AppConfig. The error message currently displayed is:

Error getting AppConfig configuration: Error: connect ECONNREFUSED 169.254.169.254:80
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) {
  message: 'Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1',
  errno: -111,
  code: 'CredentialsError',
  syscall: 'connect',
  address: '169.254.169.254',
  port: 80,
  time: 2023-12-14T16:21:24.678Z,
  originalError: {
    message: 'Could not load credentials from any providers',
    errno: -111,
    code: 'CredentialsError',
    syscall: 'connect',
    address: '169.254.169.254',
    port: 80,
    time: 2023-12-14T16:21:24.678Z,
    originalError: {
      message: 'EC2 Metadata roleName request returned error',
      errno: -111,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '169.254.169.254',
      port: 80,
      time: 2023-12-14T16:21:24.677Z,
      originalError: [Object]
    }
  }
}

The code snippet I am using is as follows:

import { Request, Response, NextFunction } from 'express';
import AWS from "aws-sdk";
const { AppConfig } = AWS;

const appConfig = new AppConfig({region: "us-east-1"});


const params = {
    Application: '**********', 
    Configuration: '**********', 
    Environment: '**********',
    ClientId: "**********"
  };

  
const response = await appConfig.getConfiguration(params).promise();
const featureFlags: { [key: string]: boolean } = JSON.parse(response.Content!.toString());
    return featureFlags[featureName];
  } catch (error) {
console.error('Error getting AppConfig configuration:', error);
throw error;
  }

My current approach is based on the guidance provided by AWS documentation, but I am open to exploring alternative methods. I am uncertain about the root cause of the issue. The configurations supplied are directly from AWS, so they should be accurate. Do I need to enable anything in AWS AppConfig to access the Feature Flags that I have configured? Is there another way to achieve this task?

Your assistance in resolving this matter would be greatly appreciated!

Answer №1

If you're in search of an easier way to implement feature flags with Typescript and desire more flexibility for the future compared to AppConfig, consider giving getjoystick.com a chance. We've utilized their services for numerous projects and found their feature flags / configs management interface to be excellent. The team is also highly responsive on Discord.

// Utilize the Joystick Remote Configuration package.
import { Joystick } from "@getjoystick/joystick-js";

// Initialize
const joystickClient = new Joystick({
    apiKey: process.env.JOYSTICK_API_KEY,
});

async function myNewFeatureA(options) {
    console.log(options);
    // Retrieve full JSON feature flags / configs
    // {
    //    "color": "green",
    //    "size": 100,
    //    "bold": true,
    //    "text": "Use Remote Configuration!"
    // }
}

// Fetch the Feature Flag configuration from Joystick. The retrieved data is already parsed.
const featureFlagsConfig = await joystickClient.getContent<YourFeatureFlagsConfigType>("feature-flags-config");

if (featureFlagsConfig.newFeatureA.enabled) {
    // Invoke the function with options obtained from Remote Configuration.
    await myNewFeatureA(featureFlagsConfig.newFeatureA.options);
}

Comprehensive Typescript documentation available here:

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

Ways to successfully transfer values or variables from within onAuthStateChanged

Currently, I am attempting to retrieve the authenticated user's uid from Google authentication for a specific collection in the "User" document. To ensure that the data does not become null after refreshing the webpage, I am utilizing onAuthStateChang ...

Retrieve all properties associated with the current instance in the Angular 2 controller

I am looking to assign class variables with values from session storage if they exist, otherwise the variable will retain its default value initialized in ngOnInit. private getTableSessionItems = () => { var tSession = JSON.parse(sessionStorage.g ...

Exporting a Middleware member is essential for defining Koa middleware type definitions

Currently utilizing KoA with Typescript and incorporating the KoA middleware KoA-static and KoA-bodyparser. Ensuring that I have installed the type definition packages @types/koa, @types/koa-bodyparser, and @types/koa-static. However, upon running tsc, enc ...

Experimenting with a file system library function using Jest and Typescript alongside a placeholder function

When attempting to test a library function that uses the fs module, I received assistance in this question on Stack Overflow. The feedback suggested avoiding mocks for better testing, an approach I agreed with @unional. I am now facing a similar challenge ...

The program encountered an error with code TS2339, indicating that the property "name" cannot be found on the type "never"

app.component.html I'm attempting to display the response data from my Firebase project using *ngFor. <div class="row"> <div class="col-md-3"> <h4 class="text-warning">All Employee Da ...

Clearly defining the data types for static dictionary values, while also deducing the precise structure or at least the keys

My goal is to create a static dictionary that is defined as a single object literal. I want to: Specify the type of values explicitly for typechecks and IDE suggestions Still have the ability to infer the exact shape, or at least keys I can achieve the f ...

Angular: ngx-responsive has a tendency to hide elements even if they meet the specified conditions

Recently, I started using a library called this to implement various designs for desktop and mobile versions of an Angular app (v4.2.4). Although the documentation recommends ngx-responsive, I opted for ng2-responsive but encountered issues. Even after set ...

Utilizing Partial Types in TypeScript Getter and Setter Functions

Within the Angular framework, I have implemented a component input that allows for setting options, specifically of type IOptions. The setter function does not require complete options as it will be merged with default options. Therefore, it is typed as Pa ...

Converting JSON objects into TypeScript classes: A step-by-step guide

My challenge lies in converting Django responses into Angular's User array. This conversion is necessary due to variations in variable names (first_name vs firstName) and implementing specific logic within the Angular User constructor. In simple term ...

Error in StoryBook addon-docs: "No props discovered for this particular component" when utilizing TypeScript

Encountering an issue with a TypeScript and StoryBook project: The table displaying component properties is not generated nor visible in the StoryBook "Docs" tab on a TypeScript-based project setup. Instead of the expected table, a message saying "No pro ...

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

Intermittent issue with Angular 2 encountered while following the Hero Editor tutorial on angular.io

I am encountering an occasional error in the console while following the angular.io tutorial using Mozilla Firefox. The error does not seem to impact the functionality or rendering of my application, and it only happens sporadically. If you could provide ...

What is the best way to assign a type based on a variadic type in TypeScript?

TypeScript playground link For my current project, I am designing a custom route handler creator for Express. The goal is to allow passing arbitrary assertions as initial arguments before invoking the route handler callback. Here's an example of how ...

Simplified Method for Verifying Null and Undefined in Typescript

Hey there, I'm currently working on an Angular 11 project and I'm facing a challenge when it comes to checking for null and undefined values. In my scenario, I have three strings - equipmentId, roomId, and personnelId, as well as a boolean flag ...

Children components are not re-rendered by React

I created a basic task manager, but I'm encountering issues when trying to manage all the data from a single point within the TaskManager component. Essentially, I have a TaskManager component that acts as the container for all the data. Within this ...

assigning state to a React component by utilizing onClick event in a functional component with TypeScript

const Navigation = () => { const [activeItem, setActiveItem] = useState<string>("tasks"); return { <NavigationContainer> <NavItem onClick=(() => setActiveItem("settings")/> ...

Having trouble with importing files from a different folder in a React Typescript project

I have a specific folder arrangement set up https://i.sstatic.net/GFOYv.png My goal is to bring both MessageList.tsx and MessageSent.tsx into my Chat.tsx file // Chat.tsx import React from 'react' import {MessageList, MessageSent} from "./ ...

There was a parsing error due to encountering an unexpected reserved word 'interface' in the code, as flagged

I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...

Tips for quietly printing a PDF document in reactjs?

const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...

Controlling the upper and lower limits in an input field for numerical values while manually typing in the text

Trying to implement an Angular component input with number type that allows setting a maximum and minimum value. Here is the code snippet used for calling the component in HTML: <app-input-number [(value)]="inputMinMaxValueNumber" [min]="min" [max]="m ...