adds devcontainer.json for Codespaces and container use (#428)

## Description

This PR adds a [devcontainer.json](https://containers.dev/) file to the
Prototype Kit repository. A devcontainer.json file is a configuration
file used by Github and Visual Studio Code (as well as other tools) to
define a development environment inside a container.

This file is part of the Dev Containers feature, which lets us
standardise the Prototype Kit coding setup within GitHub Codespaces.

## What does this configuration do?

1. Sets a port number in an environment variable to override the default
2000 for Codespaces (as 2000 conflicts in a Codespace).
2. Labels the port 3001 so a kit user knows what is running on that port
(the kit)
3. Upon activation of the port shows the preview feature within
Codespaces to show the user that the kit is up and running.
4. Tell any other ports made active by the kit to not be shown to the
user.
5. Sets the git config to use rebasing (to make merging via Codespaces
easier).
6. Tells the container to run `npm install` once it has been created.
7. Tells the container to run `npm run watch` each time a user attaches
(opens the Codespace).
8. Customises the web-based VSCode interface to enable emmet (a
developer feature for writing HTML) within Nunjucks language.
9. Adds a Nunjucks syntax highlighting extension so users can more
easily read Nunjucks templates within a Codespace

.devcontainer/devcontainer.json

@@ -0,0 +1,65 @@
+{
+  "name": "NHS Prototype Kit",
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  // codespaces seems to have an issue using port 2000 so setting to 2001 for the NHS Prototype Kit
+  "runArgs": ["--env", "PORT=2001"],
+  "portsAttributes": {
+    "3001": {
+      "label": "Running prototype",
+      // --------------------------------
+      // onAutoForward possible options
+      // --------------------------------
+      // you can change the value to one of the following possible options:
+      // 'notify' (shows a prompt),
+      // 'silent' (does nothing)
+      // 'openBrowser' (opens the prototype URL in a browser window/tab)
+      // 'openPrview' (opens the codespaces preview window to present the running prototype to the user)
+      "onAutoForward": "openPreview"
+    }
+  },
+  // forward the port for the browersync process
+  "forwardPorts": [3001],
+  "otherPortsAttributes": { "onAutoForward": "ignore" },
+  // when created - sets the git merge statergy to rebase to hopefully make easier time of merging
+  "onCreateCommand": "git config --global pull.rebase true",
+  // after creation - installs the node packages
+  "postCreateCommand": "npm install",
+  // A command to run each time a tool has successfully attached to the container
+  "postAttachCommand": {
+    "server": "npm run watch"
+  },
+  // codespace customisations
+  "customizations": {
+    // Configure properties specific to VS Code web-basde IDE used within codespaces.
+    "vscode": {
+      // editor settings
+      "settings": {
+        // uncomment the following lines to hide files not needed to update content
+        // "files.exclude": {
+        //   "{docs,lib,linters,middleware,node_modules,public,tests,NHS111.Shared.Frontend}/": true,
+        //   "*{CHANGELOG,CONTRIBUTING}.md": true,
+        //   "app/{data,assets}/": true,
+        //   "app/*.js": true,
+        //   "*.{js,yml,json}": true,
+        //   ".*": true,
+        //   "LICENSE": true
+        // },
+        // make emmet work within nunjucks
+        "emmet.includeLanguages": {
+          "njk": "html",
+          "nunjucks": "html",
+          "erb": "html",
+          "jinja": "html",
+          "jinja-html": "html",
+          "markdown": "html"
+        },
+        "html.suggest.html5": true
+      },
+      // bundle the following editor extensions
+      "extensions": [
+        // nunjuck syntax highlighting
+        "douglaszaltron.nunjucks-vscode-extensionpack"
+      ]
+    }
+  }
+}

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Update default index page ([PR 423](https://github.com/nhsuk/nhsuk-prototype-kit/pull/423))
 - Import task list component ([PR 437](https://github.com/nhsuk/nhsuk-prototype-kit/pull/437))
 - The example page templates have moved from the `docs` folder to `lib/example-templates` - ([PR 409](https://github.com/nhsuk/nhsuk-prototype-kit/pull/409))
+- Added a devcontainer.json file to configure Github Codespaces for use of the kit ([PR 428])(https://github.com/nhsuk/nhsuk-prototype-kit/pull/428))
 
 
 ## 5.1.0 - 12 November 2024