From 7f5f4da357d9a1e975aa00f9dfb7f791a5f69ea4 Mon Sep 17 00:00:00 2001
From: Valerio <valeriocomo@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:42:17 +0100
Subject: [PATCH] chore: devcontainer setup

---
 .devcontainer/Dockerfile                   |  7 ++++
 .devcontainer/devcontainer.json            | 38 ++++++++++++++++++++++
 .devcontainer/scripts/postCreateCommand.sh |  9 +++++
 .github/dependabot.yml                     | 12 +++++++
 README.md                                  | 36 ++++++++++++++++++++
 5 files changed, 102 insertions(+)
 create mode 100644 .devcontainer/Dockerfile
 create mode 100644 .devcontainer/devcontainer.json
 create mode 100644 .devcontainer/scripts/postCreateCommand.sh
 create mode 100644 .github/dependabot.yml

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 00000000..587c8442
--- /dev/null
+++ b/.devcontainer/Dockerfile
@@ -0,0 +1,7 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm
+
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends chromium
+
+# Unit test only
+ENV CHROME_BIN=/usr/bin/chromium
\ No newline at end of file
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000..924b87d5
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,38 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "design-angular-kit",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	// "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm",
+	"build": {
+		"dockerfile": "Dockerfile"
+	},
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	"features": {
+		"ghcr.io/devcontainers-contrib/features/angular-cli:2": {
+			"version": "17.1.2"
+		},
+		"ghcr.io/devcontainers-contrib/features/cz-cli:1": {}
+	},
+	"mounts": [
+		"source=design-angular-kit-bundle-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" // deps volume
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"angular.ng-template",
+				"cyrilletuzi.angular-schematics",
+				"esbenp.prettier-vscode",
+				"dbaeumer.vscode-eslint",
+				"vivaxy.vscode-conventional-commits"
+			]
+		}
+	}
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}
\ No newline at end of file
diff --git a/.devcontainer/scripts/postCreateCommand.sh b/.devcontainer/scripts/postCreateCommand.sh
new file mode 100644
index 00000000..8e3de4ba
--- /dev/null
+++ b/.devcontainer/scripts/postCreateCommand.sh
@@ -0,0 +1,9 @@
+#/bin/bash
+
+echo "Set node_modules permission"
+sudo chown -R node:node node_modules
+echo "Set node_modules permission: done"
+
+echo "Installing deps"
+npm i
+echo "Installing deps: done"
\ No newline at end of file
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..f33a02cd
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,12 @@
+# 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
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly
diff --git a/README.md b/README.md
index e725cbc9..fc3215f0 100644
--- a/README.md
+++ b/README.md
@@ -409,6 +409,42 @@ npm run start
 npm run test
 ```
 
+### Impostare l'ambiente locale con Devcontainer
+
+I requisiti minimi del tuo ambiente locale per lavorare con i Devcontainer devono essere:
+
+- Visual Studio Code
+- Docker
+- git
+
+Avvia Visual Studio Code e installa l'estensione Dev Containers di Microsoft (ms-vscode-remote.remote-containers).
+
+A questo punto, è necessario impostare seguire i seguenti step:
+
+1. Clonare il progetto
+
+```
+git clone https://github.com/italia/design-angular-kit.git
+```
+
+2. Aprire la cartella di progetto con Visual Studio Code
+
+3. Al caricamento, Visual Studio Code riconoscerà la presenta della configurazione di un Devcontainer. Aprire il progetto con il devcontainer. Altre info [qui](https://code.visualstudio.com/docs/devcontainers/create-dev-container).
+
+4. Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato. 
+
+5. Lanciare l'applicazione in locale
+
+```
+npm run start
+```
+
+6. Per eseguire i test di unità eseguire il comando
+
+```
+npm run test
+```
+
 ## Link utili
 
 - [Playground Angular Kit](https://github.com/italia/design-angular-kit-playground)