Background
I am trying to deploy an app with Django backend and React frontend (the latter is a Create-React-App). This is my first web app so I have never tried to deploy anything before.
To get these to work together I have followed the approach in https://fractalideas.com/blog/making-react-and-django-play-well-together-hybrid-app-model/.
In development, this relied on Django and React running on two servers, with Django in charge of serving HTML pages. To quote from the article: a view rendered the index.html generated by Create-React-App with the Django template engine. A catchall URL routes any unrecognised URL with that view. The frontend URL router takes over and renders the appropriate page on the client side. This worked fine in development. Given my lack of experience in these matters, I merely copied the code for the catchall view that proxies requests for index.html to the React development server.
Now I am not sure what too do about it in deployment, as I cannot get it to work as anticipated . This is where I have got to (I have amended the view a little):
The url in urls.py:
re_path(r'', views.catchall),
The view in views.py:
@csrf_exempt
def catchall(request, upstream='http://SouthernSeashores.pythonanywhere.com:3000'):
#def catchall_dev(request, upstream='http://localhost:3000'):
"""
Proxy HTTP requests to the frontend dev server in development.
The implementation is very basic e.g. it doesn't handle HTTP headers.
"""
upstream_url = upstream + request.path
method = request.META['REQUEST_METHOD'].lower()
response = getattr(requests, method)(upstream_url, stream=True)
content_type = response.headers.get('Content-Type')
if request.META.get('HTTP_UPGRADE', '').lower() == 'websocket':
return http.HttpResponse(
content="WebSocket connections aren't supported",
status=501,
reason="Not Implemented"
)
elif content_type == 'text/html; charset=UTF-8':
return http.HttpResponse(
content=engines['django'].from_string(response.text).render(),
status=response.status_code,
reason=response.reason,
)
else:
return http.StreamingHttpResponse(
streaming_content=response.iter_content(2 ** 12),
content_type=content_type,
status=response.status_code,
reason=response.reason,
)
# amended for production
catchall = TemplateView.as_view(template_name='index.html')
#catchall = catchall_dev if settings.DEBUG else catchall_prod
The error message I am getting appears to be from views.py:
Exception Type: NameError
Exception Value:
name '_______' is not defined
Given my lack of experience, I don't really understand how to get the React frontend and Django backend to communicate in deployment.Has anyone any experience with deploying a Django-React 'hybrid app' coded in this way able to advise me please?