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’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’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’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à! 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>