Rafael Corrêa Gomes
Posted on December 14, 2020
If you work with VSCode and have your local environment directly in your machine I recommend starting to looking Docker, it's an easy way to have your app running in a virtualized environment with its own OS and packages to each app.
Advantages
- Work in an environment exactly as production.
- Don't install all the packages to all projects directly on your machine.
- Be more productive, avoiding issues and mistakes with node version or Shopify CLI version.
How to start
You just need to create these two files in your project's root folder.
.devcontainer/devcontainer.json
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
// Update 'VARIANT' to pick a Node version: 10, 12, 14
"args": {"VARIANT": "14", "SHOPIFYCLI": "1.5.0"}
},
// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
// Add the IDs of extensions you want installed when the container is created.
"extensions": ["dbaeumer.vscode-eslint"],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [80, 3456, 4040],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "npm install",
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node"
}
.devcontainer/Dockerfile
ARG VARIANT="14-buster"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
&& apt-get -y install --no-install-recommends ruby
ARG SHOPIFYCLI="1.5.0"
RUN wget https://github.com/Shopify/shopify-app-cli/releases/download/v${SHOPIFYCLI}/shopify-cli-${SHOPIFYCLI}.deb \
&& sudo apt install ./shopify-cli-${SHOPIFYCLI}.deb && rm ./shopify-cli-${SHOPIFYCLI}.deb
To finish it, install the Remote Containers extension.
Then you just need to open your VSCode and type CMD + Shift + P and execute the command below.
> Remote-Containers: Open Folder in Container
Posted on December 14, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.