How to Automatically Build and Deploy Your Front-end Demo Environment with Docker and GitLab CI: React & Vite & Mock.js
<p>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!</p>
<p>If you are interested in how to make a Demo with Mock.js, check out this article!</p>
<h2>How to Present Your Project Demo to Clients: Mock.js</h2>
<h3>Empowering Frontend Development with Mock.js for Seamless Project Demos</h3>
<p>levelup.gitconnected.com</p>
<h2>Packaging Settings</h2>
<p>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:</p>
<p>Dockerfile:</p>
<pre>
FROM node:16.17.1-slim
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev"]</pre>
<p>package.json:</p>
<pre>
"scripts": {
"dev": "vite --host --port 8080",
"build": "tsc && vite build",
},</pre>
<p>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.</p>
<h2>CI/CD Settings</h2>
<p>Next, we will set up the GitLab CI/CD process for automated building and deployment. Below is an example <code>.gitlab-ci.yml</code> configuration file</p>
<p><a href="https://levelup.gitconnected.com/how-to-automatically-build-and-deploy-your-front-end-demo-environment-with-docker-and-gitlab-ci-7eb0dff27bc5">Website</a></p>