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 You have installed the latest version of Docker Desktop.
You have installed a Git client.
You have an IDE or a text editor to edit files. Docker recommends using Visual Studio Code. Containerize Your Application In your root directory, initialize docker using this command prompt: docker init 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 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. 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"] 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: > vite-project@0.0.0 dev
> vite

  VITE v5.4.2  ready in 222 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.17.0.2:5173/ Sharing the Application Sign up or Sign in to Docker Hub.
Select the Create Repository button.  
Name your repository with the same container image name. Make sure the Visibility is Public.
Select Create. Sign in to Docker Hub using the command line docker login -u <YOUR USERNAME> Enter your Password Your Password won’t be visible while typing Use the docker tag command to give the getting-started image a new name. Replace YOUR-USER-NAME with your Docker ID: You may encounter this denied: requested access to the resource is denied while pushing.
To fix this,

relogin using docker login, press enter.
After that, you will be navigated to your browser,
copy your OTP the terminal and input it,
press CONFIRM
repush the image

You will see an output like: 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,

Stop your docker desktop, click on Containers
Stop the port, and click on delete.  
Rebuild the Application using the docker build command. docker build -t <your-image-name> . 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. You may be wondering what DOCKERIZE is. It means using Docker to containerize your dApp project. DOCKERIZE DOCKERIZE Docker 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 infrastructure 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. 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. Applications 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. 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. Infrastructure Docker allows you to package and run your application as a single entity in a loosely isolated environment called a CONTAINER. 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 . npx create-react-app npm init vite@latest git pull npm install 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 You have installed the latest version of Docker Desktop. You have installed a Git client. You have an IDE or a text editor to edit files. Docker recommends using Visual Studio Code. You have installed the latest version of Docker Desktop . Docker Desktop You have installed a Git client . Git client You have an IDE or a text editor to edit files. Docker recommends using Visual Studio C ode. Visual Studio C ode. Containerize Your Application In your root directory, initialize docker using this command prompt: In your root directory, initialize docker using this command prompt: docker init docker init Provide answers to the prompts. 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 ? 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 You will see three additional files in your directory, namely .dockerignore, compose.yaml and DockerFile. You will see three additional files in your directory, namely .dockerignore , compose.yaml and DockerFile. .dockerignore compose.yaml 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. Dockerfile : A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Dockerfile compose.yaml : The Compose file, or compose.yaml file follows the rules provided by the Compose Specification in how to define mul ti-container applications. compose.yaml compose.yaml Compose Specification in how to define mul .dockerignore : This file excludes files and directories from the build context. .dockerignore Inside Dockerfile, clear out the file and add the following: Inside Dockerfile , clear out the file and add the following: Dockerfile # 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"] # 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"] Build your container image using this: Build your container image using this: docker build -t <your-image-name> . 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, Images docker images docker images to see your container image in your terminal. 6. Run the image: docker run -p 5173:5173 <your-image-name> docker run -p 5173:5173 <your-image-name> You should see an output like this: > vite-project@0.0.0 dev
> vite

  VITE v5.4.2  ready in 222 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.17.0.2:5173/ > vite-project@0.0.0 dev
> vite

  VITE v5.4.2  ready in 222 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.17.0.2:5173/ Sharing the Application Sign up or Sign in to Docker Hub. Select the Create Repository button. Name your repository with the same container image name. Make sure the Visibility is Public. Select Create. Sign up or Sign in to Docker Hub. Sign up Docker Hub. Select the Create Repository button. Create Repository Name your repository with the same container image name. Make sure the Visibility is Public . Visibility Public Select Create . Create Sign in to Docker Hub using the command line Sign in to Docker Hub using the command line docker login -u <YOUR USERNAME> docker login -u <YOUR USERNAME> Enter your Password Enter your Password Your Password won’t be visible while typing Your Password won’t be visible while typing Use the docker tag command to give the getting-started image a new name. Replace YOUR-USER-NAME with your Docker ID: Use the docker tag command to give the getting-started image a new name. Replace YOUR-USER-NAME with your Docker ID: docker tag getting-started YOUR-USER-NAME You may encounter this denied: requested access to the resource is denied while pushing. To fix this, relogin using docker login, press enter.
After that, you will be navigated to your browser,
copy your OTP the terminal and input it,
press CONFIRM
repush the image You will see an output like: You may encounter this denied: requested access to the resource is denied while pushing. denied: requested access to the resource is denied To fix this, relogin using docker login, press enter. After that, you will be navigated to your browser, copy your OTP the terminal and input it, press CONFIRM repush the image relogin using docker login , press enter. docker login After that, you will be navigated to your browser, copy your OTP the terminal and input it, OTP press CONFIRM CONFIRM repush the image You will see an output like: 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 . 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: 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: 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: Error : if the port 8000 was already in use. Error 8000 Solution : Identified the process using port 8000 and terminated it using the following commands: Solution 8000 # 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> # 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: Alternatively, you could run the Docker container on a different port: docker run -p 8001:8000 my-vite-app docker run -p 8001:8000 my-vite-app Update an Application Anything you update your app. e.g., you change a syntax or function,

Stop your docker desktop, click on Containers
Stop the port, and click on delete.  
Rebuild the Application using the docker build command. Update an Application Anything you update your app. e.g., you change a syntax or function, Stop your docker desktop, click on Containers
Stop the port, and click on delete.  
Rebuild the Application using the docker build command. Update an Application Anything you update your app. e.g., you change a syntax or function, Update an Application Stop your docker desktop, click on Containers Stop the port, and click on delete. Rebuild the Application using the docker build command. Stop your docker desktop, click on Containers Containers Stop the port, and click on delete. Rebuild the Application using the docker build command. docker build docker build -t <your-image-name> . docker build -t <your-image-name> . Rerun the app. Rerun the app. docker run -p 5173:5173 <your-image-name> 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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How ICP's Chain Fusion Technology Enhances Decentralized AI Models

How to Integrate Smart Contracts to the Frontend

Read My Stories

Portfolio

Buy Me a Coffee

Newsletter

Technical Writer

Technical Writing Lead

Social Media Manager

Too Long; Didn't Read

A Beginner's Guide to Dockerizing a Vite dApp Project

A Beginner's Guide to Dockerizing a Vite dApp Project

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Build a Real-Time Crypto Tracker with CoinGecko API and React.js

The Noonification: How to Implement a Merkle Tree in Solidity (11/12/2023)

30% of Newly Minted NCT is Owned by Addresses that Don't Own a Hashmask

7 Dapp Platforms to Follow in 2021

DApps 101: Decoding Legality, Privacy, and Token Security

A Complete Guide to No-code & Web3

Build a Real-Time Crypto Tracker with CoinGecko API and React.js

The Noonification: How to Implement a Merkle Tree in Solidity (11/12/2023)

30% of Newly Minted NCT is Owned by Addresses that Don't Own a Hashmask

7 Dapp Platforms to Follow in 2021

DApps 101: Decoding Legality, Privacy, and Token Security

A Complete Guide to No-code & Web3

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps