DevNical
DevNical
  • Видео 15
  • Просмотров 24 660
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. S...
Просмотров: 185

Видео

Integrating Svelte within React is a 10 min cakewalk | 2023 | sveltease | frontend | vite | ASMR
Просмотров 569 месяцев назад
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
Просмотров 47110 месяцев назад
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
Просмотров 891Год назад
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
Просмотров 715Год назад
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
Просмотров 79Год назад
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
Просмотров 2,5 тыс.Год назад
Welcome to my RUclips 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, allowi...
Dockerize Your React App with Vite in Under 15 Minutes (2023) | Multi-stage build | How to | ASMR
Просмотров 19 тыс.Год назад
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
Просмотров 214Год назад
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
Просмотров 440Год назад
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

Комментарии

  • @TabarakSohail
    @TabarakSohail 9 дней назад

    what if the data in the div is scollabable?

  • @zeeshanazmat719
    @zeeshanazmat719 Месяц назад

    Thank you!

  • @prithvigpc
    @prithvigpc Месяц назад

    Thanks! You helped me get paid. You're helping me feed my family

    • @DevNical
      @DevNical Месяц назад

      That's great!

  • @alanchristuring
    @alanchristuring 3 месяца назад

    If my component have a different images like another apis. How can I screenshot ?

  • @robinhodemorais4019
    @robinhodemorais4019 3 месяца назад

    VOCÊ É O CARA !!!

  • @NishantBisht-ss9ks
    @NishantBisht-ss9ks 3 месяца назад

    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

  • @user-hk3ht7cu9j
    @user-hk3ht7cu9j 4 месяца назад

    how can I make the fall speed?

  • @relaxapex202
    @relaxapex202 4 месяца назад

    thank you soo much!!

    • @DevNical
      @DevNical 4 месяца назад

      You're welcome!

  • @brodystotts5987
    @brodystotts5987 4 месяца назад

    I was unsure of the process, but I followed through and it works like a charm! Thanks!

    • @DevNical
      @DevNical 4 месяца назад

      Glad that it helped ! Do like, subscribe and share.

  • @JohnAlexander-bn7gn
    @JohnAlexander-bn7gn 5 месяцев назад

    bro need more subs

    • @DevNical
      @DevNical 4 месяца назад

      Thank you

  • @felixriddle
    @felixriddle 5 месяцев назад

    Repository please?

    • @DevNical
      @DevNical 4 месяца назад

      Unfortunately, I didn't push the code. From next time, I sure will.

  • @drac8854
    @drac8854 5 месяцев назад

    Why did you use 2 FROM ? Whats the benefit of it?? Then just using 1?

    • @DevNical
      @DevNical 4 месяца назад

      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.

    • @drac8854
      @drac8854 4 месяца назад

      @@DevNical got it thanks for explaining

    • @galactusclb5733
      @galactusclb5733 4 месяца назад

      ​ @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

    • @dwivedisshyam
      @dwivedisshyam Месяц назад

      @@DevNical Right, but in this particular case my multi-stage image is larger than single-stage image.

  • @gusaraujo683
    @gusaraujo683 5 месяцев назад

    Thanks

  • @user-eo8he3nj8w
    @user-eo8he3nj8w 5 месяцев назад

    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?

    • @DevNical
      @DevNical 4 месяца назад

      Yes, correct. You can use node server or nginx to serve the application. That way it is more stable. :)

  • @djkarter3187
    @djkarter3187 5 месяцев назад

    Thanks!

    • @DevNical
      @DevNical 4 месяца назад

      Thank you ! Glad that you found it helpful

  • @SakthivelSubbaiyan-xh6hm
    @SakthivelSubbaiyan-xh6hm 7 месяцев назад

    Thank you. It worked and fixed my issue

    • @DevNical
      @DevNical 4 месяца назад

      Great to hear!

  • @babusivaprakasam9846
    @babusivaprakasam9846 7 месяцев назад

    Perfect!. Great efforts!

    • @DevNical
      @DevNical 4 месяца назад

      Thank you! Cheers!

  • @zackhamm7282
    @zackhamm7282 7 месяцев назад

    This helped so much! I was having so much trouble before I found this. Thank you

    • @DevNical
      @DevNical 4 месяца назад

      I'm so glad! Please do like, subscribe and share.

  • @TheReddzone
    @TheReddzone 7 месяцев назад

    This project is so simple but yet so rewarding. As a beginner coder this was fun, thanks for the tutorial!

    • @DevNical
      @DevNical 4 месяца назад

      Glad you liked it! Please do like, subscribe and share

  • @asirichathurika
    @asirichathurika 7 месяцев назад

    when I run image this error occured , > dockerized-vite-react-app@0.0.0 preview > vite preview sh: vite: not found

    • @masteradvisor594
      @masteradvisor594 6 месяцев назад

      same issue

    • @biancadreyer3226
      @biancadreyer3226 6 месяцев назад

      same issue, did you manage to fix it?

    • @aubertlenno
      @aubertlenno 5 месяцев назад

      add "RUN npm install vite" just before the second EXPOSE 8080. It works for me but the image reached 700MB.

    • @masteradvisor594
      @masteradvisor594 5 месяцев назад

      @@aubertlenno yes but I used different command at last npm serve something like that

  • @mash_huss
    @mash_huss 7 месяцев назад

    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 } })

  • @isaactsibu-darko6854
    @isaactsibu-darko6854 7 месяцев назад

    can you please help, it crashes and the docker log say "vite not found"

    • @DevNical
      @DevNical 4 месяца назад

      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

    • @isaactsibu-darko6854
      @isaactsibu-darko6854 4 месяца назад

      @@DevNical thanks, I actually did that and it worked😄

  • @thanoz6003
    @thanoz6003 8 месяцев назад

    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 👍

    • @DevNical
      @DevNical 4 месяца назад

      Glad to hear that

  • @Willjsa
    @Willjsa 8 месяцев назад

    wait, no voice? are we back on gOld days?

    • @DevNical
      @DevNical 4 месяца назад

      YUP !! No more unnecessary intros. Direct into the topic. Plain and simple !

  • @bugman195
    @bugman195 8 месяцев назад

    Appreciate!! Great video right on point!!

    • @DevNical
      @DevNical 4 месяца назад

      Appreciate it! Thanks for watching !

  • @soheibkiani
    @soheibkiani 8 месяцев назад

    Thank you for your great video. I got a problem can explain to me why I got this error "sh: vite: not found"

    • @soheibkiani
      @soheibkiani 8 месяцев назад

      I followed what you wrote and it runs completely like you but I got this error

    • @aubertlenno
      @aubertlenno 5 месяцев назад

      add "RUN npm install vite" just before the second EXPOSE 8080. It works for me but the image reached 700MB.@@soheibkiani

  • @codingjhames
    @codingjhames 8 месяцев назад

    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

    • @DevNical
      @DevNical 8 месяцев назад

      Yes ! Even i couldn't rewatch it 😆😆

  • @AGM140580
    @AGM140580 9 месяцев назад

    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.

    • @DevNical
      @DevNical 9 месяцев назад

      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.

  • @sistana
    @sistana 9 месяцев назад

    Thanks a lot

    • @DevNical
      @DevNical 9 месяцев назад

      thanks for watching and your feedback !

  • @FerneyHoyos-n3e
    @FerneyHoyos-n3e 9 месяцев назад

    To download an updated version of docker solved all my issues.

    • @DevNical
      @DevNical 9 месяцев назад

      docker is now using buildkit backend. may be that solved your issue.

  • @gustavoolmedo8251
    @gustavoolmedo8251 10 месяцев назад

    code?

    • @DevNical
      @DevNical 9 месяцев назад

      unfortunately, i didn't create repo at the time. sorry for inconviences.

  • @ThomasPrivat
    @ThomasPrivat 10 месяцев назад

    is that rain in the background :)

    • @DevNical
      @DevNical 9 месяцев назад

      thanks for noticing !

  • @sefakpsz
    @sefakpsz 10 месяцев назад

    that fixed my all problem thx buddy

    • @DevNical
      @DevNical 9 месяцев назад

      thank you for watching!

    • @sefakpsz
      @sefakpsz 9 месяцев назад

      @@DevNicalyou’re welcome

  • @vepeducate
    @vepeducate 10 месяцев назад

    great video.

    • @DevNical
      @DevNical 9 месяцев назад

      thanks for watching !

  • @DerrickTsorme
    @DerrickTsorme 10 месяцев назад

    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

    • @DevNical
      @DevNical 9 месяцев назад

      am i too late to reply? is the background image in css?

  • @alperkilickaya
    @alperkilickaya 11 месяцев назад

    thanks a lot!!!

    • @DevNical
      @DevNical 9 месяцев назад

      thanks for watching.

  • @WeHere-ni3ku
    @WeHere-ni3ku 11 месяцев назад

    He said, Any of your fucking project 😂😂😂😂

  • @WeHere-ni3ku
    @WeHere-ni3ku 11 месяцев назад

    Thanks man, that was helpful 🫶

  • @hieuo9323
    @hieuo9323 11 месяцев назад

    thank a lot it help me!!

  • @keplervelasco1854
    @keplervelasco1854 Год назад

    great video!

    • @DevNical
      @DevNical 9 месяцев назад

      thanks for watching!

  • @anassnassim
    @anassnassim Год назад

    it throw this problem sh: vite: not found in docker

    • @anassnassim
      @anassnassim 11 месяцев назад

      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"]

    • @AL-rb7ku
      @AL-rb7ku 11 месяцев назад

      happens the same to me

    • @sellgar
      @sellgar 11 месяцев назад

      Same here , did u guys find solution about this ?

    • @LusoryLuna
      @LusoryLuna 11 месяцев назад

      I was getting the same issue but the "COPY vite.config.js ." line got it working for me. Possible fix?

    • @hardiknaik7444
      @hardiknaik7444 8 месяцев назад

      npm install vite -g inside second stage after copy build this will install vite globally so npm run preview will work

  • @indigosay
    @indigosay Год назад

    hot reload doesn't work when run dev

    • @DevNical
      @DevNical 9 месяцев назад

      umm weird issue. Is it in docker or normal npm run dev

    • @galactusclb5733
      @galactusclb5733 5 месяцев назад

      @@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 } })

  • @ocin3752
    @ocin3752 Год назад

    Thank you! Really helpful video.

  • @Code_express
    @Code_express Год назад

    make a video how to deal with chunks and unused js basically make a video how to improve perfomance of our react app

  • @tinecrnugelj5253
    @tinecrnugelj5253 Год назад

    Thank you very much!

  • @SrEsadofe
    @SrEsadofe Год назад

    Hi, can i have your repo please, I tried to do your but here it didn't work.

    • @DevNical
      @DevNical 9 месяцев назад

      Unfortunately, i didn't create repo at the time. Sorry !

  • @user-xw4jw2ro1r
    @user-xw4jw2ro1r Год назад

    Peaceful tutorial ! Great ❤❤