feat(Template): Introduce template for react extensions

templates/basic/README.md

@@ -0,0 +1,10 @@
+Extension Template
+==================
+
+This is a [cookiecutter](https://github.com/cookiecutter/cookiecutter) template that is used when you invoke.
+
+```console
+localstack extensions dev new
+```
+
+It contains a simple python distribution config, and some boilerplate extension code.

templates/basic/cookiecutter.json

@@ -0,0 +1,11 @@
+{
+  "project_name": "My LocalStack Extension",
+  "project_short_description": "All the boilerplate you need to create a LocalStack extension.",
+  "project_slug": "{{ cookiecutter.project_name.lower().replace(' ', '-') }}",
+  "module_name": "{{ cookiecutter.project_slug.replace('-', '_') }}",
+  "class_name": "{{ cookiecutter.project_name.replace('-', ' ').replace('_', ' ').title().replace(' ', '') }}",
+  "full_name": "Jane Doe",
+  "email": "jane@example.com",
+  "github_username": "janedoe",
+  "version": "0.1.0"
+}

templates/basic/{{cookiecutter.project_slug}}/.gitignore

@@ -0,0 +1,5 @@
+.venv
+dist
+build
+**/*.egg-info
+.eggs

templates/basic/{{cookiecutter.project_slug}}/Makefile

@@ -0,0 +1,32 @@
+VENV_BIN = python3 -m venv
+VENV_DIR ?= .venv
+VENV_ACTIVATE = $(VENV_DIR)/bin/activate
+VENV_RUN = . $(VENV_ACTIVATE)
+
+venv: $(VENV_ACTIVATE)
+
+$(VENV_ACTIVATE): setup.py setup.cfg
+	test -d .venv || $(VENV_BIN) .venv
+	$(VENV_RUN); pip install --upgrade pip setuptools plux
+	$(VENV_RUN); pip install -e .
+	touch $(VENV_DIR)/bin/activate
+
+clean:
+	rm -rf .venv/
+	rm -rf build/
+	rm -rf .eggs/
+	rm -rf *.egg-info/
+
+install: venv
+	$(VENV_RUN); python setup.py develop
+
+dist: venv
+	$(VENV_RUN); python setup.py sdist bdist_wheel
+
+publish: clean-dist venv dist
+	$(VENV_RUN); pip install --upgrade twine; twine upload dist/*
+
+clean-dist: clean
+	rm -rf dist/
+
+.PHONY: clean clean-dist dist install publish

templates/basic/{{cookiecutter.project_slug}}/README.md

@@ -0,0 +1,34 @@
+{{ cookiecutter.project_name }}
+===============================
+
+{{ cookiecutter.project_short_description }}
+
+## Install local development version
+
+To install the extension into localstack in developer mode, you will need Python 3.10, and create a virtual environment in the extensions project.
+
+In the newly generated project, simply run
+
+```bash
+make install
+```
+
+Then, to enable the extension for LocalStack, run
+
+```bash
+localstack extensions dev enable .
+```
+
+You can then start LocalStack with `EXTENSION_DEV_MODE=1` to load all enabled extensions:
+
+```bash
+EXTENSION_DEV_MODE=1 localstack start
+```
+
+## Install from GitHub repository
+
+To distribute your extension, simply upload it to your github account. Your extension can then be installed via:
+
+```bash
+localstack extensions install "git+https://github.com/{{cookiecutter.github_username }}/{{ cookiecutter.project_slug }}/#egg={{ cookiecutter.project_slug }}"
+```

templates/basic/{{cookiecutter.project_slug}}/setup.cfg

@@ -0,0 +1,22 @@
+[metadata]
+name = {{ cookiecutter.project_slug }}
+version = {{ cookiecutter.version }}
+summary = LocalStack Extension: {{ cookiecutter.project_name }}
+url = https://github.com/{{ cookiecutter.github_username }}/{{ cookiecutter.project_slug }}
+author = {{ cookiecutter.full_name }}
+author_email = {{ cookiecutter.email }}
+description = {{ cookiecutter.project_short_description }}
+long_description = file: README.md
+long_description_content_type = text/markdown; charset=UTF-8
+
+[options]
+zip_safe = False
+packages = find:
+
+[options.extras_require]
+test= 
+    localstack-core>=2.2
+
+[options.entry_points]
+localstack.extensions =
+    {{ cookiecutter.project_slug }} = {{ cookiecutter.module_name }}.extension:{{ cookiecutter.class_name }}

templates/basic/{{cookiecutter.project_slug}}/setup.py

@@ -0,0 +1,4 @@
+#!/usr/bin/env python
+from setuptools import setup
+
+setup()

templates/basic/{{cookiecutter.project_slug}}/{{cookiecutter.module_name}}/__init__.py

@@ -0,0 +1 @@
+name = "{{ cookiecutter.module_name }}"

templates/basic/{{cookiecutter.project_slug}}/{{cookiecutter.module_name}}/extension.py

@@ -0,0 +1,22 @@
+from localstack.extensions.api import Extension, http, aws
+
+class {{ cookiecutter.class_name }}(Extension):
+    name = "{{ cookiecutter.project_slug }}"
+
+    def on_extension_load(self):
+        print("MyExtension: extension is loaded")
+
+    def on_platform_start(self):
+        print("MyExtension: localstack is starting")
+
+    def on_platform_ready(self):
+        print("MyExtension: localstack is running")
+
+    def update_gateway_routes(self, router: http.Router[http.RouteHandler]):
+        pass
+
+    def update_request_handlers(self, handlers: aws.CompositeHandler):
+        pass
+
+    def update_response_handlers(self, handlers: aws.CompositeResponseHandler):
+        pass

templates/react/README.md

@@ -0,0 +1,10 @@
+Extension Template
+==================
+
+This is a [cookiecutter](https://github.com/cookiecutter/cookiecutter) template that is used when you invoke.
+
+```console
+localstack extensions dev new --template=react
+```
+
+It contains a simple python distribution config, and some boilerplate extension code.

templates/react/cookiecutter.json

@@ -0,0 +1,11 @@
+{
+  "project_name": "My LocalStack Extension",
+  "project_short_description": "All the boilerplate you need to create a LocalStack extension.",
+  "project_slug": "{{ cookiecutter.project_name.lower().replace(' ', '-') }}",
+  "module_name": "{{ cookiecutter.project_slug.replace('-', '_') }}",
+  "class_name": "{{ cookiecutter.project_name.replace('-', ' ').replace('_', ' ').title().replace(' ', '') }}",
+  "full_name": "Jane Doe",
+  "email": "jane@example.com",
+  "github_username": "janedoe",
+  "version": "0.1.0"
+}

templates/react/{{cookiecutter.project_slug}}/.gitignore

@@ -0,0 +1,9 @@
+.venv
+frontend/node_modules
+frontend/.yarn
+dist
+build
+**/*.egg-info
+.eggs
+__pycache__
+*.pyc

templates/react/{{cookiecutter.project_slug}}/Makefile

@@ -0,0 +1,56 @@
+VENV_BIN = python3 -m venv
+VENV_DIR ?= .venv
+VENV_ACTIVATE = $(VENV_DIR)/bin/activate
+VENV_RUN = . $(VENV_ACTIVATE)
+FRONTEND_FOLDER = frontend
+BACKEND_FOLDER = backend
+
+
+INFO_COLOR = \033[0;36m
+NO_COLOR   = \033[m
+
+venv: $(VENV_ACTIVATE)
+
+$(VENV_ACTIVATE):
+	test -d .venv || $(VENV_BIN) .venv
+	$(VENV_RUN); pip install --upgrade pip setuptools plux build wheel
+	$(VENV_RUN); pip install -e .[dev]
+	touch $(VENV_DIR)/bin/activate
+
+clean:  ## Clean the project
+	rm -rf .venv/
+	rm -rf build/
+	rm -rf .eggs/
+	rm -rf $(BACKEND_FOLDER)/*.egg-info/
+
+install-backend: venv  ## Install dependencies of the extension
+	$(VENV_RUN); python -m plux entrypoints
+
+install-frontend: venv  ## Install dependencies of the frontend
+	cd $(FRONTEND_FOLDER) && yarn install
+
+build-frontend: # Build the React app
+	@if [ ! -d "$(FRONTEND_FOLDER)/node_modules" ]; then \
+		$(MAKE) install-frontend; \
+	fi
+	cd $(FRONTEND_FOLDER); rm -rf build && REACT_APP_DEVELOPMENT_ENVIRONMENT=false NODE_ENV=prod npm run build
+
+start-frontend: ## Start the frontend in dev mode (hot reload)
+	cd $(FRONTEND_FOLDER); REACT_APP_DEVELOPMENT_ENVIRONMENT=true yarn start
+
+install: venv install-backend install-frontend ## Install dependencies
+
+dist: venv build-frontend ## Create distribution files
+	$(VENV_RUN); python -m build
+
+publish: clean-dist venv dist ## Build and upload package to pypi
+	$(VENV_RUN); pip install --upgrade twine; twine upload dist/*
+
+clean-dist: clean ## Remove dist folder
+	rm -rf dist/
+
+help: ## Show this help
+	@echo Please specify a build target. The choices are:
+	@grep -E '^[0-9a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "$(INFO_COLOR)%-30s$(NO_COLOR) %s\n", $$1, $$2}'
+
+.PHONY: clean clean-dist dist install install-backend install-frontend build-frontend start-frontend publish venv

templates/react/{{cookiecutter.project_slug}}/README.md

@@ -0,0 +1,42 @@
+{{ cookiecutter.project_name }}
+===============================
+
+{{ cookiecutter.project_short_description }}
+
+## Install local development version
+
+To install the extension into localstack in developer mode, you will need Python 3.10+, and create a virtual environment in the extensions project.
+You will also need to install [yarn](https://yarnpkg.com/getting-started/install) as package manager if you haven't already
+In the newly generated project, simply run
+
+```bash
+make install
+```
+
+Then, to enable the extension for LocalStack, run
+
+```bash
+localstack extensions dev enable .
+```
+
+You can then start LocalStack with `EXTENSION_DEV_MODE=1` to load all enabled extensions:
+
+```bash
+EXTENSION_DEV_MODE=1 localstack start
+```
+
+## Developing UI
+With this template is generated also a UI made in react that is available at either {{ cookiecutter.project_name }}.localhost.localstack.cloud:4566/ or http://localhost.localstack.cloud:4566/_extension/{{ cookiecutter.project_name }}/.
+
+There are a few make commands available that will help your journey with the UI:
+- **build-frontend**: will build the react app into the frontend/build folder which will then be passed into the extension itself allowing the UI to be seen. Remember to always execute this command when you wish to see new changes when using the extension.
+- **start-frontend**: will start a live server on port 3000 (by default) that will allow you to have hot reloading when developing locally outside the extension (it will also build the frontend)
+
+
+## Install from GitHub repository
+
+To distribute your extension, simply upload it to your github account. Your extension can then be installed via:
+
+```bash
+localstack extensions install "git+https://github.com/{{cookiecutter.github_username }}/{{ cookiecutter.project_slug }}/#egg={{ cookiecutter.project_slug }}"
+```

templates/react/{{cookiecutter.project_slug}}/backend/{{cookiecutter.module_name}}/__init__.py

@@ -0,0 +1 @@
+name = "{{ cookiecutter.module_name }}"

templates/react/{{cookiecutter.project_slug}}/backend/{{cookiecutter.module_name}}/api/web.py

@@ -0,0 +1,12 @@
+from localstack.http import route, Request, Response
+
+from .. import static
+
+class WebApp:
+    @route("/")
+    def index(self, request: Request, *args, **kwargs):
+        return Response.for_resource(static, "index.html")
+
+    @route("/<path:path>")
+    def index2(self, request: Request, path: str, **kwargs):
+        return Response.for_resource(static, path)

templates/react/{{cookiecutter.project_slug}}/backend/{{cookiecutter.module_name}}/extension.py

@@ -0,0 +1,19 @@
+import logging
+import typing as t
+
+from localstack.extensions.patterns.webapp import WebAppExtension
+
+from .api.web import WebApp
+
+LOG = logging.getLogger(__name__)
+
+
+class {{ cookiecutter.class_name }}(WebAppExtension):
+    name = "{{ cookiecutter.project_slug }}"
+
+    def __init__(self):
+        super().__init__(template_package_path=None)
+
+    def collect_routes(self, routes: list[t.Any]):
+        routes.append(WebApp())
+