Feature/devcontainer (#79)

* fixes committed conflict in README

* adds a devcontainer based on compose

includes mailhog and postgres containers

* adds launch.json for nextjs vscode quick actions

* mentions devcontainer in the readme

* auto prisma migration after creating devcontainer

* remote containers as recommended vscode extension

* adds nextauth url env to dev container

- to show correct links in mails when testing locally

Co-authored-by: Niklas Paulsen <npau@informatik.uni-kiel.de>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

.devcontainer/Dockerfile

@@ -0,0 +1,14 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=16-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [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,31 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
+{
+	"name": "Node.js & PostgreSQL",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspace",
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"dbaeumer.vscode-eslint"
+			]
+		}
+	},
+	// 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": [
+		// frontend
+		3000,
+		// postgres
+		5432
+	],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "yarn install && yarn prisma migrate dev",
+	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,63 @@
+version: '3.8'
+
+services:
+  app:
+    build: 
+      context: .
+      dockerfile: Dockerfile
+      args:
+        VARIANT: 16-bullseye
+
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@db:5432/snoopformsdev?schema=public
+      NEXTAUTH_URL: http://localhost:3000
+      NEXT_TELEMETRY_DISABLED: 1
+      
+      MAIL_FROM: noreply@example.com
+      SMTP_HOST: mailhog
+      SMTP_PORT: 1025
+      SMTP_USER: smtpUser
+      SMTP_PASSWORD: smtpPassword
+
+      TERMS_URL: https://www.example.com/terms
+      PRIVACY_URL: https://www.example.com/privacy
+      PUBLIC_IMPRINT_URL: https://www.example.com/imprint
+      PUBLIC_PRIVACY_URL: https://www.example.com/enduserPrivacy
+      
+    volumes:
+      - ..:/workspace:cached
+      
+    # 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
+
+    # Uncomment the next line to use a non-root user for all processes.
+    # user: node
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  db:
+    image: postgres:13-alpine
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    # network_mode: service:app
+
+    environment:
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+      POSTGRES_DB: snoopformsdev
+
+  mailhog:
+    image: mailhog/mailhog
+    # network_mode: service:app
+    logging:
+      driver: 'none'  # disable saving logs
+    ports:
+      - 8025:8025 # web ui
+    #   - 1025:1025 # smtp server
+volumes:
+  postgres-data:

.vscode/extensions.json

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

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "yarn dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "yarn dev",
+        "serverReadyAction": {
+          "pattern": "started server on .+, url: (https?://.+)",
+          "uriFormat": "%s",
+          "action": "debugWithChrome"
+        }
+      }
+    ]
+  }

README.md

@@ -50,6 +50,27 @@ With snoopForms you can build complex multi-page forms in minutes using either o
 
 ## Getting started
 
+you can develop in a VS Code [dev container](https://code.visualstudio.com/docs/remote/containers) or using any editor/IDE with local tool installation.
+
+### Getting started using VS Code dev container
+
+You need
+- Docker, e.g. [Docker Desktop](https://www.docker.com/products/docker-desktop)
+- [VS Code](https://code.visualstudio.com/download) with the extension [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) (`ms-vscode-remote.remote-containers`)
+
+Either use the command `Open Folder in Container...` in the cloned repo, or use `Remote Containers: Clone Repository in Container Volume...`, for example to inspect a PR.
+
+The dev container comes with 
+- Node.JS, yarn etc pre-installed
+- a `postgres` container and environment variables preset to reach it, 
+- a `mailhog` container that acts as a mock SMTP server and shows received mails in a web UI (forwarded to your host's `localhost:8025`)
+
+upon start, it executes the `yarn install` and `yarn prisma migrate dev` automatically once.
+
+When your dev container is ready, you can simply hit `F5` to start the application in debug mode.
+
+### Getting started using local development setup
+
 To get the project running locally on your machine you need to have the following development tools installed:
 
 - Node.JS (we recommend v16)
@@ -74,7 +95,7 @@ yarn install
 docker run --name snoopformsDB -p 5432:5432 -e POSTGRES_USER=snoopforms -e POSTGRES_PASSWORD=password -e POSTGRES_DB=snoopforms -d postgres
 ```
 
-1. Create a `.env` file based on `.env.example` and change it according to your setup. Make sure the `DATABASE_URL` variable is set correctly according to your local database.
+4. Create a `.env` file based on `.env.example` and change it according to your setup. Make sure the `DATABASE_URL` variable is set correctly according to your local database.
 
 ```
 cp .env.example .env
@@ -86,15 +107,15 @@ For the example above, use the following:
 DATABASE_URL='postgresql://snoopforms:password@localhost:5432/snoopforms?schema=public'
 ```
 
-1. Use the code editor of your choice to edit the .env file. You need to change all fields according to your setup.
+5. Use the code editor of your choice to edit the .env file. You need to change all fields according to your setup.
 
-2. Make sure your PostgreSQL Database Server is running. Then let prisma set up the database for you:
+6. Make sure your PostgreSQL Database Server is running. Then let prisma set up the database for you:
 
 ```
 yarn prisma migrate dev
 ```
 
-6. Start the development server:
+7. Start the development server:
 
 ```
 yarn dev