diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000000..2b28681164 --- /dev/null +++ b/.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 + +# [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 " diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..821fbedd78 --- /dev/null +++ b/.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" +} \ No newline at end of file diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml new file mode 100644 index 0000000000..c8bdfdf212 --- /dev/null +++ b/.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: diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000..87749a8474 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "ms-vscode-remote.remote-containers" + ] +} \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000000..5c7027f62d --- /dev/null +++ b/.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" + } + } + ] + } \ No newline at end of file diff --git a/README.md b/README.md index 098502bd99..e266c193ad 100644 --- a/README.md +++ b/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