Absolutely, a well-crafted demo environment is your golden ticket in today’s front-end development landscape! Using Docker and GitLab CI, you can swiftly package and deploy your React and Vite-based projects. It’s a streamlined approach that not only enhances team collaboration but also wins over clients by showing them functional, interactive demos instead of static slides. With speed and automation, you’re not just keeping up in the fast-paced world of tech; you’re setting the pace!
If you are interested in how to make a Demo with Mock.js, check out this article!
How to Present Your Project Demo to Clients: Mock.js
Empowering Frontend Development with Mock.js for Seamless Project Demos
levelup.gitconnected.com
Packaging Settings
First, we need to set up the project’s packaging environment to ensure the project can run correctly in a Docker container. Below is an example Dockerfile and package.json setting:
Dockerfile:
FROM node:16.17.1-slim WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci COPY . . EXPOSE 8080 CMD ["npm", "run", "dev"]
package.json:
"scripts": {
"dev": "vite --host --port 8080",
"build": "tsc && vite build",
},
In the Dockerfile, we chose Node.js 16.17.1 as the base image and set the working directory and the container’s default startup command. In package.json, we define two common script commands for starting the server and building demo code.
CI/CD Settings
Next, we will set up the GitLab CI/CD process for automated building and deployment. Below is an example .gitlab-ci.yml configuration file