Hello! Today I will guide you through setting up React application with Django! Let's get started!
I decided to use pattern called monorepo. What does it mean? It means that you will have your Django application in one folder and React application in another folder under the same repository.
What are benefits of such approach? Deployment is a little bit easier as you deploy whole repository, not different services. You can write integrations tests more easily. Everything will be governed by docker-compose. Downsides? To release the only backend you will have to release also frontend part.
So how will my folder structure look like?
. ├── compose │ ├── django │ └── ui ├── film_api │ ├── config │ ├── film_database │ └── requirements └── film_ui ├── public └── src
So in film_api, I keep all my backend service. In film_ui lays React code from create-react-app.
How do I setup this everything? I use docker-compose:
film_ui: build: context: . dockerfile: ./compose/ui/Dockerfile volumes: - ./film_ui/:/app - /app/node_modules command: yarn start ports: - "3000:3000"
The interesting setting here is volume /app/node_modules which allow docker to see node_modules from a host machine. I also use Dockerfile:
FROM node:8 WORKDIR /app COPY ./film_ui/package.json /app COPY ./film_ui/yarn.lock /app RUN yarn install ADD ./film_ui/ /app
Thanks to such configuration I have live reloading and docker see changes that I made in the code base. This part was based on Lessons from Building a Node App in Docker.
That's all! I got my application ready to connect it to GraphQL so I will be displaying real data from the database instead of hard coded ones.