Django graphene GraphiQL page not loading when running from Uvicorn

Not sure what I set wrong but I am not getting the graphiql interface when running in uvicorn using uvicorn mysite.asgi:application:

[32mINFO[0m:     Started server process [[36m14872[0m]
[32mINFO[0m:     Waiting for application startup.
[32mINFO[0m:     ASGI 'lifespan' protocol appears unsupported.
[32mINFO[0m:     Application startup complete.
[32mINFO[0m:     Uvicorn running on [1mhttp://127.0.0.1:8000[0m (Press CTRL+C to quit)
[32mINFO[0m:     127.0.0.1:52463 - "GET /graphql/ HTTP/1.1" 200
Not Found: /static/graphene_django/graphiql.js
[33mWARNING[0m:  Not Found: /static/graphene_django/graphiql.js
[32mINFO[0m:     127.0.0.1:52463 - "GET /static/graphene_django/graphiql.js HTTP/1.1" 404
Not Found: /static/graphene_django/graphiql.js
[33mWARNING[0m:  Not Found: /static/graphene_django/graphiql.js
[32mINFO[0m:     127.0.0.1:52463 - "GET /static/graphene_django/graphiql.js HTTP/1.1" 404

but it loads fine when I do python manage.py runserver

Here is what I have installed:

Python 3.8.2
Django==3.0.5
uvicorn==0.11.3
graphene==2.1.8
graphene-django==2.9.0
graphql-core==2.3.1

In settings.py I have:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),]

# Graphene
GRAPHENE = {
    'SCHEMA': 'mysite.schema.schema'
}

Solution

Django is not serving static files by itself outside of the development server, you have to do it by yourself in some way. You can either set up a reverse proxy like nginx and instruct it to serve all the static files from your staticfiles directory or, only for development, you can instruct django to serve them, by adding to your urls.py:

from django.conf import settings
from django.views.static import serve

# Put the line provided below into your `urlpatterns` list.
url(r'^(?P<path>.*)$', serve, {'document_root': settings.STATIC_ROOT})

Make sure to use the later method only for the development, as it may have serious performance impact.

For both of the methods, you have to collect your static files as well using python manage.py collectstatic, as django, outside of the development server, needs all the static files to be collected in one place, your STATIC_ROOT.