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 of the console consists of only a few steps:
-
Fork or create a local copy of this repository
-
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.tsandangular/src/environments/environment.prod.ts:export const environment = { ... discoveryUrl: 'https://xxxxxxxxx.execute-api.xx-xxxx-x.amazonaws.com/xxxx/data-apis' }
-
Configuration is complete!
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:
- Node.js
- npm, typically installed automatically with Node
- Yarn, a package manager
- Angular CLI
In order to launch this application on the local computer please execute the following commands:
-
Open
angulardirectorycd angular -
Download all the required npm modules
yarn install
-
Build and launch web application
ng serve
-
Open web application in your browser:
http://localhost:4200/
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.
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:
-
Build Docker image
docker build . --tag aws-data-api-ux:1.0 -
Launch built image locally
docker run --publish 8080:80 --detach --name apiux aws-data-api-ux:1.0
-
Once tested you can stop and delete container
docker rm --force apiux
