Dipping my toe into VSCode's Remote Container feature.

Hi! Long time no see. I hope to keep some regularity publishing articles along the way, but don't hold your breath.

This time, I'd like to tackle a problem I'm having when I'm working on multiple projects that is keeping a consistent development environment.

It's been a while I've heard that docker could be an appropriate solution for this problem, but I didn't want to learn it at the time because I was involved in other things.

But the time has come and with the release of VSCode's Remote Container feature, now is the moment to deal with this and learn some docker, let's do this!

Docker installation

First of all, we must install Docker Desktop. Note: I'm doing this on my Windows Computer, if you'd like a Linux flavored step by step, let me know in the comments.

Go to Docker Desktop download page and click on Download. Tip: Did you know you can install it using Chocolatey with the command "choco install docker-desktop"?

devcontainer.json

This file tells VSCode how to handle the container. This is great if you want your team to use certain extensions.

You can create the file in your project's root folder or on ".devcontainer/devcontainer.json"

devcontainer.json example content:

{
  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:0-12",
  "forwardPorts": [3000],
  "extensions": ["dbaeumer.vscode-eslint"]
}

Also, you can select a devcontainer template file for your environment by selecting the Remote-Containers: Add Development Container Configuration Files... command from the Command Palette (F1) It will generate a folder called .devcontainer and inside we will find two files. .devcontainer.json Dockerfile

These files are necessary to configure the image just like we wanted and setting everything up on image startup.

For more information, there is a devcontainer reference page

Kicking the tires

Seems there we have the basic stuff to run our code in a container, so let's give it a go.

Click on the green button which is located at the bottom left corner of the VSCode screen and then select the "Reopen in container" option. This will use the .devcontainer.json file to use a docker image, load your files inside it, and getting it ready to serve.

It kinda worked, however, it seems that some things were missing. Since it's a new image, all the global commands weren't there. Also, all the sessions and environment variables were gone too.

To fix that, we should work on the Dockerfile adding this

RUN su node -c "npm install -g @angular/cli"

This will run every time we rebuild the image, to make the "ng" command available as soon as possible.

With firebase cli, we can make use of the firebase login:ci command to have a token and avoid logging in into Firebase every time the image rebuilds. The token can be saved into devcontainer.json with the "containerEnv" property:

    "containerEnv": {
        "MY_CONTAINER_VAR": "some-value-here",
        "MY_CONTAINER_VAR2": "${localEnv:SOME_LOCAL_VAR}"
    },

Or creating a devcontainer.env file in the .devcontainer folder. Beware to gitignore this file to avoid committing env variables that shouldn't be public.

Once we have Angular and Firebase setup, we can continue to work on our project. Is it done? Can we improve it? "Sure to both questions" but that's for another post. I hope you've liked it.

As always, I'd like to know what do you think about this. Have you tried it? Have you encountered any problems? Please let me know in the comments.

See you next time!