DEV Community

Cover image for How to use React or Vue with Vite and Docker

How to use React or Vue with Vite and Docker

Nekhil Malik on January 25, 2023

Introduction Hello fellow developers! With this guide, we will be creating a project that includes React or Vue as the front-end framew...
Read full post
Collapse
 
sergiomoura profile image
Sérgio Moura •

Great tutorial!

Seeing the "Makerfile" bonus, i noticed it was not oriented for windows users.
Anyway, I executed the steps and this just worked fine, except for the sweet hot reload effect. After some research, i found the solution. Just add,
watch: {usePolling: true} to the server config. Now, my vite.config.ts is like this:

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 8000,

    // add the next lines if you're using windows and hot reload doesn't work
    watch: {
      usePolling: true
    }
  },
})
Enter fullscreen mode Exit fullscreen mode

Thank you, Malik!

Collapse
 
nekhilmalik profile image
Nekhil Malik •

Thanks @sergiomoura for pointing out this one. I am adding it to article. Hope you won't mind :)

Collapse
 
wotta profile image
Wouter van Marrum •

Nice and simple demonstration. Thank you for taking the time to put this together and sharing this!

Collapse
 
nekhilmalik profile image
Nekhil Malik •

Thanks Wouter for the kind words. Surely, it will motivate me to add the GitHub link for these files as well ;)

Collapse
 
ken_mwaura1 profile image
Zoo Codes •

My Workflow preferred using Shell files to automate starting up containers and scripts. But now seeing the use of make is definitely an awesome alternative, time to dig into makefiles. Great write-up

Collapse
 
duongphuhiep profile image
DUONG Phu-Hiep • • Edited

This article show how to run a Vite Dev Server in a Docker container, expose it to the port 8000 to serve a local project.. I don't understand in which circumstance we need this Docker container? You already installed vite on your local in the first step so why not run it directly with 'vite --port 8000` to serve the local project?

Collapse
 
nekhilmalik profile image
Nekhil Malik •

Hello @duongphuhiep, sorry for the late reply. It's true, I can't say anything logically that can make mistake a correct statement.

I purpose, as long as we do not use the first step, and we have a package.json with packages, then we can proceed from step two and we won't need npm/vite on the host machine.

I will test it myself and update the blog. Thanks again for pointing this out.

Collapse
 
miggu profile image
miggu •

Good question. I can immediately think of two reasons of doing this.

  1. You will isolate the node to a specific version, and when working with teams , you will make sure everyone is running the same version on node. (unfortunately this could have been explained in the tutorial)
  2. If you're going to deploy it later via CI.
Collapse
 
anujsd profile image
Anuj Dube •

Great Article, was facing some issues while containerizing web app. This article saved lot of my time.

Collapse
 
nekhilmalik profile image
Nekhil Malik •

Glad to here that :) thanks.

Collapse
 
hunkoys profile image
Dominic •

I like your post!

What's the reasoning behind chosing to put --no-recreate in your build?

Collapse
 
nekhilmalik profile image
Nekhil Malik • • Edited

For me, it's a matter for choice. The main reason to select this option is that I don't want to recreate my container even if something is changed in the image.

As I am using node:alpine which could point to different image after some time with new version of node and my system could try to download the new one and could change the whole env. It won't affect this simple project but in a big project that could cause issue.

BTW Happy New Year :)