- 15
- 28 481
DevNical
India
Приєднався 2 чер 2023
DevNical shows you how real world coding, learning, exploring internet, digging out stuffs looks like. He is a software engineer who loves to tinker around new tech stacks, and internet.
Dockerize Next.js 14 with Node Server under 6 minutes (2024) | App Directory | How to | ASMR
Welcome to the latest tutorial! In this video, we're diving into the world of Docker and Next.js 14. Ready to learn how to dockerize a Next.js 14 application along with a Node server? Great, because we're going to do it all in under 6 minutes! Whether you're a seasoned developer looking to streamline deployment processes or just starting out and curious about containerization, this tutorial is perfect for you.
Join me on this journey as we explore the ins and outs of Docker and Next.js. I'll guide you through each step with clear instructions, making sure you understand everything along the way. And to make the learning experience even more enjoyable, I've added ASMR elements to the mix. Soothing sounds combined with practical knowledge-what could be better?
In this tutorial, we'll jump right into setting up Docker and configuring the Dockerfile to work seamlessly with Next.js and Node. Once everything is in place, we'll optimize our project for Docker and build our container. And don't worry, I'll make sure everything runs smoothly before we wrap up.
By the end of this tutorial, you'll have a solid understanding of how to dockerize a Next.js 14 application with a Node server, ready to deploy efficiently in any environment. So grab your favorite beverage, get comfortable, and let's embark on this Docker journey together!
next js with node js backend
next js 14 best practices
next js latest version tutorial
Link for custom server docs:
nextjs.org/docs/pages/building-your-application/configuring/custom-server
#docker
#nextjs14
#nextjs
#javascript
#typescript
#nextjs13
#nextjstutorial
#reactjs
#deployment
#nodejs
#nodeserver
#programming
#techie
#techtutorial
#howto
#asmr
#codewithme
#fullstack
#tutorial
#easytutorialsforbeginners
Join me on this journey as we explore the ins and outs of Docker and Next.js. I'll guide you through each step with clear instructions, making sure you understand everything along the way. And to make the learning experience even more enjoyable, I've added ASMR elements to the mix. Soothing sounds combined with practical knowledge-what could be better?
In this tutorial, we'll jump right into setting up Docker and configuring the Dockerfile to work seamlessly with Next.js and Node. Once everything is in place, we'll optimize our project for Docker and build our container. And don't worry, I'll make sure everything runs smoothly before we wrap up.
By the end of this tutorial, you'll have a solid understanding of how to dockerize a Next.js 14 application with a Node server, ready to deploy efficiently in any environment. So grab your favorite beverage, get comfortable, and let's embark on this Docker journey together!
next js with node js backend
next js 14 best practices
next js latest version tutorial
Link for custom server docs:
nextjs.org/docs/pages/building-your-application/configuring/custom-server
#docker
#nextjs14
#nextjs
#javascript
#typescript
#nextjs13
#nextjstutorial
#reactjs
#deployment
#nodejs
#nodeserver
#programming
#techie
#techtutorial
#howto
#asmr
#codewithme
#fullstack
#tutorial
#easytutorialsforbeginners
Переглядів: 191
Відео
Integrating Svelte within React is a 10 min cakewalk | 2023 | sveltease | frontend | vite | ASMR
Переглядів 58Рік тому
Welcome to my step-by-step tutorial on how to integrate Svelte components or whole svelte library within 10 minutes ! In this up-to-date 2023 guide, I'll walk you through the process of setting up project and integrating svelte in react using svelltease library. Do checkout the library: sveltease: github.com/anurag-dhamala/sveltease sveltease-cli: github.com/anurag-dhamala/sveltease-cli Svelte ...
Send Email using Node and Express in 15 minutes (2023) | Backend | Gmail | Express | ASMR
Переглядів 480Рік тому
In this short and sweet tutorial, you'll learn how to send emails through Gmail using Node.js, Express, and JavaScript. We'll be using the Nodemailer package to make this process a breeze. Plus, to keep your sensitive information secure, we'll implement the dotenv package for configuration. 🔹 What you'll learn: Setting up a Node.js project with Express Installing and configuring Nodemailer for ...
Creating a Docker Image of SvelteKit with Node.js Adapter | Step-by-Step Tutorial | 2023 | ASMR
Переглядів 994Рік тому
Welcome to my step-by-step tutorial on creating a Docker image of SvelteKit with the Node.js adapter! In this concise under 15-minute video, I'll guide you through the process of containerizing your SvelteKit application, allowing for seamless deployment and easy sharing. Whether you're new to Docker or looking to enhance your SvelteKit workflow, this tutorial has got you covered. Follow along ...
How to install MongoDB in Ubuntu | Debian | 2023 | Lofi beats | Linux
Переглядів 753Рік тому
Learn how to install and use basic commands in mongo db in Ubuntu and Debian under 3 minutes. Here are the commands that you can copy: Step 2: curl -fsSL pgp.mongodb.com/server-6.0.asc | \ sudo gpg -o /usr/share/keyrings/mongodb-server-6.0.gpg \ dearmor Step 3: echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-6.0.gpg ] repo.mongodb.org/apt/ubuntu jammy/mongodb-org/6.0 m...
Diving into JavaScript source code - Math.max() and Math.min() | JavaScript Interview | 2023
Переглядів 80Рік тому
Did you know that Math.max() = -INFINITY and Math.min() = INFINITY ? Math.max() and Math.min() in JS are amazing utilities when we dive deep. In this video, I will dive deep into their implementations and I will explain each and every steps clearly from the source code itself. Yeah, you read it right ! We will look into the source code of JS together. This can also be an important interview que...
How to Take SCREENSHOT of any HTML element | JavaScript | REACT | A Step-by-Step Guide | 2023
Переглядів 3,3 тис.Рік тому
Welcome to my UA-cam video on capturing and manipulating frontend elements using JavaScript! In this tutorial, we'll explore the power of JavaScript and demonstrate how you can take screenshots or pictures of elements in any frontend framework. 💡 Are you a web developer looking to enhance your frontend skills? This video is perfect for you! We'll cover essential concepts and techniques, allowin...
Dockerize Your React App with Vite in Under 15 Minutes (2023) | Multi-stage build | How to | ASMR
Переглядів 21 тис.Рік тому
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, depend...
How to Create Your Own Console with ReactJS | Crash Course | 1 hour | ASMR
Переглядів 231Рік тому
In this crash course video, we'll embark on an exciting journey to create our very own browser console using ReactJS. With the soothing backdrop of peaceful and ambient background music, we'll guide you through the entire process of simulating and interacting with a custom browser console. Starting with an overview of the importance and functionalities of a browser console, we'll quickly dive i...
How to center a div | Two Easy Ways to Center a Div | Quick and Simple CSS Techniques
Переглядів 21Рік тому
Welcome to my channel! In this tutorial, I'll show you two quick and straightforward ways to center a div using CSS. Whether you're a beginner or an experienced developer, these techniques will help you achieve perfect center alignment for your website elements. In just 3 minutes, you'll learn: 1️⃣ Method 1: Flexbox Centering Discover the power of flexbox and how it simplifies the process of ce...
Coding Matrix Effect with Canvas and JavaScript | 10-Minute Tutorial
Переглядів 486Рік тому
Get ready to unleash the power of the Matrix in just 10 minutes with the exciting tutorial on coding the Matrix effect using Canvas and JavaScript! In this fast-paced video, I'll guide you through the process of creating the iconic digital rain effect seen in the Matrix movies. 🔥 Learn how to create mesmerizing Matrix rain animations using Canvas and JavaScript! 🔥 Dive into the fascinating worl...
How to create react app with vite
Переглядів 29Рік тому
#shorts How to create react app using vite. It's very easy #react #vite #webdevelopment
styling is fucked when i do this, copy pasted the exact same code
doesnt it work with divs that use mask-image css property?
Hi @DevNical i had a problem when i trying execute docker run : /usr/local/bin/docker-entrypoint.sh: exec: line 11: .: Permission denied , are you considered if i made a bit error, or what i need for will not have this error?
what if the data in the div is scollabable?
Thank you!
Thanks! You helped me get paid. You're helping me feed my family
That's great!
If my component have a different images like another apis. How can I screenshot ?
VOCÊ É O CARA !!!
Bruh solve this problem plz docker run -p 8080:8080 vite-react-app:latest > mytasks@0.0.0 preview > vite preview failed to load config from /app/react-app/vite.config.js error when starting preview server: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /app/react-app/vite.config.js.timestamp-1716189171681-455ba8957a342.mjs at new NodeError (node:internal/errors:405:5) at packageResolve (node:internal/modules/esm/resolve:916:9) at moduleResolve (node:internal/modules/esm/resolve:973:20) at defaultResolve (node:internal/modules/esm/resolve:1193:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12) at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25) at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39) at link (node:internal/modules/esm/module_job:75:36) PS D: eact-projects\myTasks\client> Thx
how can I make the fall speed?
thank you soo much!!
You're welcome!
I was unsure of the process, but I followed through and it works like a charm! Thanks!
Glad that it helped ! Do like, subscribe and share.
bro need more subs
Thank you
Repository please?
Unfortunately, I didn't push the code. From next time, I sure will.
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: ua-cam.com/video/1tHCVIO8Q04/v-deo.html
@@DevNical Right, but in this particular case my multi-stage image is larger than single-stage image.
Thanks
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. :)
Thanks!
Thank you ! Glad that you found it helpful
Thank you. It worked and fixed my issue
Great to hear!
Perfect!. Great efforts!
Thank you! Cheers!
This helped so much! I was having so much trouble before I found this. Thank you
I'm so glad! Please do like, subscribe and share.
This project is so simple but yet so rewarding. As a beginner coder this was fun, thanks for the tutorial!
Glad you liked it! Please do like, subscribe and share
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
Error: | sh: vite: not found in vite.config.js / ts, export default defineConfig({ plugins: [react()], // we need to define which port we will run on server: { watch: { usePolling: true, }, host: true, // Here strictPort: true, port: 5173, // Your expose port } })
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😄
Thank You Soooo Much. I have read many articles and watched many videos but nothing worked but your method worked. Keep Up the good work 👍
Glad to hear that
wait, no voice? are we back on gOld days?
YUP !! No more unnecessary intros. Direct into the topic. Plain and simple !
Appreciate!! Great video right on point!!
Appreciate it! Thanks for watching !
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.@@adakwar
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 😆😆
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.
Thanks a lot
thanks for watching and your feedback !
To download an updated version of docker solved all my issues.
docker is now using buildkit backend. may be that solved your issue.
code?
unfortunately, i didn't create repo at the time. sorry for inconviences.
is that rain in the background :)
thanks for noticing !
that fixed my all problem thx buddy
thank you for watching!
@@DevNicalyou’re welcome
great video.
thanks for watching !
Thanks man. I have a question. What if I have a background image in the div and I want to include it in the download? Currently the download does not include a background image
am i too late to reply? is the background image in css?
thanks a lot!!!
thanks for watching.
He said, Any of your fucking project 😂😂😂😂
Thanks man, that was helpful 🫶
thank a lot it help me!!
great video!
thanks for watching!
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
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! Really helpful video.
Thank you!
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 !
Thank you very much!
thanks
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 !
Peaceful tutorial ! Great ❤❤