<p>I am attempting to build a simple app with FastAPI and React. I have been advised by our engineering dept, that I should Dockerize it as one app instead of a front and back end...</p>
<p>I have the app functioning as I need without any issues, my current directory structure is.</p>
<pre class="lang-bash prettyprint-override"><code>.
├── README.md
├── backend
│   ├── Dockerfile
│   ├── Pipfile
│   ├── Pipfile.lock
│   └── main.py
└── frontend
    ├── Dockerfile
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── src
    │   ├── App.jsx
    │   ├── favicon.svg
    │   ├── index.css
    │   ├── logo.svg
    │   └── main.jsx
    ├── tailwind.config.js
    └── vite.config.js
</code></pre>
<p>I am a bit of a Docker noob and have only ever built an image for projects that don't arent split into a front and back end.</p>
<p>I have a <code>.env</code> file in each, only simple things like URLs or hosts.</p>
<p>I currently run the app, with the front end and backend separately as an example.</p>
<pre class="lang-bash prettyprint-override"><code>&gt; ./frontend
&gt; npm run dev
</code></pre>
<pre class="lang-bash prettyprint-override"><code>&gt; ./backend
&gt; uvicorn .... 
</code></pre>
<p>Can anyone give me tips /advice on how I can dockerize this as one?</p>

mrpbennett
<p>Following up on Vinalti's answer. I would also recommend using one Dockerfile for the backend, one for the frontend and a docker-compose.yml file to link them together. Given the following project structure, this is what worked for me.</p>
<p>Project running fastapi (backend) on port 8000 and reactjs (frontend) on port 3006.</p>
<pre><code>.
├── README.md
├── docker-compose.yml
├── backend
│   ├── .env
│   ├── Dockerfile
│   ├── app/
│   ├── venv/
│   ├── requirements.txt
│   └── main.py
└── frontend
    ├── .env
    ├── Dockerfile
    ├── package.json
    ├── package-lock.json
    ├── src/
    ├── ...
</code></pre>
<p>backend/Dockerfile</p>
<pre><code>FROM python:3.10
WORKDIR /code
COPY ./requirements.txt /code/requirements.txt
RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
COPY ./ /code/
CMD [&quot;uvicorn&quot;, &quot;app.api:app&quot;, &quot;--host&quot;, &quot;0.0.0.0&quot;, &quot;--port&quot;, &quot;8000&quot;]
</code></pre>
<p>frontend/Dockerfile</p>
<pre><code># pull official base image
FROM node:latest as build
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
# Silent clean install of npm
RUN npm ci --silent
RUN npm install react-scripts@3.4.1 -g --silent
# add app
COPY . /app/

# Build production
RUN npm run build
RUN npm install -g serve

## Start the app on port 3006
CMD serve -s build -l 3006
</code></pre>
<p>docker-compose.yml</p>
<pre><code>version: '3.8'
services:
  backend:
    env_file:
      - backend/.env
    build:
      context: ./backend/
      dockerfile: ./Dockerfile
    restart: always
    ports:
      - &quot;127.0.0.1:8000:8000&quot;
    expose:
      - 8000

  frontend:
    env_file:
      - frontend/.env
    build:
      context: ./frontend/
      dockerfile: ./Dockerfile
    restart: always
    ports:
      - &quot;127.0.0.1:3006:3006&quot;
    expose:
      - 3006
</code></pre>
