This article focuses on a strategy to deploy static assets, specifically assets generated with the create-react-app toolchain. The assets are served using Django deployed in a Kubernetes cluster on the Google cloud GKE platform.

The technologies used include Django, React, Docker, gcloud and its related CLIs, e.g. gsutil. It explores an example of a Docker build pipeline that generates the image and pushes the static assets to a gcloud bucket. The article borrows heavily from Google’s own guide titled “Running Django on Google Kubernetes Engine” (referencedas Django GKE for the rest of the article).

It was found that the GKE guide had some blind spots, or rather specific use cases, that were not covered in the guide, and some of these gaps are addressed here. Anything not mentioned in this article is assumed to be covered in the Django GKE guide (e.g., creating GKE clusters as well as buckets and databases) so refer to it if you need to have the whole picture.

The article is divided into three main sections: the React App section, the Django section, and the build and deploy section. Everything in this article can be found in the django_react_k8s GitHub repository. As such, we will only look at the core points as opposed to going into detail on how to set it all up.

---

React App Setup

In the django_react_k8s repository, the static assets can be found in the ./static folder and were created using the following command.

npx create-react-app static

This installs a standard React application, but we need to make some modifications in order to serve static assets to Django in a production setting. The first set of modifications is to install packages that allow us to customize the create-react-app config. There packages can be installed by running:

yarn add -D react-app-rewired customize-cra webpack-bundle-tracker@0.4.3 write-file-webpack-plugin

• The first package is the react-app-rewired which overrides the create-react-app webpack configs without having to eject it.
• The customize-cra works in conjunction with react-app-rewired and provides useful utilities to perform the overrides.
• The webpack-bundle-tracker spits out some stats about the webpack compilation process to a file. In this case, the stats file will provide an interface that makes Django aware of the different assets that have been generated, including their locations on disk or in the cloud. This is useful as filenames tend to be dynamically hashed during the production build process, and it will be quite cumbersome to keep hardcoding the changes in the Django app. Note the version to install is 0.4.3 due to a bug with the package in newer versions (see issue 227).
• The write-file-webpack-plugin is a handy package that writes the generated static files to the file system during the development cycle. Using yarn start allows static content to be also accessed and served from Django locally.

#javascript #python #kubernetes #react #programming