Merge pull request #27 from jeankhawand/add-dev-container

Add DevContainer Support

.devcontainer/README.md

@@ -0,0 +1,31 @@
+# Known Issues
+
+If you encountered issue with `npm install` exited with the following
+```
+[4949 ms] Start: Run in container: /bin/sh -c npm install
+npm notice
+npm notice New minor version of npm available! 10.2.3 -> 10.4.0
+npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
+npm notice Run npm install -g [email protected] to update!
+npm notice
+[121068 ms] postCreateCommand failed with exit code 1. Skipping any further user-provided commands.
+```
+you are most probably behind a proxy / corporate network. To resolve this issue:
+1. Open in a new browser tab `https://registry.npmjs.org/`
+2. Follow [here](https://www.howtogeek.com/292076/how-do-you-view-ssl-certificate-details-in-google-chrome/) to get Root CA and click on `Export` to extract certificate content
+3. Copy and paste the content inside `root_ca.crt` that should be created under `.devcontainer/`
+4. add the following env variable to map Root CA into the container
+```json
+    [...]
+  "remoteEnv": {
+    [...]
+    "NODE_EXTRA_CA_CERTS": ".devcontainer/root_ca.crt"
+  },
+    [...]
+```
+5. In VS Code `cmd/ctrl` + `shift` + `p` and select the **Dev Containers: Rebuild and Reopen in container** command to rebuild and open container.
+
+
+References:
+- [Issue with self signed certificates when installing extensions](https://github.com/microsoft/vscode-remote-release/issues/2987)
+- [Self signed SSL Certificate support for DevContainers](https://github.com/microsoft/vscode-remote-release/issues/6092)

.devcontainer/devcontainer.json

@@ -0,0 +1,21 @@
+{
+  "name": "constellation-ui-gallery",
+  "forwardPorts": [6006, 4010],
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
+  "remoteEnv": {
+    "LOCAL_WORKSPACE_FOLDER": "${localWorkspaceFolder}"
+  },
+  "postCreateCommand": "npm install",
+  "customizations": {
+    "vscode": {
+      "settings": {},
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "stylelint.vscode-stylelint",
+        "streetsidesoftware.code-spell-checker",
+        "styled-components.vscode-styled-components"
+      ]
+    }
+  }
+}

.gitignore

@@ -134,3 +134,6 @@ dist
 .yarn/install-state.gz
 .pnp.*
 .DS_Store
+
+# Devcontainer certs
+.devcontainer/root_ca.crt

README.md

@@ -20,6 +20,8 @@ Install npm from [nodejs.org](https://nodejs.org/en/download/)
 
 You should have the following versions installed: System node version 18.13.0 and npm version 8.
 
+If you already have [VS Code](https://code.visualstudio.com/) and [Docker](https://docs.docker.com/get-docker/) installed, you can click [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/pegasystems/constellation-ui-gallery) to get started. Clicking these links will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
+
 For more details, see [docs.pega.com](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/initialize-project.html)
 
 ### Project setup