[SOLVED] React Vite App is not working when deployed to Ubuntu EC2 instance

Issue

I have dockerise React+django project and trying to deploy it on ec2 instance (ubuntu)

My Django and Postgresql is working but react code giving vite not foung error

My Docker File

# Use an official Node.js image as the base image
FROM node:18

# Set the working directory inside the container
WORKDIR /frontend

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . /frontend

# Build the React app
RUN npm run build

# Expose the port that the app will run on
EXPOSE 5173


# Command to run the application
CMD ["npm", "run", "dev"]

docker-compose file

version: '3'

services:
  db:
    image: postgres:latest
    env_file:
      - ./backend_django/securePassKeeper/.env
    ports:
      - "5432:5432"

  backend:
    build: 
      context: ./backend_django/securePassKeeper
      dockerfile: Dockerfile 
    command: ["gunicorn", "--bind", "0.0.0.0:8000", "securePassKeeper.wsgi:application"]
    volumes:
      - ./backend_django/securePassKeeper:/backend 
    ports:
      - "8000:8000"
    depends_on:
      - db
    env_file:
    - ./backend_django/securePassKeeper/.env


  frontend:
    build:
      context: ./frontend_react/secure-pass-keeper
      dockerfile: Dockerfile
    ports:
      - "5173:5173"
    env_file:
      - ./frontend_react/secure-pass-keeper/.env
    volumes:
      - ./frontend_react/secure-pass-keeper/src:/frontend/src  
      - ./frontend_react/secure-pass-keeper/public:/frontend/public  
      - ./frontend_react/secure-pass-keeper/node_modules:/frontend/node_modules
    depends_on:
      - backend

i have try multiple time docker-compose up --build but did not work but in my local it is working fine.

When I try to exec command on docker

ubuntu@ip-xxx-xx-xx-xx:~/repo/Secure-Pass-Keeper-Django-React$ ls
LICENSE  Readme.md  backend_django  docker-compose.yml  frontend_react
ubuntu@ip-xxx-xx-xx-xx:~/repo/Secure-Pass-Keeper-Django-React$ docker-compose exec frontend logs
ubuntu@ip-xxx-xx-xx-xx:~/repo/Secure-Pass-Keeper-Django-React$ docker-compose exec frontend npm install
ubuntu@ip-xxx-xx-xx-xx:~/repo/Secure-Pass-Keeper-Django-React$ docker-compose exec frontend npm build
ubuntu@ip-xxx-xx-xx-xx:~/repo/Secure-Pass-Keeper-Django-React$ 

Error

secure-pass-keeper-django-react-frontend-1  | > [email protected] dev
secure-pass-keeper-django-react-frontend-1  | > vite --host 0.0.0.0
secure-pass-keeper-django-react-frontend-1  | 
secure-pass-keeper-django-react-frontend-1  | sh: 1: vite: not found
secure-pass-keeper-django-react-frontend-1 exited with code 127

Solution

You will need to install vite on ubuntu before building your frontend. Add sudo apt-get -y install vite in frontend build step of docker compose file.

eg.

version: '3'

services:
  db:
    image: postgres:latest
    env_file:
      - ./backend_django/securePassKeeper/.env
    ports:
      - "5432:5432"

  backend:
    build: 
      context: ./backend_django/securePassKeeper
      dockerfile: Dockerfile 
    command: ["gunicorn", "--bind", "0.0.0.0:8000", "securePassKeeper.wsgi:application"]
    volumes:
      - ./backend_django/securePassKeeper:/backend 
    ports:
      - "8000:8000"
    depends_on:
      - db
    env_file:
    - ./backend_django/securePassKeeper/.env


  frontend:
    build:
      context: ./frontend_react/secure-pass-keeper
      dockerfile: Dockerfile
    command: ["sudo", "apt-get", "-y", "install", "vite"]
    ports:
      - "5173:5173"
    env_file:
      - ./frontend_react/secure-pass-keeper/.env
    volumes:
      - ./frontend_react/secure-pass-keeper/src:/frontend/src  
      - ./frontend_react/secure-pass-keeper/public:/frontend/public  
      - ./frontend_react/secure-pass-keeper/node_modules:/frontend/node_modules
    depends_on:
      - backend

Answered By - Gunesh Shanbhag

Answer Checked By - Marilyn (WPSolving Volunteer)