stack/apps/dev-launchpad/public/index.html
Zai Shi 202f54d787
Add S3 bucket (#816)
Note for deployment: This PR needs to add some env vars
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Adds S3-compatible storage for profile images with S3Mock for local
development, updating environment variables, Docker configurations, and
tests.
> 
>   - **Behavior**:
> - Adds S3-compatible storage for user, team, and team member profile
images using `uploadAndGetUrl()` in `s3.tsx`.
> - Integrates S3Mock for local development in `docker.compose.yaml` and
`emulator/docker.compose.yaml`.
> - Updates `crud.tsx` files for `users`, `teams`, and
`team-member-profiles` to use S3 for profile images.
>   - **Environment**:
>     - Adds S3-related environment variables to `.env.development`.
>     - Updates `package.json` to include `@aws-sdk/client-s3`.
>   - **Testing**:
> - Modifies test cases in `teams.test.ts` and `users.test.ts` to
validate S3 URL behavior.
> - Updates `auto-migration.tests.ts` for concurrent migration handling.
>   - **Documentation**:
>     - Updates `self-host.mdx` to include S3 storage requirements.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 901f0b56cd. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>

----


<!-- ELLIPSIS_HIDDEN -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added support for uploading and storing user, team, and team member
profile images using S3-compatible storage.
* Integrated S3Mock for local development and testing of storage
features.
* Added new services to Docker Compose configurations for S3Mock and
related dependencies.
* Introduced image validation and processing for base64-encoded images
before upload.

* **Bug Fixes**
* Profile image upload now returns a storage URL instead of echoing back
the base64 data.

* **Documentation**
* Updated self-hosting documentation to include S3 storage requirements
and usage.

* **Chores**
* Added and updated environment variables for S3 storage configuration.
  * Updated backend dependencies to include the AWS S3 SDK.
  * Enhanced test cases to validate new image upload and URL behaviors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
2025-08-01 20:30:44 +02:00

309 lines
9.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Stack Auth Dev Launchpad</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e0f0e0;
padding-left: 16px;
padding-right: 16px;
}
.apps-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.apps-container > a {
border: 1px solid #8888;
background-color: #fff;
padding: 0px 4px 8px 4px;
width: 120px;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
position: relative;
}
.apps-container > a.important {
background-color: #fee;
}
.apps-container > a.unimportant {
opacity: 0.2;
}
.apps-container > a.unimportant:hover {
opacity: 0.5;
}
.apps-container > a:hover {
border-color: #888;
transition: opacity 0.1s ease-in-out;
}
.apps-container > a > div > img {
height: 68px;
}
.apps-container > a > .description {
text-align: center;
font-size: 12px;
color: #888;
}
.apps-container > a > .port {
padding-right: 0.5px;
padding-top: 1px;
align-self: flex-end;
font-size: 12px;
color: #888;
}
.apps-container > a > .hover-description {
display: none;
position: absolute;
top: 100%;
left: -1px;
pointer-events: none;
z-index: 1000;
white-space: pre;
background-color: #ffc;
border: 1px solid #888;
padding: 2px;
color: #0008;
font-size: 12px;
}
.apps-container > a:hover > .hover-description {
display: block;
}
</style>
</head>
<body>
<h1>Stack Auth Dev Launchpad</h1>
<div class="apps-container"></div>
<hr />
<div class="apps-container"></div>
<hr />
<div class="apps-container"></div>
<h2 style="margin-top: 64px;">Background services</h2>
<ul>
<li>
5432: PostgreSQL
</li>
<li>
2500: Inbucket SMTP
</li>
<li>
1100: Inbucket POP3
</li>
<li>
4318: OTel collector
</li>
<li>
8119: Freestyle mock
</li>
<li>
8121: S3 mock
</li>
</ul>
<noscript>
This page requires JavaScript.
</noscript>
<script>
const apps = [
{
name: "Dashboard",
port: 8101,
description: [
"Src: ./apps/dashboard",
"Prod: https://app.stack-auth.com",
],
img: "https://www.svgrepo.com/show/507260/dashboard.svg",
importance: 2,
},
{
name: "Backend",
port: 8102,
description: [
"Src: ./apps/backend",
"Prod: https://api.stack-auth.com",
],
img: "https://www.svgrepo.com/show/340122/datastore.svg",
importance: 2,
},
{
name: "Demo app",
port: 8103,
description: [
"Src: ./examples/demo",
"Prod: https://demo.stack-auth.com",
],
importance: 2,
},
{
name: "Docs",
port: 8104,
description: [
"Src: ./docs",
"Prod: https://docs.stack-auth.com",
],
img: "https://www.svgrepo.com/show/448400/docs.svg",
importance: 2,
},
{
name: "Inbucket",
port: 8105,
img: "https://www.svgrepo.com/show/533176/at-sign.svg",
importance: 1,
description: [
"Email mock",
],
},
{
name: "Prisma Studio",
port: 8106,
importance: 1,
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS95TdAw63YPAPcUpvRl4imIf-VJ1sGHnEvbw&s",
description: [
"Database interface",
],
},
{
name: "Jaeger UI (OTel)",
port: 8107,
description: [
"Performance & tracing",
],
importance: 1,
img: "https://www.jaegertracing.io/img/jaeger-icon-reverse-color.svg",
},
{
name: "examples/docs-examples",
port: 8108,
description: [
"Src: ./examples/docs-examples",
],
},
{
name: "examples/partial-prerendering",
port: 8109,
description: [
"Src: ./examples/partial-prerendering",
],
},
{
name: "examples/cjs-test",
port: 8110,
description: [
"Src: ./examples/cjs-test",
],
},
{
name: "examples/e-commerce",
port: 8111,
description: [
"Src: ./examples/e-commerce",
],
},
{
name: "examples/middleware",
port: 8112,
description: [
"Src: ./examples/middleware",
],
},
{
name: "Svix server",
port: 8113,
importance: 1,
img: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iODQuOSA4NC45IDM0NyAzNDciPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjMmM3MGZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEtMiI+CiAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjI1OC40IiBjeT0iMjU4LjQiIHI9IjE3My41Ii8+CiAgICA8Zz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzYwLjgsMjMyLjljLTI4LjgtMS40LTU1LjctMTcuMi02OC4yLTQ1LTUuNS0xMi4zLTE3LjgtMjAuNC0zMS4zLTIwLjgtMjguNi0uOC00Ni43LDM1LjEtMjguNyw1Ny42LDYuMiw3LjgsMTUuNCwxMi4xLDI3LjUsMTIuOWgwYzIzLjQsMS43LDQzLjUsMTEuOCw1Ni44LDI4LjUsMjQuNCwzMC43LDIwLjksNzcuMS03LjQsMTA0LTM0LjEsMzIuNS05MS4xLDI1LjgtMTE3LjEtMTMuMi0yLjMtMy41LTQuMy03LjEtNi4xLTEwLjktNS41LTEyLjMtMTcuOC0yMC40LTMxLjMtMjAuOC0xMy45LS40LTI3LDQuOS0zNS4zLDEzLjgsMjcuMyw0Ni45LDc3LjcsNzguNywxMzUuOSw3OS43LDg4LjYsMS41LDE2MS43LTY5LDE2My4yLTE1Ny42LjMtMTQuOS0xLjYtMjkuNC01LjEtNDMuMi43LDIuOS0yMi4zLDEwLjktMjQuOCwxMS42LTkuMiwyLjctMTguNywzLjctMjgsMy4zaDBaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTE1NiwyODMuNmMyOS40LjcsNTYuMSwxOC41LDY4LjIsNDUuMyw1LjUsMTIuMywxNy44LDIwLjQsMzEuMywyMC44LDkuNC4zLDE4LjMtMy4yLDI1LjItOS43LDEyLjgtMTIuMSwxNC41LTM0LjEsMy41LTQ4LTYuMi03LjgtMTUuNC0xMi4xLTI3LjUtMTIuOWgwYy0yMy40LTEuNy00My41LTExLjgtNTYuOC0yOC41LTI5LjYtMzcuMi0xNy05Mi41LDIzLjctMTE1LjQsMTEuOC02LjYsMjUuMi0xMC4yLDM4LjctOS44LDI5LjQuNyw1Ni4xLDE4LjUsNjguMiw0NS4zLDUuNSwxMi4zLDE3LjgsMjAuNCwzMS4zLDIwLjgsMTQsLjQsMjctNC45LDM1LjMtMTMuOC0yNy4zLTQ2LjktNzcuNy03OC43LTEzNS45LTc5LjgtODguNi0xLjUtMTYxLjYsNjkuMS0xNjMuMiwxNTcuNi0uMywxNC45LDEuNiwyOS40LDUuMiw0My4yLDE0LjktMTAuMSwzMy4zLTE1LjYsNTIuOS0xNS4yaDBaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=",
description: [
"Webhooks",
],
},
{
name: "OAuth mock server",
port: 8114,
description: [
"Src: ./apps/mock-oauth-server",
],
},
{
name: "examples/supabase",
port: 8115,
description: [
"Src: ./examples/supabase",
],
},
{
name: "PgHero",
port: 8116,
description: [
"For database performance analysis",
],
importance: 1,
img: "https://pghero.dokkuapp.com/assets/pghero-88a0d052.png",
},
{
name: "PgAdmin",
port: 8117,
description: [
"For database administration",
],
importance: 1,
img: "https://www.w3schools.com/postgresql/screenshot_postgresql_pgadmin4_6.png",
},
{
name: "Supabase Studio",
port: 8118,
path: "/project/default/editor",
description: [
"For database administration",
],
importance: 1,
img: "https://cdn.prod.website-files.com/655b60964be1a1b36c746790/655b60964be1a1b36c746d41_646dfce3b9c4849f6e401bff_supabase-logo-icon_1.png",
},
{
name: "JS example",
port: 8119,
description: [
"JavaScript example",
],
},
];
const appsContainers = document.querySelectorAll(".apps-container");
for (let i = 0; i < appsContainers.length; i++) {
const appContainer = appsContainers[i];
const importance = appsContainers.length - i - 1;
for (const app of apps) {
if ((app.importance ?? 0) === importance) {
// TODO escape HTML
appContainer.innerHTML += `
<a href="http://localhost:${app.port}${app.path ?? ""}" target="_blank" rel="noopener noreferrer" class="${app.importance === 2 ? "important" : app.importance === 1 ? "" : "unimportant"}">
<div class="port">:${app.port}</div>
<div>
<img src=${app.img || `//localhost:${app.port}/favicon.ico`} />
</div>
<span class="description">${app.name}</span>
${app.description ? `<div class="hover-description">${app.description.join("\n")}</div>` : ""}
</a>
`;
}
}
}
</script>
</body>
</html>