Deploying an app with independent Django backend and React frontend with Netlify

Having your own services for frontend and backend is really great for development. You can use all the great things like create-react-app with hot reloading and create and independent frontend service. On the backend side you are forced to create a truly independent api. This way you can offer it to your users with some small adjustments.

But it’s also hard in terms of deployment. Because you need your services in sync, when you deployed them. You don’t want your frontend already deployed with a new version and your backend still needs 10 minutes to deploy. There are some great, but also complex solutions on the market. I needed something really easy to deploy my web apps.

First advice: Don’t use separate git repositories. It’s much harder in terms of Continuous Deployment to keep them synced. When you are running tests in your CD-Tool, you want both, frontend and backend to deploy when both are finished running tests. Put them both into one repository.

To deploy my backend i wanted to use dokku. Because it’s really easy to use, offers a simple SSL solution and you can host it wherever you want. But dokku works with git and pushing your code to your dokku server endpoint. This becomes a problem when your backend code with the Dockerfile is in a subdirectory called “backend”. What you actually need is a way to push only this subdirectory as main directory to your dokku server.

But there is a really simple solution for this and it’s called git-subtree. You can use it to set a subdirectory as the main directory for pushing it to a server. In this case you would use following line:

git subtree push — prefix backend dokku-origin-name master

For the frontend I use netlify to deploy my create-react-app app. So it’s really straightforward with the following lines:

cd frontend && yarn run build
cd frontend && netlify deploy — dir=./build — prod

Because i sometimes forget to remember them, I created a deployment script file in the root directory of my git repository, that I execute to deploy my app. It’s worth noting, that I start with deploying the backend app, because the frontend deployment is much faster, in most cases. I also build my frontend before starting the deployment. In this way I keep the time, that my services are not in sync really low without putting too much effort into it.

git subtree push --prefix backend subdomain master
(cd frontend && exec yarn run build)
(cd frontend && exec netlify deploy --dir=./build --prod)