<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>As a good practice, one docker image should contain one process. Therefore you should dockerize them separatly (have one <code>Dockerfile</code> per app).</p>
<p>Then, you can add a <code>docker-compose.yml</code> file at the root of your project in order to link them together, it could look like that:</p>
<pre class="lang-yaml prettyprint-override"><code>version: '3.3'

services:
  app:
    build:
      context: ./frontend/
      dockerfile: ./Dockerfile
    ports:
      - &quot;127.0.0.1:80:80&quot;

  backend:
    env_file:
      - backend/.env
    build:
      context: ./backend/
      dockerfile: ./Dockerfile
    ports:
      - &quot;127.0.0.1:8000:80&quot;
</code></pre>
<p>The backend would be running on <code>http://localhost:8000</code> and the frontend on <code>http://localhost:80</code></p>
<p>In order to start the docker-compose you can just type in your shell:</p>
<pre class="lang-bash prettyprint-override"><code>$&gt; docker-compose up
</code></pre>
<p>This implies that you already have your Dockerfile for both apps.
You can find many example online of different implementations of Dockerfile for the different technologies. For example :</p>
<ul>
<li>For ReactJS you can configure it like <a href="https://mherman.org/blog/dockerizing-a-react-app/" rel="nofollow noreferrer">this</a></li>
<li>For FastAPI Like <a href="https://fastapi.tiangolo.com/deployment/docker/#dockerfile" rel="nofollow noreferrer">that</a></li>
</ul>
