Dockerize Your React App with Vite in Under 15 Minutes (2023) | Multi-stage build | How to | ASMR

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 69

  • @drac8854
    @drac8854 10 місяців тому +1

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

    • @DevNical
      @DevNical  9 місяців тому +5

      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 9 місяців тому +2

      @@DevNical got it thanks for explaining

    • @galactusclb5733
      @galactusclb5733 9 місяців тому

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

    • @dwivedisshyam
      @dwivedisshyam 5 місяців тому

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

  • @prithvigpc
    @prithvigpc 5 місяців тому +1

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

    • @DevNical
      @DevNical  5 місяців тому

      That's great!

  • @asirichathurika
    @asirichathurika Рік тому +6

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

    • @masteradvisor594
      @masteradvisor594 11 місяців тому +1

      same issue

    • @biancadreyer3226
      @biancadreyer3226 10 місяців тому

      same issue, did you manage to fix it?

    • @aubertlenno
      @aubertlenno 10 місяців тому +1

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

    • @masteradvisor594
      @masteradvisor594 10 місяців тому

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

  • @storytime-c1p
    @storytime-c1p Рік тому +5

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

    • @DevNical
      @DevNical  9 місяців тому

      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

    • @storytime-c1p
      @storytime-c1p 9 місяців тому

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

  • @babusivaprakasam9846
    @babusivaprakasam9846 11 місяців тому

    Perfect!. Great efforts!

    • @DevNical
      @DevNical  9 місяців тому

      Thank you! Cheers!

  • @EricsonVallesBarrera
    @EricsonVallesBarrera 4 місяці тому

    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?

  • @SakthivelSubbaiyan-xh6hm
    @SakthivelSubbaiyan-xh6hm 11 місяців тому

    Thank you. It worked and fixed my issue

    • @DevNical
      @DevNical  9 місяців тому

      Great to hear!

  • @sefakpsz
    @sefakpsz Рік тому +1

    that fixed my all problem thx buddy

    • @DevNical
      @DevNical  Рік тому

      thank you for watching!

    • @sefakpsz
      @sefakpsz Рік тому

      @@DevNicalyou’re welcome

  • @zeeshanazmat719
    @zeeshanazmat719 5 місяців тому

    Thank you!

  • @RafaelLeiva-o7f
    @RafaelLeiva-o7f 10 місяців тому

    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  9 місяців тому +1

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

  • @bugman195
    @bugman195 Рік тому

    Appreciate!! Great video right on point!!

    • @DevNical
      @DevNical  9 місяців тому

      Appreciate it! Thanks for watching !

  • @FerneyHoyos-n3e
    @FerneyHoyos-n3e Рік тому +1

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

    • @DevNical
      @DevNical  Рік тому

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

  • @vepeducate
    @vepeducate Рік тому +1

    great video.

  • @djkarter3187
    @djkarter3187 10 місяців тому

    Thanks!

    • @DevNical
      @DevNical  9 місяців тому

      Thank you ! Glad that you found it helpful

  • @tinecrnugelj5253
    @tinecrnugelj5253 Рік тому +2

    Thank you very much!

  • @anassnassim
    @anassnassim Рік тому +5

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

    • @anassnassim
      @anassnassim Рік тому

      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 Рік тому +1

      happens the same to me

    • @sellgar
      @sellgar Рік тому +1

      Same here , did u guys find solution about this ?

    • @LusoryLuna
      @LusoryLuna Рік тому +1

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

    • @hardiknaik7444
      @hardiknaik7444 Рік тому

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

  • @keplervelasco1854
    @keplervelasco1854 Рік тому +1

    great video!

  • @adakwar
    @adakwar Рік тому

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

    • @adakwar
      @adakwar Рік тому

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

    • @aubertlenno
      @aubertlenno 10 місяців тому

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

  • @hieuo9323
    @hieuo9323 Рік тому +1

    thank a lot it help me!!

  • @alperkilickaya
    @alperkilickaya Рік тому +1

    thanks a lot!!!

  • @AGM140580
    @AGM140580 Рік тому +1

    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  Рік тому

      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.

  • @JohnAlexander-bn7gn
    @JohnAlexander-bn7gn 9 місяців тому +1

    bro need more subs

  • @jfreitas-dev
    @jfreitas-dev Рік тому +2

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

    • @DevNical
      @DevNical  Рік тому

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

  • @indigosay
    @indigosay Рік тому +2

    hot reload doesn't work when run dev

    • @DevNical
      @DevNical  Рік тому

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

    • @galactusclb5733
      @galactusclb5733 10 місяців тому

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

  • @ThomasPrivat
    @ThomasPrivat Рік тому +2

    is that rain in the background :)

  • @Code_express
    @Code_express Рік тому +1

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

  • @Willjsa
    @Willjsa Рік тому

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

    • @DevNical
      @DevNical  9 місяців тому +1

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

  • @codingjhames
    @codingjhames Рік тому +1

    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  Рік тому +2

      Yes ! Even i couldn't rewatch it 😆😆