Introduction
Visual Studio Code (VS Code) Dev Containers is a powerful feature that allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set. This Quick Start Guide helps you start using Dev Containers effectively.
Prerequisites
Docker:
Dev Containers rely on Docker to create and manage containers. Make sure you install Docker on your machine. You can download Docker from Docker’s official website to follow this quick guide.
VS Code:
VS Code integrates Dev Containers. Make sure you have Visual Studio Code installed. You can download it from Visual Studio Code’s official website to get started with our Quick Start Guide.
Install and set up a new NestJS project
To get started, you can either use the Nest CLI to scaffold the project, as it quickly generates a new project with a standard directory structure and boilerplate code. This saves time and ensures that your project follows best practices right from the start.), or clone a starter project (both will produce the same outcome).
Install the NestJS CLI by running the following command in your terminal to continue with this quick guide:
After you install the CLI, you can create a new NestJS project by running the recommended commands in this Quick Start Guide:
The CLI will prompt you to choose a package manager (npm or yarn) and will install the necessary dependencies for you.
When finished, your terminal should display something like this:
Install the Dev Containers Extension
- Open VS Code.
- Click on the Extensions view icon on the Sidebar (or press Ctrl+Shift+X). Search for “Dev Containers” and click “Install”.
Alternatively, you can directly install it from the VS Code Marketplace to help follow this quick start.
Check installation:
With the Dev Containers extension installed, you will see a new Status bar item at the far left.
Open the NestJS folder in the container.
Start VS Code, run the Dev Containers: Open Folder in Container… command from the Command Palette (press Ctrl+Shift+X) or quick actions Status bar item, and select the project folder you just created to set up the container for following this quick start.
Now pick a starting point for your dev container. You can either select a base Dev Container Template from a filterable list. For a NestJS project, you’d typically want a container configuration that supports a Node.js environment.
After picking the starting point for your container, VS Code will add the dev container configuration files to your project (.devcontainer/devcontainer.json). This file is similar to the launch.json file for debugging configurations, but is used for launching (or attaching to) your development container instead in this Quick Start Guide.
The VS Code window will reload and start building the dev container. A progress notification provides status updates. You only have to build a dev container the first time you open it; opening the folder after the first successful build will be much quicker.
You can now interact with your project in VS Code just as you could when opening the project locally. From now on, when you open the project folder in this guide, VS Code will automatically pick up and reuse your dev container configuration.
Check the container
Once the container runs and you connect, your remote context should change in the bottom left of the Status bar. Your Quick Start Guide is almost complete.
Run the application
Open a terminal in VS Code Terminal > New Terminal (Ctrl+Shift+`) and running ‘npm install’ command to install dependencies inside the container:
You can now run the ‘npm start’ command to launch the application inside the container. This Quick Start Guide will help you get the application running.
Once the process starts, navigate to http://localhost:3000, and you should see the simple NestJS server running!
Ending your container connection
You can end your session in the container and go back to running VS Code locally with File > Close Remote Connection.
Devcontainer.json
The devcontainer.json configures how your dev container is built and started.
The image above is extracted from the NestJS project we used in this tutorial. You can review the full list of devcontainer.json options in this quick guide.
Conclusion
Working inside containers allows you to have multiple, isolated environments on your machine, each tailored to specific projects or technologies. Using this quick guide means you can avoid conflicts between dependencies or tools required for different projects.
By using VS Code with Dev Containers, you can manage and work within these various environments seamlessly from a single VS Code instance. This setup lets you switch between projects or environments without needing to worry about the underlying differences, making your development process more efficient and streamlined. This Quick Start Guide will help you achieve that.
Would you like to read more articles by Tekos’s Team? Everything’s here.
Author
