Question 313800 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to automatically run `npm run dev` for React vite app running in Docker

I have a Vite React app with a Flask API running in Docker with WSL 2 through docker-compose. But now I have to manually run these commands to be able to access my React app in the browser:

docker exec -it vite_docker sh
npm i && npm run dev

Where can I put these commands so they’re run automatically while the docker-compose is doing it’s thing?

docker-compose.yml

version: "3.8"
services:
  vite_react:
    image: node:alpine
    container_name: vite_react
    entrypoint: /bin/sh
    ports:
      - 3000:3000
    working_dir: /srv/app
    volumes:
      - type: bind
        source: ./ML-Flask-React
        target: /srv/app
    tty: true

  flask_app:
    build: ./ML-Flask-API
    container_name: flask_app
    ports:
      - 5000:5000
    depends_on:
      - redis

  redis:
    image: redis:alpine

Dockerfile Flask:

FROM python:3

WORKDIR /app

RUN pip install --upgrade pip
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt

COPY . .

CMD [ "python", "app.py" ]

The React app doesn’t have a Dockerfile.

Tags:

2

Answers


  1. 0

    It’s reasonably typical to build your own Docker image to…

    1. Install dependencies
    2. Execute the appropriate commands when starting

    For example

    # ML-Flask-React/Dockerfile.development

FROM node:alpine
WORKDIR /srv/app

COPY package*.json .
RUN npm install

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

    Then use this in your Compose service

    services:
  vite_react:
    build:
      context: ./ML-Flask-React
      dockerfile: Dockerfile.development
    ports:
      - "3000:3000"
    volumes:
      - ./ML-Flask-React:/srv/app
      - /srv/app/node_modules

    See this post in regards to the anonymous /srv/app/node_modules volume mount.

    I’ve named the file Dockerfile.development as you very probably have a production build Dockerfile which you won’t want to use for running the dev server

    Login or Signup to reply.
  2. 0

    You can specify ENTRYPOINT npm run dev at the end of your Docker file. This will work as the primary function or command of your application. It will be executed whenever your Docker image is executed.

    You can learn more about this at ENTRYPOINT

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search