August 20, 2017
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
film_api, I keep all my backend service. In
film_ui lays React
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.
Repo with code can be found on github.