adds devcontainer.json for Codespaces and container use

[paulmsmith]

Description

This PR adds a devcontainer.json 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

Checklist

• CHANGELOG entry

[frankieroberto]

Nice!

I tested this by copying the config into the prototype for the service I’m working on and it worked (after I, um, fixed a typo I introduced).

The one thing that doesn’t seem to work yet is BrowserSync. When I look at the javascript console for the codespace there seems to be a access control issue with the XMLHttpRequest call that BrowserSync uses:

Any ideas? Not a blocker though - can still do manual refreshes for now.

[paulmsmith]

Nice!

I tested this by copying the config into the prototype for the service I’m working on and it worked (after I, um, fixed a typo I introduced).

The one thing that doesn’t seem to work yet is BrowserSync. When I look at the javascript console for the codespace there seems to be a access control issue with the XMLHttpRequest call that BrowserSync uses:

Any ideas? Not a blocker though - can still do manual refreshes for now.

Ah.. Good spot! I thought that was working but I might have made that up because it does the same for me.

[frankieroberto]

I’ve tested this and it all works (apart from the livereload feature but that’s not blocking and can be fixed later). 👍

Suggest we release this and test it out with a few people and then put out some guidance for it in https://prototype-kit.service-manual.nhs.uk later.