There are several reasons why you might not want to have separate code bases for the front and back end of your app. For one, the project becomes more portable since it can live in one repository/folder. Then again, everything can be deployed on just one server.
Here’s a simple setup for creating a React-Django project. With just a few tweaks, you can swap out React for Angular or Vue.js and everything would work fine.
Follow the steps below to setup Django:
- Have Python and pip installed on your computer.
- Install virtualenv and virtualenvwrapper by running
pip install virtualenvwrapper.
- Create a virtual environment for the project using
workon name-of-virtual-envto activate the virtual environment.
- Install Django with
pip install django.
- Start a django project by running
django-admin startproject nameOfProject.
- Change directory to the project root and create a new app with
django-admin startapp mynewapp.
- Add mynewapp to installed apps in settings.py.
- Run app with
python manage.py runserver.
See the official Django installation guide for more info.
We’ll be using Create React App in this setup. Feel free to use your preferred method of/tool for setting up a React project.
- Have Node.js and NPM installed.
npm install -g create-react-app.
- Create a new app with
- Copy/cut all the contents of the React app (in name-of-project folder) and paste in the root of the Django project.**
- Run app with
npm startfrom the project root.
If you followed all the instructions above, you should have both React and Django apps in one folder. See the starred step (**) under the React heading. Good!
The React app is the SPA (Single Page App) while the Django app is the API. Let’s do some config, shall we?
The goal is to expose two sets of urls/routes. One for the SPA (e.g example.com, example.com/home, etc) and the other for the API (e.g example.com/api/posts, example.com/api/post/1, etc).
The React-Django app would be deployed on a Python web server, so we can easily achieve this using Django.
Step 1: build
npm run build. This creates a folder named build in the project root containing a production-ready version of the React app.
Step 2: settings.py
Add the build folder to template directories in settings.py so that Django can load /build/index.html as a template.
Also add /build/static to static files directory so that
collectstatic can copy the css and js files.
Step 3: urls.py
Add pattern to return /build/index.html in urls.py as follows:
Run Django’s dev server (
python manage.py runserver) to test the app.
Angular, Vue.js, etc
As you’ve seen with React, all you need to do is make a build available to Django, then configure Django to handle API requests and React to handle normal web page routes. You can use the same steps to setup Angular, Vue.js etc with Django.
Check out the code for this tutorial here: https://github.com/nicholaskajoh/React-Django.
Deploying the React-Django app is a story for another day. The process largely depends on your hosting environment and workflow. I made a post on deploying it to Heroku.