Unable to Dockerize Vite React-Typescript Project

Question

I am trying to dockerize a Vite React-Typescript boilerplate setup, but I unable to connect to the container.

Installed vite-react-typescript boilerplate:

npm init vite@latest vite-docker-demo -- --template react-ts

Dockerfile

# Declare the base image
FROM node:lts-alpine3.14
# Build step
# 1. copy package.json and package-lock.json to /app dir
RUN mkdir /app
COPY package*.json /app
# 2. Change working directory to newly created app dir
WORKDIR /app
# 3 . Install dependencies
RUN npm ci
# 4. Copy the source code to /app dir
COPY . .
# 5. Expose port 3000 on the container
EXPOSE 3000
# 6. Run the app
CMD ["npm", "run", "dev"]

Command to run docker container in detached mode and open local dev port 3000 on host: docker run -d -p 3000:3000 vite

The vite instance seems to be running just fine within the container (docker logs output):

> [email protected] dev /app
> vite

Pre-bundling dependencies:
  react
  react-dom
(this will be run only when your dependencies or config have changed)

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 244ms.

However, when I navigate to http://localhost:3000/ within Chrome. I see an error indicating The connection was reset.

Any help resolving this issue would be greatly appreciated!

Cesar N Mejia Leiva · Accepted Answer · 2021-07-30 17:58:03Z

23

It turns out that I needed to configure host to something other than localhost.

Within vite.config.ts:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  plugins: [reactRefresh()],
})

Resolves the issue.

answered Jul 30, 2021 at 17:58

Cesar N Mejia Leiva

1,7211 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajantiss · Accepted Answer · 2022-02-06 03:23:39Z

4

in package.json use script

"dev": "vite --host"

example:

  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },

or run with vite --host

answered Feb 6, 2022 at 3:23

Ajantiss

414 bronze badges

Comments

Lucas Schulze · Accepted Answer · 2022-11-20 00:25:40Z

0

To use hot reload, so the changes actually get reflected:

export default (conf: any) => {
  return defineConfig({
    server: {
      host: "0.0.0.0",
      hmr: {
        clientPort: ENV_VARIABLES.OUTER_PORT_FRONTEND,
      },
      port: ENV_VARIABLES.INNER_PORT_FRONTEND_DEV, 
      watch: {
        usePolling: true,
      },
    },
  });
};

answered Nov 20, 2022 at 0:25

Lucas Schulze

463 bronze badges

Collectives™ on Stack Overflow

Unable to Dockerize Vite React-Typescript Project

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related