Docker is a set of the platform as service products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries, and configuration files; they can communicate with each other through well-defined channels.
In version control systems, a monorepo is a software development strategy where code for many projects is stored in the same repository.
While developing a Full-Stack app we come across many things which we have to configure and are necessary for building that application. Moreover, we might be working in a team or it may be an Open-Source Project which has many contributors. As we consider these things we can definitely see, the old excuse "It was working fine on my machine...". One can also implement the development setup on their portfolio projects to showcase that they can implement their knowledge about Docker and also familiarizing themselves with it.
Most of us know that we want a fast development and build process to tackle this. We set up a development environment for our project using Docker to develop seamlessly without any OS-level errors.
The practice here is one way you can implement Docker. There might be many ways that might suit your scenario, so try to research more and try implementing them with the trial and error method, and remember implementing them would definitely help in the long term.
For the demo, we are using my own Project which consists of React frontend and Nodejs Backend.
Link to repo → https://github.com/tejastn10/ShoeShoppee
💡 NOTE: If you're using Vs-Code it provides so much help in creating and managing Dockerfiles for your environment. I'll provide a link showcasing how you can utilize Vs-Code to its full abilities and add docker configuration for your platform. Vs-Code adds all that is required such as dockerignore files and even debug configuration if specified.
Link to video → Supercharge Your Docker Development with VS Code
The frontend Dockerfile is located in the frontend/web folder.
FROM node:alpine WORKDIR "/app" RUN yarn global add typescript RUN yarn global add less COPY ./package.json ./ COPY ./yarn.lock ./ RUN yarn install COPY . . RUN lessc --js ./src/styles/theme.less ./src/styles/theme.css CMD [ "yarn", "start" ]
The backend Dockerfile is located in backend folder.
FROM node:alpine WORKDIR "/app" RUN yarn global add typescript COPY ./package.json ./ COPY ./yarn.lock ./ RUN yarn install COPY . . CMD [ "yarn", "server" ]
The nginx Dockerfile is located in nginx folder.
FROM nginx COPY ./default.conf /etc/nginx/conf.d/default.conf
These files are named Dockerfile.dev for specifying that these are for development purposes only.
The root folder contains the compose file adding all the services specified in the respective Docker files. In my project, the development docker-compose file is docker-compose.debug.yml
version: "3.4" services: nginx: restart: always build: dockerfile: Dockerfile.dev context: ./nginx ports: - 3000:80 backend: build: dockerfile: Dockerfile.dev context: ./backend volumes: - /app/node_modules - ./backend:/app environment: - NODE_ENV=development - PORT=5000 - JWT_SECRET=clocked - MONGO_URI frontend: build: dockerfile: Dockerfile.dev context: ./frontend/web volumes: - /app/node_modules - /app/src/styles - ./frontend/web:/app environment: - NODE_ENV=development - REACT_APP_DEVELOPMENT_API_ENDPOINT=/devURL
Now all that remains is to build and run the compose file and voila your setup is complete.
docker-compose -f ./docker-compose.debug.yml up --build
This article assumes prior knowledge about Docker, not much but familiarity with the tech is sufficient. Do tell me how you would implement yours and also provide me where I can improve my configuration.