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",
"args": {"VARIANT": "14", "SHOPIFYCLI": "1.8.0"}
},
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
"extensions": ["dbaeumer.vscode-eslint"],
"forwardPorts": [80, 3456, 4040],
"postCreateCommand": "npm install",
"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.8.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, you just need to open your VSCode and type CMD + Shift + P, and execute the command below.
> Remote-Containers: Open Folder in Container
How Remote Containers feature works?
The Visual Studio Code Remote – Containers extension lets you use a Docker container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set. A devcontainer.json file in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This container can be used to run an application or to sandbox tools, libraries, or runtimes needed for working with a codebase.
Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system. This means that you can seamlessly switch your entire development environment just by connecting to a different container.
This lets VS Code provide a local-quality development experience — including full IntelliSense (completions), code navigation, and debugging — regardless of where your tools (or code) are located. In case you want more details about this feature, you can check the official doc.
