Skip to content

cabeaulac/localstack-pro-gdc-bp1

Repository files navigation

Localstack-pro GDC Blueprint-1

This is a LocalStack Pro - GDC (generic dev container) blueprint. The same Pulumi pipelines deploying this solution to LocalStack can be used to deploy to AWS. It uses the GDC to provide a containerized development environment. The GDC runs LocalStack-Pro and an Auth0Mock. The GDC can be used with any IDE and works on Mac, Windows, Ubuntu.

Jump to Quickstart

Project Overview

Deploys system to AWS with backend and frontend. Some extra features like RDS and some UI features are stubbed out. This project has a API Gateway (APIGW) REST endpoint, and an APIGW WebSocket (WS) endpoint. Auth is provided by Auth0Mock. The UI is Vue.js+tailwind hosted in CloudFront (when deployed to AWS).

Solution Diagram

There is a lot that can be done with this blueprint. This is a functional E2E starting point.

Demo Solution Diagram

UI Pics

The UI has two parts, a public side, and a private portal. The public side is minimal, but this is where you could host your public content and then let users login to the auth-protected private portal.

Public side

Click on the button text to enter the protected portal.

Public UI

Login using Auth0Mock

The username and password are populated for you. You can see them in users-local.json. The default username and password are configured in .env-gdc.

Auth0Mock Login

Light Dark Mode

Once you're logged in, the light and dark mode selection is the popover in the upper right hand corner. The other buttons in the popover do nothing. Logout is in the lower left hand corner. All of these screen snaps are in dark mode.

Light Dark Mode Selector

S3Files Storage

This project uses an adjacency model to store users and s3item documents in DynamoDB. The actual files are sore

S3Files Storage

Open Add Files

Open the model to upload files to S3Storage.

Open Add Files

Store S3 Files

Upload files to a protected private bucket using presigned S3 URLs. This is a multi-file upload modal. You can drop many files in at once. The first upload will take some time (a few extra seconds) as the Lambda ColdStarts in LocalStack will take a few seconds. The subseqeunt uploads are very fast as long as the Lambdas haven't timed out and you're back at another cold start.

Upload Files

File List

Then your files will appear in your file list. You may have to refresh no your very first upload. See Known Issues.

File List

Delete File

Hovering on a file line shows the menu for that item. You can delete it here. First delete is longer (ColdStart).

Delete File

Tag Files

You can add tags/labels to files.

Tag File

File Details

Double-clicking on a file will open a S3File detail page. This page does nothing at this time.

Developer Platform

Development Environment

Known Issues

After the kinesis_mock_server times out, the DynamoDB Stream handler Lambda will never get triggered again. And all WS messages stop flowing from the backend. Restart of the GDC and LocalStack is required at this point. This only happens when the system sits idle for awhile, not sure how long. Ref: LocalStack Issue 5182

Quickstart

Setup

  1. GDC install.

  2. Follow GDC Setup instructions. (Install DockerDesktop)

  3. Clone this repos

  4. Create a file called .env-gdc-local in the root of this repo. Put your Localstack Pro key in it like this

export LOCALSTACK_API_KEY=YOUR_KEY_HERE
  1. Start GDC
# from the root of the cloned repo
~/<gdc dir>/run-dev-container.sh
  1. Deploy the system to Localstack
# Open GDC shell
docker exec -it lsgdc-dev-1 bash -l
# Deploy 3 pulumi pipelines
make local-toplevel-deploy
make local-db-deploy
make local-lsgdc-deploy
# Or the command below will run all of the above
make it-again
  1. Run UI
# Open GDC shell
docker exec -it lsgdc-dev-1 bash -l
# run the UI locally
make local-lsgdc-run-ui
  1. Login to UI Navigate to http://localhost:3030/

Run tests

Everything is done from inside the GDC shell.

  1. Open GDC shell
docker exec -it lsgdc-dev-1 bash -l
  1. Create Python virtual env You only have to do this once.
make setup-venv
  1. Run tests
# Run a hard-coded test 
make local-lsgdc-test-tags

Shout Outs

The work here is collaborative and made possible by many contributions.

Xander Beaulac Big props to Xander for his amazing work on Vue.js X-Components, and UI/UX awesomeness!

Paul Robello Thank you for being so dissatisfied with the VSCode container I created that you did the giant lift to create the GDC. The IDE-agnostic GDC is fantastic thanks to you!