Dockerize Your React App with Vite in Under 15 Minutes (2023) | Multi-stage build | How to | ASMR
HTML-код
- Опубликовано: 22 авг 2024
- Welcome to my step-by-step tutorial on how to Dockerize your React app created with Vite in just under 15 minutes! In this up-to-date 2023 guide, I'll walk you through the process of containerizing your React application using Docker, ensuring portability and easy deployment.
🐳🚀 Dockerizing React apps has become a crucial skill for modern web developers, allowing you to package your app, dependencies, and configurations into a single container. Whether you're a beginner or an experienced developer looking to level up your skills, this tutorial is for you!
⏱️ Join us as I dive into the process of containerizing a React app built with Vite, a lightning-fast build tool for modern web applications. By the end of this tutorial, you'll have a Dockerized React app ready for seamless deployment to any environment.
Here's what we'll cover in this tutorial:
1️⃣ Introduction to Docker and its benefits for React app deployment.
2️⃣ Setting up a React app with Vite, an ultra-fast build tool that optimizes your development workflow.
3️⃣ Configuring Docker in your project and understanding Dockerfiles.
4️⃣ Creating a Docker image for your React app using the official Node.js Docker image.
5️⃣ Building and running your Docker container locally to ensure everything works smoothly.
6️⃣ Tips and best practices for optimizing your Dockerized React app.
Experience the meditative beauty of raindrops as we guide you through the process of packaging your React app, dependencies, and configurations into a Docker container. Whether you're seeking a moment of relaxation or a unique learning experience, this silent tutorial is perfect for you.
💻 Don't worry if you're new to Docker or React - I'll guide you through each step, explaining concepts along the way. By the end of this tutorial, you'll have the confidence to Dockerize your React apps efficiently and effortlessly.
🔗 Ready to Dockerize your React app? Join us in this practical tutorial and unlock the power of containerization for your web development workflow. Hit that play button and let's get started! 🎬🚀
How to dockerize react app in 2023
How to dockerize react app with vite in 2023
How to make docker image of react project
How to run docker container
How to write docker file
#DockerizeReact #ReactDevelopment #ViteBuildTool #WebDevelopment #DockerTutorial #ReactTutorial #containerization
#react
#dockerfile
#reactjs
#vite
#build
#programming
#docker
#containers
#typescript
#npm
#2023
#frontenddevelopment
#webdesign
#website
#dockertutorial
#multistage
#frontend
#development
#developer
#javascript
#newvideo
#coding
#asmr
#deployment
#devops
#buildtool
#devopstutorial
#reactdeveloper
#asmrsounds
#asmrtutorial
#devnical
#asmrvideo
#asmrcommunity
#asmrcontent
Why did you use 2 FROM ?
Whats the benefit of it?? Then just using 1?
It is a common practice. The purpose is to build the image in one stage, and copy only the build output to the second image instead of whole code. That way, your code is not exposed in the final container. Also, the image size will become smaller that way.
@@DevNical got it thanks for explaining
@DevNical 's explanations is correct. For better understanding, I found another video which is explaining the docker images optimization. Here: ruclips.net/video/1tHCVIO8Q04/видео.html
@@DevNical Right, but in this particular case my multi-stage image is larger than single-stage image.
Thanks!
You helped me get paid. You're helping me feed my family
That's great!
Thank you!
when I run image this error occured ,
> dockerized-vite-react-app@0.0.0 preview
> vite preview
sh: vite: not found
same issue
same issue, did you manage to fix it?
add "RUN npm install vite" just before the second EXPOSE 8080. It works for me but the image reached 700MB.
@@aubertlenno yes but I used different command at last npm serve something like that
can you please help, it crashes and the docker log say "vite not found"
I do not know if I am late or not .
But, you can try adding the following step before running vite preview:
RUN npm install -g vite
@@DevNical thanks, I actually did that and it worked😄
that fixed my all problem thx buddy
thank you for watching!
@@DevNicalyou’re welcome
Perfect!. Great efforts!
Thank you! Cheers!
Super! It's a pity that your voice is not heard in the video. I couldn't set it production in "preview" up without your help.
thanks for your feedback. I do not have proper studio setup and the noise will degrade the video. So, I had to disable the mic.
Thank you. It worked and fixed my issue
Great to hear!
Thank you very much!
thanks
bro need more subs
Thank you
great video.
thanks for watching !
Appreciate!! Great video right on point!!
Appreciate it! Thanks for watching !
To download an updated version of docker solved all my issues.
docker is now using buildkit backend. may be that solved your issue.
it throw this problem
sh: vite: not found
in docker
any body face the same problem this my docker file
FROM node:alpine
WORKDIR /app
COPY package.json .
RUN yarn
# copy all files
COPY . .
cmd ["yarn", "dev", "--debug"]
happens the same to me
Same here , did u guys find solution about this ?
I was getting the same issue but the "COPY vite.config.js ." line got it working for me. Possible fix?
npm install vite -g inside second stage after copy build this will install vite globally so npm run preview will work
thank a lot it help me!!
Thanks!
Thank you ! Glad that you found it helpful
great video!
thanks for watching!
thanks a lot!!!
thanks for watching.
is that rain in the background :)
thanks for noticing !
Hello, thank you very much, your video has helped me a lot, I would just like to know one thing, I understand that the vite documentation suggests not using the "preview" command for production deployments but as an option to preview how the app would work in production Taking this into account, how would you suggest launching the app within docker?
Yes, correct. You can use node server or nginx to serve the application. That way it is more stable. :)
make a video how to deal with chunks and unused js basically make a video how to improve perfomance of our react app
Great idea !
Hi, can i have your repo please, I tried to do your but here it didn't work.
Unfortunately, i didn't create repo at the time. Sorry !
hot reload doesn't work when run dev
umm weird issue. Is it in docker or normal npm run dev
@@DevNical Thanks for the video For above issue, we have to enable usePolling in the vite.config.ts.
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: {
watch: {
usePolling: true, //this one
},
host: true,
port: 5173,
strictPort: true,
},
preview : {
host : true,
port : 8080
},
build : {
minify : true,
sourcemap : false
}
})
Thank you for your great video. I got a problem can explain to me why I got this error "sh: vite: not found"
I followed what you wrote and it runs completely like you but I got this error
add "RUN npm install vite" just before the second EXPOSE 8080. It works for me but the image reached 700MB.@@soheibkiani
wait, no voice? are we back on gOld days?
YUP !! No more unnecessary intros. Direct into the topic. Plain and simple !
one of the most terrible and painfull "tutorial" i ever saw, even no repository!
what a waste of time, if you came from the future, man, don't waste time in this video
20/12/2023
Yes ! Even i couldn't rewatch it 😆😆