Setting Up Apache to Run a React Frontend and a Django Rest Framework Backend on a Single Machine

This gist should get React and Django Rest Framework running on debian with apache as the HTTP server.

Step 1 - Install Apache and UFW

First we need to install apache2 and apache2-dev (for compiling mod_wsgi), and set the firewall to allow apache with ufw.

sudo apt upgrade
sudo apt install apache2 apache2-dev ufw
sudo ufw allow 'Apache Full'

Digital Ocean: How To Install the Apache Web Server on Ubuntu 16.04

Step 2 - Compile and enable mod_wsgi

The second step is to compile mod_wsgi to work with your version of Python, then enable it with a2enmod.

wget https://github.com/GrahamDumpleton/mod_wsgi/archive/4.5.24.tar.gz
tar xvfz 4.5.24.tar.gz
cd mod_wsgi-4.5.24
./configure
make
sudo make install

Then edit /etc/apache2/apache2.conf to include this line

LoadModule wsgi_module /usr/lib/apache2/modules/mod_wsgi.so

mod_wsgi

Step 3 - Create virtual host for Django Rest Framework backend

In this setup DRF will run on a different port to React, in this case DRF is on 8000

sudo mkdir /var/www/backend
cd /etc/apache2/sites-available
# Copy the default apache configuration
sudo cp 000-default.conf backend.conf
sudo nano backend.conf

Edit backend.conf to something like:

Listen 8000
<VirtualHost *:8000>
  ServerName yourServer
  ServerAdmin you@yourDomain
  DocumentRoot /var/www/backend
  
  # Point this to the wsgi.py in the same directory as your settings.py file
  WSGIScriptAlias / /var/www/yourDjangoProject/djangoSettings/wsgi.py
 
  <Directory /var/www/todo/backend>
    <Files wsgi.py>
      Require all granted
      Allow from all
    </Files>
  </Directory>
</VirtualHost>

Add to apache2.conf to use WSGI:

# This is just the root of your virtualenv directory, i.e. two levels above activate
WSGIPythonHome /var/www/backend/virtualenv
WSGIPythonPath /var/www/backend

Allow port 8000 (or your chosen port):

sudo ufw allow 8000

Running different sites on different ports How to use Django with Apache and mod_wsgi

Step 4 - Build React App

Now we need to build the React frontend for production and add a .htaccess file that uses mod_rewrite for client-side routing by React Router:

cd ~/your/react/app/public
nano .htaccess

Set .htaccess to something like

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

npm run-script build
sudo cp -r build /var/www/frontend

Deployment Apache Config for React Router

Step 5 - Create virtual host for React frontend

The last config step is to create a virtual host for the React app

sudo mkdir /var/www/frontend
cd /etc/apache2/sites-available
sudo cp 000-default.conf frontend.conf
sudo nano frontend.conf

Edit frontend.conf to something like:

<VirtualHost *:80>
  ServerName yourServer
  ServerAdmin you@yourDomain
  DocumentRoot /var/www/frontend
  
  # Serve static files like the minified javascript from npm run-script build
  Alias /static /var/www/todo/frontend/build/static
  <Directory /var/www/todo/frontend/build/static>
    Require all granted
  </Directory>
</VirtualHost>

Edit apache2.conf to allow htaccess to override the settings in apache2.conf for /var/www/:

<Directory /var/www/>
  Options Indexes FollowSymLinks
  AllowOverride All
  Require all granted
</Directory>

Step 6 - Enable the new sites and restart

Finally we need to disable the default apache config and enable our backend and frontend configs, then restart apache so changes are applied

a2dissite 000-default.conf
a2ensite backend.conf
a2ensite frontend.conf
sudo systemctl restart apache2