From a3fd340751bee46cd72a990ae77076e4bfc3b5f9 Mon Sep 17 00:00:00 2001
From: SamStaijen <15876627+SamStaijen@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:28:44 +0100
Subject: [PATCH] Feat/393 lack of devcontainer (#394)

* updated devcontainer to have postCreateCOmmand

* updated README to comply with devcontainer

* update readme
---
 .devcontainer/devcontainer.json | 8 ++++++++
 README.md                       | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .devcontainer/devcontainer.json

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..1a28a7a
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,8 @@
+{
+	"name": "Dev container - Static-Sticky",
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm",
+	"features": {
+		"ghcr.io/devcontainers/features/github-cli:1": {}
+	},
+	"postCreateCommand": "npm install" //gets run once after creation
+}
diff --git a/README.md b/README.md
index 7f188fe..958d530 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,9 @@ Study Association Sticky's website is a static website built in React with Gatsb
 
 ## Installation
 
-1. Install Node Version Manager [nvm](https://github.com/creationix/nvm).
-2. Install the required version of Node.JS (v13.11.0) by running `nvm install --latest-npm` in the project directory.
-3. Install dependencies with `npm install`.
+1. Make sure you have the [Docker engine](https://docs.docker.com/engine/), as well as [Visual studio code](https://code.visualstudio.com/) with the [Devcontainers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extention installed.
+2. open the project in a dev containter. The default shortcut for this (in VS Code) is: <kbd>CTRL</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>, and then typing `open folder` in container. You may have to select the project folder. If this takes longer than expected, please read the warning below.
+3. Open a terminal in the dev container. You can do this by pressing `Terminal` (in the hotbar), then `New terminal`. Alternatively, you can use the default keybinds: <kbd>CTRL</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd>.
 4. Create .env file: `cp sample.env .env`.
 5. Fill .env with the required api keys from [contentful](https://app.contentful.com/).
    Ask someone in the CommIT for the right keys to use.
@@ -18,7 +18,7 @@ If you want to watch for changes in the theme, also run `npm run watch-semantic`
 
 If you get an error about file watchers, try this <https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers>
 
-Then just run `npm run develop` to start a shiny development server with hot reloading.
+Then just run `npm run develop` inside the devcontainer commandline to start a shiny development server with hot reloading.
 
 ## Contentful queries