My Django/React Heroku Deployment Checklist

This is a working document and not currently meant to serve as a How-To or guaranteed to be exhaustive/bug free, but rather give myself a centralized set of steps to draw from.

This is "Part 2" of a Django deployment checklist. Part 2 focuses on adding a compiled React App as static files so the two run as one unified application.
Part 1 can be found here

-Update any calls to your back-end to use your Heroku domain
-cd into the react-app front end and run npm run build. This will generate a "build" folder in your react-app project directory.

my-computer/my-react-app/ $ npm run build

Create a folder in your your Django project directory called "frontend" and copy the build folder into this frontend folder. Path should look like my-django-app/frontend/build, "my-django-app" being the root folder for this application.

-Tell Django to look for these static files by updating the DIRS setting in the TEMPLATES variable
settings.py
+Also a STATICFILES_DIRS variable to settings so it knows where to find these static files

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
...

    },
]

# Put this near your other STATIC variables
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend/build/static')]

-Configure urls.py to use a regular expression path with TemplateView. We are using the index.html from our static build files that react generated for us. The regular expression will ensure that our React routing functions correctly.

urls.py

from django.urls import include, path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('mypaths/', include('app.urls')),
    re_path(r".*", TemplateView.as_view(template_name='index.html')),
    ...
]