A Beginner’s Guide to Dockerizing a Vite dApp Project

Docker is an open platform for developing, shipping, and running applications. Docker allows you to package and run your application as a single entity in a loosely isolated environment called a 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.


This content originally appeared on HackerNoon and was authored by Ileolami

\ 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:

Screenshot of a Docker image management interface named "web3-dapp:latest".

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
  1. 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
  1. You will see three additional files in your directory, namely .dockerignorecompose.yaml and DockerFile

  • Dockerfil: 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.
  1. 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"]
  1. Build your container image using this:
   docker build -t <your-image-name> .
  1. 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
  1. to see your container image in your terminal

    Screenshot of a terminal window displaying the output of the "docker images" command

  2. 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

  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> 
  1. Enter your Password 

Your password wont be visible while typing 

![](https://cdn.hackernoon.com/images/h9zh5laZcuVhjnaK4lBLPxYH14f2-2024-09-24T12:00:17.023Z-mritnbqnnrl6cp6v42ws6zcq)
  1. 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,

  1. relogin using docker login, press enter. 

  2. After that, you will be navigated to your browser,

  3. copy your OTP the terminal and input it,

  4. press CONFIRM

  5. repush the image 

You will see an output like:

![](https://cdn.hackernoon.com/images/h9zh5laZcuVhjnaK4lBLPxYH14f2-2024-09-24T12:00:16.843Z-zbj6q12gnqdf99ogf6sljcnt)

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 was already in use.

  • Solution: Identified the process using the port 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&nbsp;run&nbsp;-p&nbsp;8001:8000&nbsp;<your-image-name> 
    
  • 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&nbsp;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.


This content originally appeared on HackerNoon and was authored by Ileolami


Print Share Comment Cite Upload Translate Updates
APA

Ileolami | Sciencx (2024-09-24T12:00:18+00:00) A Beginner’s Guide to Dockerizing a Vite dApp Project. Retrieved from https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/

MLA
" » A Beginner’s Guide to Dockerizing a Vite dApp Project." Ileolami | Sciencx - Tuesday September 24, 2024, https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/
HARVARD
Ileolami | Sciencx Tuesday September 24, 2024 » A Beginner’s Guide to Dockerizing a Vite dApp Project., viewed ,<https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/>
VANCOUVER
Ileolami | Sciencx - » A Beginner’s Guide to Dockerizing a Vite dApp Project. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/
CHICAGO
" » A Beginner’s Guide to Dockerizing a Vite dApp Project." Ileolami | Sciencx - Accessed . https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/
IEEE
" » A Beginner’s Guide to Dockerizing a Vite dApp Project." Ileolami | Sciencx [Online]. Available: https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/. [Accessed: ]
rf:citation
» A Beginner’s Guide to Dockerizing a Vite dApp Project | Ileolami | Sciencx | https://www.scien.cx/2024/09/24/a-beginners-guide-to-dockerizing-a-vite-dapp-project/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.