build: Add devcontainer (#3429)

## Description

Allow development in devcontainers, simplifies initial setup

Open project in vscode (and accept open in devcontainer) or in
codespaces, wait setup to complete

run
```
pnpm dev
```

<img width="436" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/f03fdc99-5c46-4de5-be9c-2bb9420afc99">





## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

.devcontainer/.gitignore

@@ -0,0 +1 @@
+.local

.devcontainer/Dockerfile

@@ -0,0 +1,17 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm
+
+ENV PATH=/usr/local/bin:${PATH}
+# Install latest pnpm
+# RUN npm install -g pnpm@9.0.2
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"
+

.devcontainer/devcontainer.json

@@ -0,0 +1,44 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node-postgres
+{
+  "name": "Node.js & PostgreSQL",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspaces/webstudio",
+  "features": {
+    "ghcr.io/robbert229/devcontainer-features/postgresql-client:1": {
+      "version": "15"
+    },
+    "ghcr.io/devcontainers-contrib/features/fzf:1": {}
+  },
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  // "features": {},
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // This can be used to network with other containers or with the host.
+  // "forwardPorts": [3000, 5432],
+  "forwardPorts": [5173, "db:5432"],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+
+  "postCreateCommand": ".devcontainer/postinstall.sh",
+  // "postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "esbenp.prettier-vscode",
+        "redhat.vscode-yaml",
+        "me-dutour-mathieu.vscode-github-actions",
+        "eamodio.gitlens",
+        "bradymholt.pgformatter"
+      ]
+    }
+  }
+
+  // Configure tool-specific properties.
+  // "customizations": {},
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,48 @@
+version: "3.8"
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+
+    volumes:
+      - ..:/workspaces/webstudio:cached
+      # preserve history
+      - ./.local:/home/node/.local
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: ghcr.io/supabase/postgres:15.1.1.55
+    # Uncomment to log all queries
+    # command: ["postgres", "-c", "log_statement=all"]
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: pass
+      POSTGRES_DB: webstudio
+
+    ports:
+      - ${PGPORT:-5432}:5432
+
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d webstudio"]
+      interval: 10s
+      timeout: 5s
+      retries: 25
+
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+volumes:
+  postgres-data:

.devcontainer/postinstall.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+echo 'eval "$(fzf --bash)"' >> /home/node/.bashrc
+
+mkdir -p /home/node/.local/fzf
+
+touch /home/node/.local/fzf/.bash_history
+
+echo 'export HISTFILE=/home/node/.local/fzf/.bash_history' >> "/home/node/.bashrc"
+
+cd /workspaces/webstudio
+sudo corepack enable
+corepack install
+
+pnpm config set store-dir $HOME/.pnpm-store
+
+
+find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
+find . -name 'lib' -type d -prune -exec rm -rf '{}' +
+find . -name 'build' -type d -prune -exec rm -rf '{}' +
+find . -name 'dist' -type d -prune -exec rm -rf '{}' +
+find . -name '.cache' -type d -prune -exec rm -rf '{}' +
+find . -name '.pnpm-store' -type d -prune -exec rm -rf '{}' +
+
+pnpm install
+pnpm run build
+pnpm migrations migrate

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.gitignore

@@ -29,7 +29,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env
+# .env
+.env.development
 .env.local
 .env.development.local
 .env.test.local

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ms-vscode-remote.remote-containers"]
+}

apps/builder/.env

@@ -1,9 +1,11 @@
-BUILDER_HOST=webstudio.is
-DATABASE_URL=postgresql://user:pass@localhost/webstudio
-DIRECT_URL=postgresql://user:pass@localhost/webstudio
+# To override environment variables, add a .env.development file in the same directory.
+# For more details, visit: https://vitejs.dev/guide/env-and-mode#env-files
+DATABASE_URL=postgresql://postgres:pass@db/webstudio?pgbouncer=true
+DIRECT_URL=postgresql://postgres:pass@db/webstudio
+
 AUTH_SECRET="# Linux: $(openssl rand -hex 32) or go to https://generate-secret.now.sh/64"
-GH_CLIENT_SECRET=
-GH_CLIENT_ID=
+# GH_CLIENT_SECRET=
+# GH_CLIENT_ID=
 DEV_LOGIN=true
 
 # Restrictions
@@ -46,9 +48,11 @@ ASSET_BASE_URL=/s/uploads/
 FEATURES=*
 
 # TRCP server url and API token. If empty local TRPC server is used
-TRPC_SERVER_URL=
-TRPC_SERVER_API_TOKEN=
+# TRPC_SERVER_URL=
+# TRPC_SERVER_API_TOKEN=
 
 # AI Features
-OPENAI_KEY=
-OPENAI_ORG=
+# OPENAI_KEY=
+# OPENAI_ORG=
+
+

apps/builder/.gitignore

@@ -1,6 +1,4 @@
 .cache
-.env
-.env.*
 .vercel
 .output
 

packages/prisma-client/migrations-cli/commands.ts

@@ -291,16 +291,6 @@ export const migrate = async () => {
     process.exit(0);
   }
 
-  if (args.values.dev) {
-    logger.info("You're about to apply the following migration(s):");
-    logger.info("");
-    for (const migration of status.pending) {
-      logger.info(`  - ${migration.name}`);
-    }
-    logger.info("");
-    await ensureUserWantsToContinue(true);
-  }
-
   await up();
 };