/django-reactjs-template

A template for quickly setting up projects with a Django backend and ReactJS + TailwindCSS frontend

Primary LanguagePython

Django + ReactJS Template

A template for quickly setting up projects with the following items:

  • Django backend
  • ReactJS (Vite) frontend
  • TailwindCSS

Dependencies

To use this template, we require some preliminary setup, such as adding a venv and installing the node packages. Follow the below process to complete the setup.

Note: We assume you have the latest versions of node and python pre-installed.

Backend Setup

  1. Create a virtual environment in the /backend directory:
cd backend
python -m venv venv
  1. Access the virtual environment:
  • Windows users:
venv\Scripts\activate
  • Mac/Linux:
source venv\Scripts\activate
  1. Install the dependencies from the requirements.txt file:
pip install -r requirements.txt
  1. Create a new .env file in the root directory and add the following:
DJANGO_SECRET_KEY=[KEY_HERE]
DEBUG_MODE=True
  1. Generate a new secret key for the project by accessing the Django shell:
django-admin shell

from django.core.management.utils import get_random_secret_key  
get_random_secret_key()

  1. Copy the secret key into the .env file, replacing [KEY_HERE].

  2. Make the initial migrations for the database:

python manage.py makemigrations
python manage.py migrate

Note: makemigrations will return no changes detected.

  1. Check everything works (should see hello world!):
python manage.py runserver

Frontend Setup

  1. Install the node packages:
npm install
  1. Check it works (should see Home underscored and bold):
npm run dev