Dockerize a react Vite application,

Hello All! I’m new to docker and am trying to dockerize a React Vite app. My docker file looks as follows,

FROM node:18-alpine

WORKDIR /PORTFOLIO

COPY package.json .

RUN npm install

COPY . .

ENV PORT=8080

EXPOSE 8080

CMD [ "npm", "run", "dev"]

after building I then run docker run -p 8080:8080 “ImageName:latest”, however my localhost shows nothing. I tried changing expose to 5173 as that’s the localhost vite defaults to with no luck. Also tried, adding and env port = 8080 to dockerfile that didn’t work. No clue where to debug from here."

I am not sure npm run dev is the right way to go towards production :wink:

In general this has little to do with Docker, but more with your build setup: will npm run dev automatically use the port specified in PORT env var?

Thank you for the feedback. I have tried running npm start but am running into the same error. I was wondering what command you would suggest I use? I also tried following the docker docs and using Containerize a Node.js application | Docker Docs but am running into errors when it ask for “docker init, “What directory is your build output to? (comma-separate if multiple)”” I put my project directory in there and got errors when running docker compose up --build

Please, answer the question that @bluepuma77 asked.

I have never met any nodejs port issue on this forum yet which wasn’t caused by the application failing to handle the ports properly.

What does that exactly mean? Please, describe it to us like to a blind person. Shows where? Browser? terminal? What is nothing? White page, network error, any other error?

Docker init initializes a project. I can imagine that it is not immediately runnable. You can open a new topic if you want to discuss that problem too and share the error message there.

Unfortunately, we do not have enough information about your application or configuration. But in general you need to specify a port in your Node.js application or you have to check which port is used by the application. This port is used to receive incoming network requests. You could do this in an example application with the “listen” command:

server.listen(3000, '0.0.0.0', () => {
  console.log('Server running at http://localhost:3000/');
});

In this example, the server is listening on port 3000. You can use any valid port that suits your needs.

I found out that the port could have been configured in Vite. But of course we don’t know which port was configured. On Default the port is 5173. See: Server Options | Vite
But you have already tried that, but perhaps another port could also be configured.

Did you possibly define a port in the .env file of Vite and use it in the configuration?
See: javascript - How can I use Vite env variables in vite.config.js? - Stack Overflow

In addition, you need to expose the same port in your Dockerfile with the EXPOSE command. The EXPOSE command in a Dockerfile is indeed more for documentation purposes. It informs people using the image about what ports could potentially be used by the application. Here’s an example:

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "webserver.js" ]

In this Dockerfile, port 3000 is exposed, which corresponds to the port the Node.js server is listening on. Please make sure the port you specify in your application matches the one in your Dockerfile.

However, Docker does not automatically forward network traffic to the port specified in the EXPOSE command. To forward network traffic to your application’s port, you need to use the -p parameter when starting the container to bind the host’s port to the container’s port.

Here’s an example:

docker run -p 8080:3000 my-nodejs-app

In this example, the host’s port 8080 is bound to the container’s port 3000, where the Node.js application is running. Any network traffic sent to the host’s port 8080 is forwarded to the container’s port 3000.

Please make sure the container’s port you specify matches the one in your application.

The environment variable is available as “process.env.PORT” in Node.js, but you need to pass it to the application. See: express - What is process.env.PORT in Node.js? - Stack Overflow

I can’t imagine Vite would use this port unless it’s passed to configuration.

Addendum:
Since process.env.VITE_PORT was used instead of process.env.PORT in the one of the linked articles.
Could it be that you have to specify:

ENV VITE_PORT = 8080