feat: add vscode dev container (#3)

* chore: add vscode dev container * docs: update documentation * chore: fix polling env in dev container
OdysseusLarp · Sep 14, 2023 · a5f251e · a5f251e
1 parent 6bf3281
commit a5f251e
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 2 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,39 @@
+// For template details, see https://github.com/microsoft/vscode-dev-containers/tree/main/container-templates
+// For image details, see https://github.com/devcontainers/images/tree/main/src/typescript-node
+// For config options, see https://code.visualstudio.com/docs/remote/devcontainerjson-reference
+{
+	"name": "Odysseus HANSCA",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:18-bullseye",
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"dbaeumer.vscode-eslint",
+				"Vue.volar"
+			]
+		}
+	},
+	"features": {
+		"ghcr.io/devcontainers/features/github-cli:1": {},
+		"ghcr.io/devcontainers/features/common-utils:2": {},
+		"ghcr.io/devcontainers/features/docker-outside-of-docker:1": {},
+		"ghcr.io/devcontainers/features/node:1": {}
+	},
+	"mounts": [
+		{
+			"source": "${localWorkspaceFolderBasename}-node_modules",
+			"target": "${containerWorkspaceFolder}/node_modules",
+			"type":"volume"
+		}
+	],
+	"postCreateCommand": "bash .devcontainer/postCreateCommand.sh",
+	"remoteEnv": {
+		"WATCHPACK_POLLING": "true",
+		"NODE_ENVIRONMENT": "development"
+	},
+	"remoteUser": "node",
+	"runArgs": [
+		// Turn off user namespace within the container (SELINUX)
+		"--security-opt",
+		"label:disable"
+	]
+}
diff --git a/.devcontainer/postCreateCommand.sh b/.devcontainer/postCreateCommand.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+# Fix volume permissions
+sudo chown -R $USER: node_modules
+
+# Install dependencies
+npm install
+npm run serve
diff --git a/README.md b/README.md
@@ -1,6 +1,24 @@
-# hansca
+# HANSCA
+
+Hand scanner for engineers, scientists and medics.
+
+## Tech
+
+* Node v18.14.0
+* Vue v2.6.14
+
+## Local setup
+
+### Environment file
+Copy `.env.example` file to a file named `.env` and changle the default environmental variables as following:
 
-## Project setup
+```
+VUE_APP_BACKEND_URL=http://localhost:8888/
+VUE_APP_BACKEND_USER=
+VUE_APP_BACKEND_PASS=
+```
+
+### Install dependencies
 ```
 npm install
 ```
@@ -10,6 +28,39 @@ npm install
 npm run serve
 ```
 
+## Local setup in VSCode dev container
+
+You can also run the app using [VSCode dev containers](https://code.visualstudio.com/docs/devcontainers/containers). Create/update your .env file like in the local setup instructions.
+
+### Requirements
+
+- [Docker](https://www.docker.com/)
+- [VSCode](https://code.visualstudio.com/) with [Dev Containers](https://code.visualstudio.com/docs/devcontainers/tutorial#_install-the-extension) extension
+- [Odysseus Backend](https://github.com/OdysseusLarp/odysseus-backend)
+
+### Setup
+
+* **`NOTE!`** Make sure you are running `Odysseus Backend`!
+* Check you have your .env file copied as instructed above in [Environment file](#environment-file)
+* Open new window in VSCode
+* File --> Open Folder... --> `odysseus-admin-story-tool`
+* VSCode will ask do you want to `Reopen in Container` --> Click it
+    * If you are too slow --> Click the button in left bottom corner (looks like two L:s or disjointed ><) and choose `Reopen in Container` from the menu.
+* VSCode will then build and start up the dev container, installs npm packages and starts the service.
+
+### Problems?
+
+* Try to rebuild the container: Click the button in left bottom corner (looks like two L:s or disjointed >< with the container name) and choose `Rebuild Container` from the menu.
+* You might run into [this issue](https://github.com/microsoft/vscode-remote-release/issues/7305) on ARM processors, see the issue for potential workarounds.
+
+## Test Bio ID:s
+
+* Medic: `bio3` (in a NFC tag `bio:bio3`)
+* Engineer: `bio78` (in a NFC tag `bio:bio78`)
+* Scientist: `bio11` (in a NFC tag `bio:bio11`)
+
+## Other Available Scripts
+
 ### Compiles and minifies for production
 ```
 npm run build