Skip to content

This project contains a simple web interface for AWS Data API. Data API's give you the ability to create a back end web service to handle core business data, without any coding or servers to manage.

License

Notifications You must be signed in to change notification settings

awslabs/aws-data-api-ux

AWS Data API - UX

alt AWS Data API UI

This project contains a simple web interface for AWS Data API. Data API's give you the ability to create a back end web service to handle core business data, without any coding or servers to manage. This Web UI provides the following functionality:

  • Discover and preview available Data API Stages
  • List and view Namespaces provisioned under each Stage
  • View Namespace data usage statistics
  • Provision new Namespaces
  • View and edit Metadata and Resource Schema

This project is based on Angular Framework for page logic and API queries, and UI Kit Framework and Angular Material Framework for visual elements on the page.

Configuration

Configuration of the console consists of only a few steps:

  1. Fork or create a local copy of this repository

  2. Once the deployment of the AWS Data API is complete you will obtain a Discovery URL for the AWS Data API. This URL should put into Angular environment file angular/src/environments/environment.ts and angular/src/environments/environment.prod.ts:

    export const environment = {
    	...
    	discoveryUrl:  'https://xxxxxxxxx.execute-api.xx-xxxx-x.amazonaws.com/xxxx/data-apis'
    }
  3. Configuration is complete!

Run solution locally

This website can be run locally on the most of the modern operations systems, including Linux, Windows and MacOS. However, please make sure the following software is installed:

In order to launch this application on the local computer please execute the following commands:

  1. Open angular directory

    cd angular
  2. Download all the required npm modules

    yarn install
  3. Build and launch web application

    ng serve
  4. Open web application in your browser: http://localhost:4200/

Run solution on AWS

Since this is just a Single Page Application (SPA) based on Angular Framework, it can be deployed in a variety of ways. We believe the simplest way is to deploy it via AWS Amplify Console, and there is a detailed guide available with step by step instructions under the AWS Amplify documentation.

Part of the deployment process is to create a build configuration for the application. The simplest set up for AWS Amplify Console build for Angular applications can look like this:

version: 0.1
frontend:
  phases:
    build:
      commands:
        - cd angular
        - npm ci
        - npm run-script build
  artifacts:
    baseDirectory: angular/build
    files:
      - '**/*'
  cache:
    paths: []

We also recommend to configure access protection for your website using AWS Amplify Console access control settings.

Run solution using Docker

We have also provided Dockerfile for this application in case you decide to run it using Docker, or any Docker orchestration tool like Docker Compose or Kubernetes.

In order to build and test the Docker image you can follow these steps:

  1. Build Docker image

    docker build . --tag aws-data-api-ux:1.0
  2. Launch built image locally

    docker run --publish 8080:80 --detach --name apiux aws-data-api-ux:1.0
  3. Once tested you can stop and delete container

    docker rm --force apiux

About

This project contains a simple web interface for AWS Data API. Data API's give you the ability to create a back end web service to handle core business data, without any coding or servers to manage.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •