Skip to content
This repository has been archived by the owner on Apr 7, 2021. It is now read-only.

React components to display, provision and terminate products from an AWS Service Catalog.

License

Notifications You must be signed in to change notification settings

amazon-archives/aws-service-catalog-react-components

AWS Service Catalog React Components

React components to display, provision and terminate products from an AWS Service Catalog.

License Summary

This sample code is made available under a modified MIT license. See the LICENSE file.

Why is this project useful?

Although Service Catalog provides a fully functional user interface for end-users already, this project is an alternative way of bringing Service Catalog into your own React website without giving your end-users access to the AWS Console. You can then customize and enhance this UI however you like.

Installation

npm install --save aws-service-catalog-react-components

Usage

The components require AWS credentials with permissions to interact with Service Catalog. We suggest to use AWS Amplify with Cognito to provide credentials and a login screen for your users to authenticate.

import { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import {
  SCProducts,
  SCProvisionModal,
  SCProvisionedProducts,
  SCProvisionedDetailsModal,
} from "aws-service-catalog-react-components";

class App extends Component {
  componentDidMount() {
    Auth.currentCredentials().then(credentials => {
      this.setState({ credentials: Auth.essentialCredentials(credentials) });
    });
  }

  onLaunchClick() {
    console.log('User clicked Launch button');
  }

  render() {
    return() {
        <SCProducts
          credentials={this.state.credentials}
          onLaunchClick={this.onLaunchClick}
        />
    }
  }
}

export default withAuthenticator(App);

For more examples of usage please see the demo folder in this repository.

Demo - Display Provision Parameters

Based on the cloudformation template parameters, the UI loads a form with them for the user to fill in.

Product CloudFormation Parameters

Demo - Provision a Product

Launch a Product

Demo - View Provisioned Product Details

Once a product is provisioned, you can check its CloudFormation output details.

Provisioned Product Details

About

React components to display, provision and terminate products from an AWS Service Catalog.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published