Trimming the Docker Image: How I Made My Docker Images Slimmer with Vite, React, and Multi-Stage…

<p>Ever felt your Docker images are wearing a few extra layers? I&rsquo;ve been there. Dockerizing sample Vite + React app used to result in a chunky image. But then, I was introduced to multi-stage builds and everything changed. Let&rsquo;s dive in, starting from the very beginning!</p> <p><strong>Step 1: Setting Up a React App with Vite</strong></p> <p>Before we even touch Docker, let&rsquo;s get our React app up and running with Vite:</p> <ul> <li><strong>Create a New Project</strong>: Kickstart your React project with:</li> </ul> <pre> npm create vite@latest my-react-app -- --template vue --template react</pre> <p><img alt="" src="https://miro.medium.com/v2/resize:fit:630/1*qi6nbcuRs4WdOsK4z4hZ0w.png" style="height:201px; width:700px" /></p> <p>Select React</p> <p><img alt="" src="https://miro.medium.com/v2/resize:fit:630/1*SLFikWkC7VaOIuasQZrG_Q.png" style="height:164px; width:700px" /></p> <p>Select Javascript</p> <ul> <li><strong>Navigate and Start</strong>:</li> </ul> <pre> cd my-react-app npm install npm run dev</pre> <p><img alt="" src="https://miro.medium.com/v2/resize:fit:630/1*RHc_Nb_rJbxFKvizJo7q3g.png" style="height:370px; width:700px" /></p> <p>React App running on localhost</p> <p>Voil&agrave;! You should have a React app running smoothly with Vite.</p> <p><a href="https://medium.com/hungry-devops/trimming-the-docker-image-how-i-made-my-docker-images-slimmer-with-vite-react-and-multi-stage-53ede71d625">Click Here</a></p>
Tags: Docker React Vite