Serving CRA static assets since django-spa 3.x

[rbreslow]

Hi @metakermit,

We're using django-spa in a few of our production applications. When support was added for Django 3, a change was introduced that broke the way we your module.

By default, Create React App places JavaScript and CSS files inside the build/static directory. There isn't a clear way to change this. We place the contents of the build/ directory into Django's static root.

Before the change, django-spa could search under static/static/.... With the new logic, the module won't append /static/ to the OS search path, which means the React assets are inaccessible.

For more context, this is what our directory structure looks like:

$ ls -dl django/static/*
drwxr-xr-x 6 root root 4096 Jul 30 13:50 django/static/admin
-rw-r--r-- 1 root root 1099 Jul 30 13:50 django/static/asset-manifest.json
-rw-r--r-- 1 root root 3150 Jul 30 13:50 django/static/favicon.ico
-rw-r--r-- 1 root root 2270 Jul 30 13:50 django/static/index.html
-rw-r--r-- 1 root root 5347 Jul 30 13:50 django/static/logo192.png
-rw-r--r-- 1 root root 9664 Jul 30 13:50 django/static/logo512.png
-rw-r--r-- 1 root root  492 Jul 30 13:50 django/static/manifest.json
-rw-r--r-- 1 root root  763 Jul 30 13:50 django/static/precache-manifest.833ab0b0246e3d77e7b8cc6bf371435d.js
-rw-r--r-- 1 root root   67 Jul 30 13:50 django/static/robots.txt
-rw-r--r-- 1 root root 1181 Jul 30 13:50 django/static/service-worker.js
drwxr-xr-x 5 root root 4096 Jul 30 13:50 django/static/static
-rw-r--r-- 1 root root 9608 Jul 30 13:50 django/static/staticfiles.json
$ ls -dl django/static/static/*
drwxr-xr-x 2 root root 4096 Jul 30 13:50 django/static/static/css
drwxr-xr-x 2 root root 4096 Jul 30 13:50 django/static/static/js
drwxr-xr-x 2 root root 4096 Jul 30 13:50 django/static/static/media

I can see why the logic was tweaked in the module. You could make the case that it working before was a bug.

I tried to work around the problem by configuring the static root and static url to be /assets/. This works, however index.html is no longer served on /. Presumably, this is because index_name is not configurable.

How would you recommend we upgrade to the 0.3.x series of your module? Do you know any examples of others using django-spa to serve React frontends?

I'd appreciate any insight 🙏 .

[jobh]

I have the same problem. Did you find a workaround?

[rbreslow]

No, we're still on 0.2.0 😕. When we upgrade to Django 3, we're probably going to have to create a fork.

[metakermit]

Hey folks, sorry for not replying. So to understand your problem better – you're using Django 2 still with django-spa? I should probably create a few example apps with unit tests to make sure future releases don't break older versions.

[jobh]

No worries!

In my case, I switched an older static (ejected) configuration to use create-react-app (CRA). The problem seems to be the same on Django 2 and Django 3, but is caused by the directory structure created by the CRA build:

With DJANGO_STATIC_URL='/static/', the .js files (in /static/static/xxx.js) are not found. Presumably because django-spa misinterprets the repeated "static" path.

With DJANGO_STATIC_URL='/assets/, the .js files are found, but the index file (in /assets/index.html) is not found. Presumably because the index file name is hardcoded in django-spa.

[rbreslow]

BTW, @jobh, I did draft a pull request that allows you to configure the index. See: #44.

[chrnorm]

@rbreslow I had some success with Django 3 and CRA by adding the following to my Django settings.py file:

# ROOT_DIR is a Path which points to the root of the repo
# `frontend` is my CRA folder
# `frontend/build` is the CRA build output folder

STATIC_ROOT = str(ROOT_DIR / "frontend" / "build")
STATICFILES_DIRS = (str(ROOT_DIR / "frontend" / "build" / "static"),)

Adding STATICFILES_DIRS seemed to make the middleware detect the extra frontend/build/static path and serve the assets correctly.