A Beginner's Guide to Dockerizing a Vite dApp Project

You may be wondering what DOCKERIZE is. It means using Docker to containerize your dApp project.

Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly.

• Applications include web apps, APIs, mobile apps, and backend services. It includes the code you write, the libraries you use, and the configurations needed for it to run.

• Infrastructure like operating system(OS), Network setting, web servers, database, and other services your application interacts with. It also involves the hardware or virtual machines where your application runs.

Docker allows you to package and run your application as a single entity in a loosely isolated environment called a CONTAINER.

Container

Containers are lightweight and contain everything needed to run the application, so you don't need to rely on what's installed on the host. You can share containers while you work, and be sure that everyone you share with gets the same container that works in the same way.

For example, you and your colleagues are working on a dApp project that uses Node.js and Hardhat. Initially, you set up the project on your local machine, knowing that before your colleagues can run the application locally, they would need to install Node.js and Hardhat on their systems.

Now, let’s imagine one of your colleagues is using a machine that isn't compatible with Node.js and Hardhat. How would you solve this problem?

With Docker, you can package your application, along with all its dependencies, into a single container that can run on any operating system. This solves the issue of installing software or dependencies separately on different machines.

Images

After you’ve containerized your application, how do you get it to run?

As a frontend developer, when starting a new React app, you usually run npx create-react-app or npm init vite@latest. For an existing project, you'd typically run git pull followed by npm install to get it running locally. Similarly, to run a container, you need something called a container image.

A container image is a standardized package that includes all the files, binaries, libraries, and configurations needed to run your application inside a container. It’s like having everything bundled together so it can run consistently across any environment.

See below for a container image:

Practicals

In this section, you will learn how to containerize and share your app.

Prerequisites

1. You have installed the latest version of Docker Desktop.
2. You have installed a Git client.
3. You have an IDE or a text editor to edit files. Docker recommends using Visual Studio Code.

Containerize Your Application

1. In your root directory, initialize docker using this command prompt:

docker init  

2. Provide answers to the prompts.

? What application platform does your project use? Node  
? What version of Node do you want to use? 20.16.0  
? Which package manager do you want to use? npm  
? Do you want to run "npm run build" before starting your server? No  
? What command do you want to use to start the app? ["npm", "run", "dev"]  
? What port does your server listen on? 5173  

3. You will see three additional files in your directory, namely .dockerignore, compose.yaml and DockerFile.

• Dockerfile: A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.
• compose.yaml: The Compose file, or compose.yaml file follows the rules provided by the Compose Specification in how to define multi-container applications.
• .dockerignore: This file excludes files and directories from the build context.

4. Inside Dockerfile, clear out the file and add the following:

# syntax=docker/dockerfile:1  
ARG NODE_VERSION=20.16.0  
FROM node:${NODE_VERSION}-alpine  
# Use development node environment by default.  
ENV NODE_ENV development  
WORKDIR /app  
# Copy package.json and package-lock.json to the working directory  
COPY package.json package-lock.json ./  
# Install dependencies  
RUN npm install  
# Copy the rest of the source files into the image  
COPY . .  
# Change ownership of the /app directory to the node user  
RUN chown -R node:node /app  
# Switch to the node user  
USER node  
# Ensure node_modules/.bin is in the PATH  
ENV PATH /app/node_modules/.bin:$PATH  
# Expose the port that the application listens on  
EXPOSE 5173  
# Run the application  
CMD ["npm", "run", "dev"]  

5. Build your container image using this:

docker build -t <your-image-name> .  

To see your container image, go to your docker desktop, click on Images, as shown below or you can use this command prompt,

docker images  

to see your container image in your terminal. 6. Run the image:

docker run -p 5173:5173 <your-image-name>  

You should see an output like this:

> [email protected] dev
> vite

  VITE v5.4.2  ready in 222 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.17.0.2:5173/

Sharing the Application

1. Sign up or Sign in to Docker Hub.
2. Select the Create Repository button.
3. Name your repository with the same container image name. Make sure the Visibility is Public.
4. Select Create.

5. Sign in to Docker Hub using the command line

docker login -u <YOUR USERNAME>  

6. Enter your Password

7. Use the docker tag command to give the getting-started image a new name. Replace YOUR-USER-NAME with your Docker ID:

This shows your image has been built and pushed into a registry. Your team can now pull this image and run the application on their local machine.

You can check by searching for your container image on the search bar on your docker desktop or docker hub.

Troubleshooting

• Port Conflict:
  • Error: if the port 8000 was already in use.
  • Solution: Identified the process using port 8000 and terminated it using the following commands:

# Find the process using port 8000  
lsof -i :8000  
# Kill the process (replace <PID> with the actual process ID found from the previous command)  
kill -9 <PID>  

• Alternatively, you could run the Docker container on a different port:

docker run -p 8001:8000 my-vite-app  

• Update an Application Anything you update your app. e.g., you change a syntax or function,

  1. Stop your docker desktop, click on Containers
  2. Stop the port, and click on delete.
  3. Rebuild the Application using the docker build command.

docker build -t <your-image-name> .  

4. Rerun the app.

docker run -p 5173:5173 <your-image-name>  

Conclusion

By following this guide, you can easily package your application and its dependencies into a container, share it with your team, and run it easily on any machine. This not only enhances collaboration but also mitigates issues related to environment setup and compatibility.