How to embed quicksight dashboard into React application

Question

enter image description hereHow to integrate amazon quick sight in to react application

1.how to import aws-sdk 2.where to get the dashboard ID

Answer 1

You are going to need to get a url for your quicksight graphs whether that is from aws or whether you are using the sdk in your api. I'm currently getting a new url from my nodejs api.

const AWS = require("aws-sdk");

exports.url_aws = (req, res) => {

let awsCredentials = {
    region: "us-east-1",
    accessKeyId: process.env.KEY_ID,
    secretAccessKey: process.env.ACCESS_KEY
  };

AWS.config.update(awsCredentials);

let params = {
    RoleArn: "<the arn role and iam id>",
    RoleSessionName: "embeddingsession",
};

let sts = new AWS.STS({
    apiVersion: "2011-06-15"
});

sts.assumeRole(paras, (err, data) => {

    if (err) {
      console.log(err); // account for error;
      res.end();
    }

    AWS.config.update({
      accessKeyId: data.Credentials.AccessKeyId,
      secretAccessKey: data.Credentials.SecretAccessKey,
      sessionToken: data.Credentials.SessionToken
    });

    AWS.config.update({
        region: "<your region>"
    });

    let quicksight = new AWS.QuickSight({
        apiVersion: '2018-04-01',
        region: '<Your region>'
    });

    let getdashboardparams = {
        AwsAccountId: "<Your account Id",
        DashboardId: "<Dashboard Id you want to display",
        IdentityType: "QUICKSIGHT",
        ResetDisable: false, // or true, what ever you prefer
        SessionLifeTimeInMinutes: "<writes the minutes inside the quotes",
        UndoRedoDisabled: false, // or true...
        UserArn: "<the user arn>"
    };

    quicksight.getDashboardEmbedUrl(getdashboardparams, (err, data) => {
        if (err) console.log("Quicksight GetDashboard Error",err, err.stack); 
        else console.log(data);

        res.json(data);

        console.log("\nEND \n")
        res.end();
        return;
    });

});

};

That's how I have it setup in my backend, in the front-end in react, I used react-iframe.

https://www.npmjs.com/package/react-iframe

And basically just put the url in the url prop.

Hope this helps.