How to Set Up a Local Development Environment with Docker and VS Code

Software developer need to know this, the importance of a robust local development environment cannot be overstated. It not only accelerates the development process but also helps ensure that your application behaves consistently across different stages of production. In this blog post, we will explore how to set up a local development environment by leveraging Docker and Visual Studio Code (VS Code). By following these steps, you’ll be well on your way to creating an efficient workspace that enhances productivity and collaboration.

What is Docker?

Docker is a platform that enables developers to automate the deployment of applications within lightweight, portable containers. These containers package your application code with all its dependencies, ensuring that it runs consistently across different environments. The key benefit? You no longer need to worry about the “it works on my machine” problem!

Why Use Visual Studio Code?

Visual Studio Code (VS Code) is a free, powerful code editor that supports modern development needs with features like IntelliSense, debugging, built-in Git control, and a vast ecosystem of extensions. Its user-friendly interface and rich feature set make it the ideal partner for a local development setup.

Setting Up Your Local Development Environment

Step 1: Install Docker

Before diving into the setup, you need to have Docker installed on your machine. Here’s how:

1. Download Docker: Go to the Docker official website and download the appropriate version for your operating system (Windows, macOS, or Linux).
2. Install Docker: Follow the installation instructions specific to your platform. Ensure that Docker is running on your machine by opening a terminal and typing:

   docker --version

You should see the version of Docker installed.

Step 2: Install Visual Studio Code

Next, download and install Visual Studio Code:

1. Download VS Code: Visit the VS Code download page and select your operating system.
2. Install VS Code: Follow the setup instructions provided for your platform. Once installed, open VS Code to familiarize yourself with its interface.

Step 3: Install Docker Extension for VS Code

To integrate Docker with Visual Studio Code, you should install the Docker extension:

1. Open VS Code and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side or pressing Ctrl + Shift + X.
2. Search for “Docker” and click on the Install button for the official Docker extension by Microsoft.
3. Once installed, you will notice a new Docker icon in the Activity Bar that lets you manage your containers directly from VS Code.

Step 4: Create a Simple Project

Now that you have the tools ready, let’s set up a simple project:

1. Create a New Folder: Create a folder for your project (e.g., MyDockerApp) on your local machine.
2. Open the Folder in VS Code: Launch VS Code and open the newly created project folder via File > Open Folder.
3. Create a Dockerfile: Inside your project folder, create a new file named Dockerfile. Add the following simple application code for a Node.js app:

   # Use the official Node.js image from the Docker Hub
   FROM node:14

   # Set the working directory for the application
   WORKDIR /usr/src/app

   # Copy package.json and package-lock.json
   COPY package*.json ./

   # Install application dependencies
   RUN npm install

   # Copy application source code
   COPY . .

   # Expose the application port
   EXPOSE 3000

   # Command to run the application
   CMD ["node", "app.js"]

4. Create app.js: In the same folder, create a file named app.js with the following simple Express server code:

   const express = require('express');
   const app = express();
   const port = 3000;

   app.get('/', (req, res) => {
       res.send('Hello, Dockerized World!');
   });

   app.listen(port, () => {
       console.log(`Server running at http://localhost:${port}`);
   });

5. Add package.json: Create a package.json file to manage dependencies:

   {
       "name": "mydockerapp",
       "version": "1.0.0",
       "description": "A simple Dockerized Node app",
       "main": "app.js",
       "scripts": {
           "start": "node app.js"
       },
       "dependencies": {
           "express": "^4.17.1"
       }
   }

Step 5: Build and Run Your Docker Container

Now that everything is set up, let’s build and run your Docker container.

1. Open Terminal: In VS Code, open a new terminal using Ctrl + Shift + (backtick).
2. Build the Docker Image: Run the following command to build your Docker image:

   docker build -t mydockerapp .

3. Run the Docker Container: After the image is built successfully, run the container using:

   docker run -p 3000:3000 mydockerapp

4. Access the Application: Open a web browser and navigate to http://localhost:3000. You should see the message “Hello, Dockerized World!”

Step 6: Debugging Your Application

One of the great features of using VS Code with Docker is the ability to debug your applications easily:

1. Install Debugger for Chrome: In the Extensions view, search for “Debugger for Chrome” and install it.
2. Setting Up Debug Configuration: Go to the Debug view in VS Code and click on “create a launch.json file”. Select “Chrome” as the environment and modify the configuration as needed.
3. Add Debugging Capabilities: Make necessary modifications to your application for better debugging (like adding breakpoints).
4. Start Debugging: Use the Debug view to start your debugging session while your application is running in the Docker container.

Conclusion

And there you have it! You’ve successfully set up a local development environment using Docker and Visual Studio Code. This combination not only simplifies dependency management but also streamlines collaboration with your team, making it easier to share your development setup and work on projects together.

Feel free to expand upon this basic setup by integrating databases, other languages, or services as per your project requirements. Embrace the power of containers and see how they can transform your development workflow for the better! Happy coding.

If you have any questions or need assistance, don’t hesitate to leave a comment below . Happy developing!