serve react app on 40x errors

[ChristopherChudzicki]

What are the relevant tickets?

• https://github.com/mitodl/hq/issues/4256

Description (What does it do?)

This PR fixes and issue with our 40x handling that was introduced as part of #678:

• In Self contained front end using Webpack to build HTML and Webpack Dev Server to serve #678, we made the react HTML file completely static, so it would not need to be served by Django.
• our handle_40x handlers were still serving the old index.html template, but this template file would error because of missing webpack stats.
  • The error only occurred when DEBUG=False AND handle_40x got triggered. handle_40x itself would error, raising 500.

How can this be tested?

1. In your env file, set DEBUG=False
2. docker compose up
3. Visit, for example, http://localhost:8063/api/cats-and-dogs. This triggers handle_404, which should send you to the frontend "Not Found" page.
4. Visit the rest of the app. It should work.
5. Try API pages and the admin panel, too.

[ChristopherChudzicki]

Is there a better way to serve a literally static HTML file? (I.e., not a template file). I could not find one.

Serving a purely static HTML file via django seems strange—we could just redirect—but I don't see any other way to preserve the URL (like http://localhost:8063/api/v1/cats-and-dogs).

[jonkafton]

Any issue adding its path location to the Nginx config (as you suggested in the comments)? What's the content of the html file (to help me understand why we need to serve it at all)?

[rhysyngsun]

HTML files are valid django templates - they just don't have and django template directives in them.

Since the files is under the static root directory, you'll probably need to add that directory to the templates directory configuration: https://docs.djangoproject.com/en/3.2/ref/settings/#dirs

[rhysyngsun]

Given your other comment below, you probably want to put this directory first in the list and leave main/templates/index.html as the failover for tests.

[ChristopherChudzicki]

I ended up keeping the touch ./frontends/mit-open/build/index.html for tests. If the file is missing in prod, we probably want an error not a fallback.

The nginx error_page approach discussed in slack seems appealing, but I couldn't get it to work. It just always showed the django error_page.

[ChristopherChudzicki]

added this touch for discussion.

One issue I ran into when serving the webpack build in handle_40x handlers without using a Django template is that the file won't exist without running the webpack build. This causes one of our tests to fail:

1. test_initials_avatar_fake_user calls name_initials_avatar_view ...
2. which calls redirect("static/images/avatar_default.png")...
3. which for some reason triggers handle_404 (I don't understand why redirect triggers that).
4. handle_404 wants the webpack built html file to exist, which then errors with 500 because it does not exist.

If you want to see this locally:

docker compose exec web bash
rm -rf staticfiles
pytest profiles/views_test.py --no-cov -k test_initials_avatar_fake_user -s

I added this touch to illustrate the issue. Doesn't seem like a good solution.

[rhysyngsun]

Everything looks good except for this error I'm seeing on both the home and 404 pages:

[ChristopherChudzicki]

@rhysyngsun I think you just need to rebuild the frontend. yarn install doesn't happen on up anymore, just on build. The CKFinderUploadAdapter export was renamed in a recent CKEditor update.

[rhysyngsun]

LGTM once tests pass