Ahmed Al-Jawahiry

CRA Served from Django




Why not:


Full repo can be found here. Note that TypeScript is used.

  1. Start a Django project.
  2. Create a “frontend” Django app: django-admin startapp frontend.
  3. Create a React app (called “react”, or whatever) inside your frontend/ directory: yarn create react-app react.
  4. Add the below to settings.py so that Django knows where CRA’s templates and static files are:
     TEMPLATES = [
             'BACKEND': 'django.template.backends.django.DjangoTemplates',  # unchanged
             'DIRS': ['frontend/react/build'],  # add this
             'APP_DIRS': True,  # unchanged
             'OPTIONS': {...},  # unchanged
  5. While you’re in settings.py, add:
     LOGIN_URL = '/user/login'
     LOGIN_REDIRECT_URL = '/ui/'
     LOGOUT_REDIRECT_URL = '/user/login'
  6. In frontend/views.py, create some views:
     def index(request, *args):
         return render(request, 'index.html')
     class Login(LoginView):
         template_name = 'frontend/login.html'
         redirect_authenticated_user = True
     class Logout(LogoutView):
  7. index.html is created after you run yarn build inside your React directory.
  8. frontend/login.html is a standard Django template you’ll have to create for yourself. Something like this will do.
  9. In frontend/urls.py, add the following:
     urlpatterns = [
         path('user/login/', Login.as_view(), name='login'),
         path('user/logout/', Logout.as_view(), name='logout'),
         re_path('^ui.*', index, name='spa'),  # react router handles anything after /ui/
  10. Create another Django app, e.g. “backend_app”, and setup DRF with some basic APIs:
    ### backend_app/api.py:
    class APIWithAuth(APIView):
        authentication_classes = [SessionAuthentication]
        permission_classes = [IsAuthenticated]
        def get(self, *args, **kwargs):
            return Response({
                'auth': True,
                'description': 'this api uses session auth'
    class APIWithoutAuth(APIView):
        def get(self, *args, **kwargs):
            return Response({
                'auth': False,
                'description': 'this api is unauthenticated'
    ### backend_app/urls.py:
    urlpatterns = [
        path('no-auth/', APIWithoutAuth.as_view(), name='no-auth-api'),
        path('auth/', APIWithAuth.as_view(), name='session-auth-api'),
  11. Proxy the CRA API requests by adding "proxy": "http://localhost:8000" to package.json.
  12. Create some routed React components (examples).
  13. Dockerise everything if you wish. These Dockerfiles, and this docker-compose file should work nicely. You’ll need to update the proxy above to "http://django:8000".

Final thoughts:


Mostly Python and React.

See LinkedIn or CV (ask) if you’d like more specifics.


Physics MSc, University College London.

Mathematics and Physics BSc, University of Warwick.


  1. Analytic quantum-interference conditions in Coulomb corrected photoelectron holography
    Journal of Physics B: Atomic, Molecular and Optical Physics
    A. S. Maxwell, A. Al-Jawahiry, X. Y. Lai, and C. Figueira de Morisson Faria
    Jan 26, 2018

  2. Coulomb-corrected quantum interference in above-threshold ionization: Working towards multitrajectory electron holography.
    APS Physical Review A
    A. S. Maxwell, A. Al-Jawahiry, T. Das, and C. Figueira de Morisson Faria
    Aug 22, 2017

Honors & Awards

  1. Harrie Massey Prize for best overall UCL Physics and Astronomy MSc Student
  2. Nominated for the Mathematical and Physical Sciences Faculty Postgraduate prize