DEV Community

Ezequiel E. Tejada
Ezequiel E. Tejada

Posted on • Originally published at myowntake.hashnode.dev on

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"?

imagen.png

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"]
}

Enter fullscreen mode Exit fullscreen mode

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.

image.png

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"

Enter fullscreen mode Exit fullscreen mode

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}"
    },

Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)