deno-playground

A Containerized playground for experimenting with deno (a secure runtime for JavaScript and TypeScript) using vscode's Remote - Containers feature.

• deno-playground
  • Mission Statement
  • Play With Deno Outside of Workspace
  • Workspace Features
    • Live Javascript Scratchpad
    • Release Management Tooling
  • Using This Guide
  • Pre-Req Checklist
    • Docker
    • vscode
      • vscode extensions
  • General Troubleshooting
    • Reloading the Window / Rebuilding the Container
    • Resetting vscode AppData
    • A Note Concerning Self-Signed Certificates
  • Reopen in a Dev Container and Start Hacking
    • Hello, World!
  • Container Persistence Through Rebuilds
  • Related Links & Credits

Mission Statement

This guide aims to provide a starting playground to experiment with deno in a standardized environment (described by Dockerfile(s)). This guide is written for developers using vscode's remote container development.

If you're brand new to vscode, you can check out their series of intro vids to get started.

Play With Deno Outside of Workspace

• If you just want to build the workspace and play with deno from your host's command line:

## build
docker build --rm -t deno-work .devcontainer
## start container
docker run --rm --entrypoint ash -it deno-work
## run a simple ts program in deno (https://deno.land/#getting-started)
deno run https://deno.land/std/examples/welcome.ts

Workspace Features

Live Javascript Scratchpad

Quokka is a slick prototyping tool for javascript development. The Quokka configuration settings are persisted into a docker volume to persist changes through rebuilds.

These included extensions add integrated support for Quokka in vscode.

• Quokka.js
• Quokka Statusbar Buttons

You can give it a try by opening the Days 'Till Xmas sample app and hitting one of the Q buttons in the status bar.

Release Management Tooling

The workspace includes a release management tool for our components: Release It! 🚀. If not using this tool, make sure to update the version manually in the target project's package.json, package-lock.json (if the project has these files), and the git tag.

## Example minor release of this workspace project
release-it minor

Using This Guide

All commands referenced in this document will refer to '.' as the same folder in which this README can be found.

All commands are assumed to be ran under powershell for Windows hosts and bash for *nix hosts.

Pre-Req Checklist

Docker

• Docker Desktop running locally
• You must have local volume mounts working to get the most out of this guide. You can test you local drive mounting with the following code:

# This should print the contents of your host OS home folder. 
docker run --rm -v ~:/data alpine ls /data

vscode

• vscode or vscode insiders if you're a cool kid.
  • You will need v1.38+ to use the Remote - Containers feature.
  • As of 2019-09-18, I'd recommend using Insiders as these features are still in Preview and Insiders gets bug fixes sooner.

vscode extensions

Note, if you open the root folder of this project in vscode, you should get a prompt to install the recommended extensions.

• 

• 

• Required

  • Remote - Containers

• Recommended

  • For the full list of recommended extensions, checkout the extensions.json file included in this repository.

General Troubleshooting

Reloading the Window / Rebuilding the Container

As of the writing of this doc, vscode remote-containers is still really new. Some of the sharp edges are still there and may require some extra finesse. As a general rule of thumb, if something isn't loading in the remote environment, try to reload window or rebuilding the container.

• 
• 

Resetting vscode AppData

If your workspace becomes corrupted, opens to a blank screen, or has other issues that can't be mitigated through the gui, your local vscode settings can be inspected / reset at the following locations on your machine:

# Mainline
Windows: "~/AppData/Roaming/Code"
Linux: "$HOME/.config/Code/"
macOS: "$HOME/Library/Application Support/Code"

# Insiders
Windows: "~/AppData/Roaming/Code - Insiders"
Linux: "$HOME/.config/Code - Insiders/"
macOS: "$HOME/Library/Application Support/Code - Insiders"

A Note Concerning Self-Signed Certificates

If you are in a corporate env or for some other reason have self-signed certificates in your chain, the tools will fail with SSL errors. To mitigate this, the build will ping a site over ssl and trust the certs in the chain. If you wish to not do this, comment out the 'Trust self-signed certs' code in the Dockerfile prior to building.

If you pulled from docker hub instead of building, you may need to run the code related to self-signed certs after starting your image to trust your self-signed certs.

Reopen in a Dev Container and Start Hacking

Open this folder in vscode configured with the pre-recs above and you should be prompted to reopen in Container. From there the .devcontainer config will be used to create and start your dev environment.

• 

Hello, World!

To try our your new env, you can start by running the supplied "Hello, World!" app via npm start!

Container Persistence Through Rebuilds

• The sample devcontainer.json stores select folders as persistent volumes to speed up container rebuilds and avoid losing certain data and config. To clear out these settings, you can run docker volume rm for each volume that you'd like to reset. Note, you must also remove any containers that are using the volumes that you'd like to delete.

## Sample persistence reset for select volumes
docker volume rm deno-playground-node_modules
docker volume rm deno-playground-extensions
docker volume rm deno-playground-extensions-insiders
docker volume rm deno-playground-quokka
docker volume rm deno-playground-ash_history

See vscode remote's Avoiding extension reinstalls on container rebuild for more details.

Related Links & Credits

• node-playground - A containerized playground for experimenting with Node.js using vscode's Remote - Containers feature.
• jankins-workspace - A containerized workspace for Jenkinsfile Shared Pipeline development using vscode's Remote - Containers feature.