initialized vite react setup

    build:

      context: ./react-frontend

    volumes:

      - ./react-frontend/my-react-app:/app

      - ./react-frontend/my-vite-react-app:/app

      - /app/node_modules

    ports:

      - "3000:3000"

    stdin_open: true

    tty: true

      - "5173:5173"

    environment:

      - CHOKIDAR_USEPOLLING=true # To support live reloading on mounted volumes

    command: ["npm", "start"]

      - CHOKIDAR_USEPOLLING=true

    command: ["npm", "run", "dev", "--", "--host"]

    depends_on:

      - tornado-backend

# ./react-frontend/Dockerfile

FROM node:16

FROM node:20-alpine

WORKDIR /app

# Copy package.json and package-lock.json

COPY ./my-react-app/package*.json ./

# Copy dependency files only

COPY ./my-vite-react-app/package*.json ./

# Install dependencies

RUN npm install

# Copy the rest of the application code

COPY . .

# No need to copy the rest – will be mounted as a volume

# No need for .cache or chmod fixes

# Create .cache directory and set permissions

RUN mkdir -p /app/node_modules/.cache \

    && chmod -R 777 /app/node_modules/.cache

# Start the React development server

CMD ["npm", "start"]

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

# Logs

logs

*.log

npm-debug.log*

yarn-debug.log*

yarn-error.log*

pnpm-debug.log*

lerna-debug.log*

node_modules

dist

dist-ssr

*.local

# Editor directories and files

.vscode/*

!.vscode/extensions.json

.idea

.DS_Store

*.suo

*.ntvs*

*.njsproj

*.sln

*.sw?

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

import js from '@eslint/js'

import globals from 'globals'

import reactHooks from 'eslint-plugin-react-hooks'

import reactRefresh from 'eslint-plugin-react-refresh'

import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([

  globalIgnores(['dist']),

  {

    files: ['**/*.{js,jsx}'],

    extends: [

      js.configs.recommended,

      reactHooks.configs['recommended-latest'],

      reactRefresh.configs.vite,

    ],

    languageOptions: {

      ecmaVersion: 2020,

      globals: globals.browser,

      parserOptions: {

        ecmaVersion: 'latest',

        ecmaFeatures: { jsx: true },

        sourceType: 'module',

      },

    },

    rules: {

      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],

    },

  },

])