From 1aaf01dbdd53f94826105c8c352f2525d2d4ee6d Mon Sep 17 00:00:00 2001 From: Kylee Fields <43586156+kyleecodes@users.noreply.github.com> Date: Tue, 5 Mar 2024 21:59:56 -0500 Subject: [PATCH] Feat: Create Dev Container (#389) * Feat: Create Dev Container Added new Vscode dev container to make contributing easier. Runs dev environment in a Docker container. Includes extensions and git. Directions included in README Testing not impacted. --- .devcontainer/devcontainer.json | 43 ++++++++++++++++++++++++++++++++ .devcontainer/docker-compose.yml | 27 ++++++++++++++++++++ .github/dependabot.yml | 15 +++++++++++ .vscode/extensions.json | 14 +++++------ .vscode/settings.json | 38 ++++++++++++++-------------- Dockerfile | 3 +++ README.md | 26 ++++++++++++++++--- 7 files changed, 136 insertions(+), 30 deletions(-) create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/docker-compose.yml create mode 100644 .github/dependabot.yml diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 00000000..814b637f --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,43 @@ +// Comments generated through the "Create a Dev Container" wizard in Visual Studio Code +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-docker-compose +{ + "name": "Existing Docker Compose (Extend)", + // Update the 'dockerComposeFile' list if you have more compose files or use different names. + // The .devcontainer/docker-compose.yml file contains any overrides you need/want to make. + "dockerComposeFile": [ + "../docker-compose.yml", + "docker-compose.yml" + ], + // The 'service' property is the name of the service for the container that VS Code should + // use. Update this value and .devcontainer/docker-compose.yml to the real service name. + "service": "api", + // The optional 'workspaceFolder' property is the path VS Code should open by default when + // connected. This is typically a file mount in .devcontainer/docker-compose.yml + "workspaceFolder": "/app", + // Features to add to the dev container. More info: https://containers.dev/features. + // "features": { + // "ghcr.io/devcontainers/features/github-cli:1": {} + // }, + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + // Uncomment the next line if you want start specific services in your Docker Compose config. + "runServices": [ + "db" + ], + // Uncomment the next line if you want to keep your containers running after VS Code shuts down. + // "shutdownAction": "none", + // Uncomment the next line to run commands after the container is created. + // "postCreateCommand": "cat /etc/os-release", + // Configure tool-specific properties. + "customizations": { + "vscode": { + "extensions": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode" + ] + } + } + // Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "devcontainer" +} \ No newline at end of file diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml new file mode 100644 index 00000000..6351c33f --- /dev/null +++ b/.devcontainer/docker-compose.yml @@ -0,0 +1,27 @@ +# Comments generated through the "Create a Dev Container" wizard in Visual Studio Code +version: '3.9' +services: + # Update this to the name of the service you want to work with in your docker-compose.yml file + api: + # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer + # folder. Note that the path of the Dockerfile and context is relative to the *primary* + # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile" + # array). The sample below assumes your primary file is in the root of your project. + # + # build: + # context: . + # dockerfile: .devcontainer/Dockerfile + + # volumes: + # # Update this to wherever you want VS Code to mount the folder of your project + # - ..:/workspaces:cached + + # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust. + # cap_add: + # - SYS_PTRACE + # security_opt: + # - seccomp:unconfined + + # Overrides default command so things don't shut down after the process ends. + command: /bin/sh -c "while sleep 1000; do :; done" + diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 00000000..278b7e88 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,15 @@ +# 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 + +# Run dependabot weekly to check for updates to the devcontainers package ecosystem. +# Might need to combine this with future dependabot configurations later. + +version: 2 +updates: + - package-ecosystem: "devcontainers" + directory: "/" + schedule: + interval: weekly diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 94330340..b4dce087 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,8 +1,8 @@ { - "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"], - "unwantedRecommendations": [ - "hookyqr.beautify", - "dbaeumer.jshint", - "ms-vscode.vscode-typescript-tslint-plugin" - ] -} + "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"], + "unwantedRecommendations": [ + "hookyqr.beautify", + "dbaeumer.jshint", + "ms-vscode.vscode-typescript-tslint-plugin" + ] + } \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index f2ef2450..88353e22 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,21 +1,21 @@ { - "editor.formatOnPaste": true, - "editor.formatOnSave": true, - "editor.codeActionsOnSave": { - "source.organizeImports": "explicit", - "source.fixAll": "explicit", - "source.fixAll.eslint": "explicit" - }, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "vetur.format.defaultFormatterOptions": { - "prettier": { - "singleQuote": true - } - }, - "[jsonc]": { - "editor.defaultFormatter": "vscode.json-language-features" - }, - "cSpell.words": [ - "simplybook" - ] + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.organizeImports": "explicit", + "source.fixAll": "explicit", + "source.fixAll.eslint": "explicit" + }, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "vetur.format.defaultFormatterOptions": { + "prettier": { + "singleQuote": true + } + }, + "[jsonc]": { + "editor.defaultFormatter": "vscode.json-language-features" + }, + "cSpell.words": [ + "simplybook" + ] } \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 79f5bbb8..1490801f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,8 @@ FROM node:16-alpine +# Install git for devcontainers +RUN apk add --no-cache git + ENV NODE_ENV=development WORKDIR /app diff --git a/README.md b/README.md index 6c94749c..69d05533 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,21 @@ For a more detailed explanation of this project's key concepts and architecture, - Yarn v1.x - Docker +### Run in Dev Container - OPTIONAL + +**Recommended for Visual Studio & Visual Studio Code users.** + +This method will automatically install all dependencies and IDE settings in a Dev Container (Docker container) within Visual Studio Code. Simply clone this repo to your computer, open in Visual Studio Code, and select "Re-open in Container" when notified. + +After re-opening VS Code in a dev container, develop as you normally would and use the container terminal within VS Code. Next, [configure your environment variables](#configure-environment-variables). + +The dev Container is configured in the `.devcontainer` directory: + +- `docker-compose.yml` file in this directory extends the `docker-compose.yml` in the root directory. +- `devcontainer.json` configures the integrations with Visual Studio Code, such as the IDE extensions and settings in the `vscode` directory. + +Read for more detailed instructions: [Visual Studio Code Docs: Developing Inside a Dev Container](https://code.visualstudio.com/docs/devcontainers/containers). + ### Install dependencies ```bash @@ -123,7 +138,9 @@ RESPOND_IO_CREATE_CONTACT_WEBHOOK= RESPOND_IO_DELETE_CONTACT_WEBHOOK= ``` -### Run locally (with Docker) - RECOMMENDED +### Run the App Locally + +#### Using Docker - RECOMMENDED The project is containerized and can be run solely in docker - both the PostgreSQL database and NestJS app. To run the backend locally, make sure your system has Docker installed - you may need Docker Desktop if using a Mac. @@ -141,7 +158,9 @@ Listening on localhost:35001, CTRL+C to stop _Note: you can use an application like Postman to test the apis locally_ -**Run the app** +#### Without Docker + +First install [postgres](https://www.postgresql.org/). Next follow directions to [seed the database](#seed-local-database), then run: ```bash yarn start:dev @@ -216,8 +235,7 @@ Formatting and linting is provided by ESLint and Prettier (see the relevant conf Workspace settings for VSCode are included for consistent linting and formatting. ### Seed Local Database - -Visit our [Tech Volunteer Guide](https://chayn.notion.site/Tech-volunteer-wiki-5356c7118c134863a2e092e9df6cbc34#84635bd9b82543ccaab4fb932ca35ebf) for directions on how to seed your local database with data. +If you're a volunteer, add data to your local database by seeding it with a backup file. Please [read our Tech Volunteer Guide](https://www.notion.so/chayn/Tech-volunteer-wiki-5356c7118c134863a2e092e9df6cbc34?pvs=4#0fb25ffde84f4854b2d9730200eee283) for directions on seeding the local database. If you're staff and have access to Heroku, you also have the option to seed the database via the following script. Before you start, make sure: