Ahmed Al-Jawahiry

CRA Served from Django

Objectives:

Result:

Why:

Why not:

How:

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:
    
     STATICFILES_DIRS = [
         "frontend/react/build/static/",
     ]
        
     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:
    
     @login_required()
     def index(request, *args):
         return render(request, 'index.html')
        
        
     class Login(LoginView):
         template_name = 'frontend/login.html'
         redirect_authenticated_user = True
        
        
     class Logout(LogoutView):
         pass
     
  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:


Career

Mostly Python and React.

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

Education

Physics MSc, University College London.

Mathematics and Physics BSc, University of Warwick.

Publications

  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