Dockerize a React-Django project where the frontend is served from Django - reactjs

Question

I am serving a react app from within Django, and I trying to deploy it using docker-compose up -d --build.
My project directory is as follows:
root
├──project (django)
| ├──frontend/ # react project is here
| ├──project/
| ├──static/
| ├──Dockerfile //Dockerfile for backend image
| ├──entrypoint.sh
| ├──manage.py
| ├──requirements.txt
└──docker-compose.yaml
Here is my current deploy script:
# pull the official base image
FROM python:3.8.12-bullseye
# set work directory
WORKDIR /usr/src/app
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install dependencies
RUN apt-get update
COPY /requirements.txt /usr/src/app
RUN pip install -r requirements.txt
# set work directory
WORKDIR ~/usr/src/app
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
RUN npm run dev
# set work directory
WORKDIR /usr/src/app
# copy project
COPY . /usr/src/app/
# run entrypoint.sh
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
The error I get
> => ERROR [12/18] COPY package.json ./
> 0.0s => ERROR [13/18] COPY package-lock.json ./ 0.0s ------
> > [12/18] COPY package.json ./:
> ------
> ------
> > [13/18] COPY package-lock.json ./:
> ------ failed to compute cache key: "/package-lock.json" not found: not found

Answer 1

I edited your Dockerfile, try if this works:
# pull the official base image
FROM python:3.8.12-bullseye
RUN apt-get update
COPY . ./usr/src/app
WORKDIR /usr/src/app
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install python dependencies
RUN pip install -r requirements.txt
WORKDIR /usr/src/app/frontend
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
RUN npm run dev
# run entrypoint.sh
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]

Answer 2

The issue is that package.json and package-lock.json are not present in the directory where you run docker build, but (probably) in your frontend subdirectory.
Changing those two lines to:
COPY frontend/package.json ./
COPY frontend/package-lock.json ./
should work. But better yet, since you're copying everything anyway, you can move that to the top:
# pull the official base image
FROM python:3.8.12-bullseye
# set work directory
WORKDIR /usr/src/app
# copy project
COPY . .
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install dependencies
RUN apt-get update
RUN apt-get update \
&& apt-get install -y curl \
&& curl --silent --location https://deb.nodesource.com/setup_12.x | bash - \
&& apt-get install -y nodejs \
&& npm install --silent\
&& npm install react-scripts#3.4.1 -g --silent
RUN pip install -r requirements.txt
# set work directory
WORKDIR /usr/src/app/frontend
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
RUN npm run dev
# set work directory
WORKDIR /usr/src/app
# run entrypoint.sh
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
I'm not sure what your needs are, but for a production environment I would suggest separating the frontend and Django application into different containers. Backend applications have very different scaling and hardware needs than frontend applications. You can still package it into one application using Docker-compose for example.