🧑‍💻 Add dev container (#447)

Author: wei

.changeset/calm-zoos-bow.md

@@ -0,0 +1,5 @@
+---
+"socialify": patch
+---
+
+Set up dev container

.devcontainer/Dockerfile

@@ -0,0 +1,3 @@
+ARG VARIANT="22-bookworm"
+
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-${VARIANT}

.devcontainer/devcontainer.json

@@ -0,0 +1,36 @@
+{
+	"name": "Socialify Dev Environment",
+
+	"build": {
+    "dockerfile": "Dockerfile"
+  },
+
+	"features": {
+		"ghcr.io/devcontainers/features/github-cli:1": {
+			"installDirectlyFromGitHubRelease": true,
+			"version": "latest"
+		}
+	},
+
+	"forwardPorts": [3000],
+
+	"containerEnv": {
+		"NEXT_TELEMETRY_DISABLED": "1",
+		"PNPM_HOME": "/home/node/.local/share/pnpm",
+		"PNPM_STORE_DIR": "/home/node/.local/share/.pnpm-store"
+	},
+
+	"postCreateCommand": "corepack install",
+
+	"postStartCommand": ".devcontainer/post-start.sh",
+
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"GitHub.copilot",
+				"biomejs.biome",
+				"ms-playwright.playwright"
+			]
+		}
+	}
+}

.devcontainer/post-start.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+if [ ! -f /home/node/.first_run ]; then
+  git config --global --add safe.directory $(pwd)
+  git config --global core.autocrlf true
+  git config --global core.editor nano
+
+  pnpm config set store-dir $PNPM_STORE_DIR
+  pnpm install
+  pnpm playwright:install
+
+  if [ ! -f .env ]; then
+    cp .env.example .env
+    echo -e "\e[31mPlease fill in the .env file\e[0m"
+  fi
+
+  touch /home/node/.first_run
+fi

.gitignore

@@ -1,8 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Local vscode
-.vscode
-
 # Playwright
 /.playwright/.cache
 /.playwright/test-report

.husky/prepare-commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 # gitmoji as a commit hook
 exec < /dev/tty
-npx gitmoji-cli --hook $1 $2
+npx --yes gitmoji-cli --hook $1 $2

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "files.insertFinalNewline": true
+}

README.md

@@ -78,11 +78,18 @@ pnpm dev
 
 ### Testing and Committing
 
+[![Open in Dev Container](https://img.shields.io/static/v1?label=Dev%20Containers&message=Click%20to%20Launch&color=blue)](https://open.vscode.dev/wei/socialify)
+
+If you already have VS Code and Docker installed locally, you can also click [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/wei/socialify) to get started. Clicking this link will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
+
 Socialify uses [`biomejs`](https://biomejs.dev/) as linter/formatter, [`Jest`](https://jestjs.io/) for unit testing, and [`Playwright`](https://playwright.dev/) for end-to-end testing.
 
 Make sure to run and pass the linter, unit and end-to-end tests locally before committing your code. Please let us know in case you need to update the test snapshots. More in `"scripts"` section in your `package.json` file.
 
 ```shell
+# Required: Set environment variables in .env.
+cp .env.example .env
+
 # Run linter/formatter
 pnpm lint
 
@@ -93,7 +100,7 @@ pnpm lint
 pnpm test:unit
 
 # Install Playwright dependencies (first-time)
-# pnpm playwright install --with-deps chrome
+# pnpm playwright:install
 
 # Run e2e tests
 pnpm test:e2e

package.json

@@ -22,6 +22,7 @@
     "ncu": "npx npm-check-updates -u",
     "verify": "pnpm lint && pnpm test && pnpm build",
     "download-font": "./fonts/download-font.sh",
+    "playwright:install": "pnpm playwright install --with-deps chromium",
     "postinstall": "mkdir -p ./public && cp ./node_modules/yoga-wasm-web/dist/yoga.wasm ./public/yoga.wasm && cp ./node_modules/@resvg/resvg-wasm/index_bg.wasm ./public/resvg_bg.wasm",
     "prepare": "is-ci || husky"
   },