├── frontend ├── __init__.py ├── migrations │ └── __init__.py ├── models.py ├── admin.py ├── tests.py ├── apps.py ├── urls.py ├── views.py ├── src │ ├── index.tsx │ └── App.tsx └── templates │ └── frontend │ └── index.html ├── django_react_starter ├── __init__.py ├── asgi.py ├── wsgi.py ├── urls.py └── settings.py ├── requirements.txt ├── .babelrc ├── .gitignore ├── README.md ├── tsconfig.json ├── webpack.config.js ├── manage.py └── package.json /frontend/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /django_react_starter/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/migrations/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Django==4.1.5 2 | django-webpack-loader==1.8.0 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /frontend/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /frontend/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /frontend/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | __pycache__ 3 | env/ 4 | frontend/static/frontend/ 5 | *.sqlite3 6 | webpack-stats.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # django-react-starter 2 | 3 | This is a basic set up to serve a React single-page application from Django 4 | -------------------------------------------------------------------------------- /frontend/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class FrontendConfig(AppConfig): 5 | name = 'frontend' 6 | -------------------------------------------------------------------------------- /frontend/urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import path 2 | from . import views 3 | 4 | urlpatterns = [ 5 | path('', views.index) 6 | ] 7 | -------------------------------------------------------------------------------- /frontend/views.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | 3 | 4 | def index(request): 5 | return render(request, 'frontend/index.html') 6 | -------------------------------------------------------------------------------- /frontend/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | const root = createRoot(document.getElementById("app")!); 6 | root.render(); 7 | -------------------------------------------------------------------------------- /frontend/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Example = (props: {title : string, number: number}) => { 4 | return
{props.title} {props.number}
5 | } 6 | 7 | const App = () => { 8 | return 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strictNullChecks": true, 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "es6", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports": true 12 | }, 13 | "include": ["./frontend/src"] 14 | } -------------------------------------------------------------------------------- /frontend/templates/frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | {% load render_bundle from webpack_loader %} 3 | 4 | 5 | 6 | 7 | My Site 8 | 9 | 10 |
11 | {% render_bundle 'frontend' %} 12 | 13 | 14 | -------------------------------------------------------------------------------- /django_react_starter/asgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | ASGI config for django_react_starter project. 3 | 4 | It exposes the ASGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.asgi import get_asgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 15 | 'django_react_starter.settings') 16 | 17 | application = get_asgi_application() 18 | -------------------------------------------------------------------------------- /django_react_starter/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for django_react_starter project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 15 | 'django_react_starter.settings') 16 | 17 | application = get_wsgi_application() 18 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const BundleTracker = require("webpack-bundle-tracker"); 3 | 4 | module.exports = { 5 | entry: { 6 | frontend: "./frontend/src/index", 7 | }, 8 | output: { 9 | path: path.resolve("./frontend/static/frontend/"), 10 | filename: "[name]-[fullhash].js", 11 | publicPath: "static/frontend/", 12 | clean: true 13 | }, 14 | plugins: [ 15 | new BundleTracker({ 16 | path: __dirname, 17 | filename: "./webpack-stats.json", 18 | }), 19 | ], 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.tsx?$/, 24 | use: 'ts-loader', 25 | exclude: /node_modules/, 26 | }, 27 | ], 28 | }, 29 | resolve: { 30 | extensions: ['.tsx', '.ts', '.js'], 31 | }, 32 | }; -------------------------------------------------------------------------------- /manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | """Run administrative tasks.""" 9 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 10 | 'django_react_starter.settings') 11 | try: 12 | from django.core.management import execute_from_command_line 13 | except ImportError as exc: 14 | raise ImportError( 15 | "Couldn't import Django. Are you sure it's installed and " 16 | "available on your PYTHONPATH environment variable? Did you " 17 | "forget to activate a virtual environment?" 18 | ) from exc 19 | execute_from_command_line(sys.argv) 20 | 21 | 22 | if __name__ == '__main__': 23 | main() 24 | -------------------------------------------------------------------------------- /django_react_starter/urls.py: -------------------------------------------------------------------------------- 1 | """django_react_starter URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/3.1/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.urls import include, path 14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 | """ 16 | from django.contrib import admin 17 | from django.urls import include, path 18 | 19 | urlpatterns = [ 20 | path('admin/', admin.site.urls), 21 | path('', include('frontend.urls')) 22 | ] 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "django-react-starter", 3 | "version": "2.0.0", 4 | "description": "Starter repo for serving a React SPA from Django", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --config webpack.config.js --watch --mode development", 8 | "build": "webpack --config webpack.config.js --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.20.12", 19 | "@babel/preset-env": "^7.20.2", 20 | "@babel/preset-react": "^7.18.6", 21 | "@types/react": "^18.2.33", 22 | "@types/react-dom": "^18.2.14", 23 | "babel-loader": "^9.1.2", 24 | "css-loader": "^6.7.3", 25 | "style-loader": "^3.3.1", 26 | "ts-loader": "^9.5.0", 27 | "typescript": "^5.2.2", 28 | "webpack": "^5.75.0", 29 | "webpack-bundle-tracker": "^1.8.0", 30 | "webpack-cli": "^5.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /django_react_starter/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for django_react_starter project. 3 | 4 | Generated by 'django-admin startproject' using Django 3.1.1. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/3.1/ref/settings/ 11 | """ 12 | 13 | import os 14 | from pathlib import Path 15 | 16 | # Build paths inside the project like this: BASE_DIR / 'subdir'. 17 | BASE_DIR = Path(__file__).resolve().parent.parent 18 | 19 | 20 | # Quick-start development settings - unsuitable for production 21 | # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/ 22 | 23 | # SECURITY WARNING: keep the secret key used in production secret! 24 | SECRET_KEY = 'b)v_=mtt$wy7--#&ip1^#xu4bsk@(&6jl@$_u7i0-c4*=-%8p5' 25 | 26 | # SECURITY WARNING: don't run with debug turned on in production! 27 | DEBUG = True 28 | 29 | ALLOWED_HOSTS = [] 30 | 31 | 32 | # Application definition 33 | 34 | INSTALLED_APPS = [ 35 | 'webpack_loader', 36 | 'frontend', 37 | 'django.contrib.admin', 38 | 'django.contrib.auth', 39 | 'django.contrib.contenttypes', 40 | 'django.contrib.sessions', 41 | 'django.contrib.messages', 42 | 'django.contrib.staticfiles', 43 | ] 44 | 45 | WEBPACK_LOADER = { 46 | 'DEFAULT': { 47 | 'BUNDLE_DIR_NAME': 'frontend/', 48 | 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json') 49 | } 50 | } 51 | 52 | MIDDLEWARE = [ 53 | 'django.middleware.security.SecurityMiddleware', 54 | 'django.contrib.sessions.middleware.SessionMiddleware', 55 | 'django.middleware.common.CommonMiddleware', 56 | 'django.middleware.csrf.CsrfViewMiddleware', 57 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 58 | 'django.contrib.messages.middleware.MessageMiddleware', 59 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 60 | ] 61 | 62 | ROOT_URLCONF = 'django_react_starter.urls' 63 | 64 | TEMPLATES = [ 65 | { 66 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 67 | 'DIRS': [], 68 | 'APP_DIRS': True, 69 | 'OPTIONS': { 70 | 'context_processors': [ 71 | 'django.template.context_processors.debug', 72 | 'django.template.context_processors.request', 73 | 'django.contrib.auth.context_processors.auth', 74 | 'django.contrib.messages.context_processors.messages', 75 | ], 76 | }, 77 | }, 78 | ] 79 | 80 | WSGI_APPLICATION = 'django_react_starter.wsgi.application' 81 | 82 | 83 | # Database 84 | # https://docs.djangoproject.com/en/3.1/ref/settings/#databases 85 | 86 | DATABASES = { 87 | 'default': { 88 | 'ENGINE': 'django.db.backends.sqlite3', 89 | 'NAME': BASE_DIR / 'db.sqlite3', 90 | } 91 | } 92 | 93 | 94 | # Password validation 95 | # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators 96 | 97 | AUTH_PASSWORD_VALIDATORS = [ 98 | { 99 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 100 | }, 101 | { 102 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 103 | }, 104 | { 105 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 106 | }, 107 | { 108 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 109 | }, 110 | ] 111 | 112 | 113 | # Internationalization 114 | # https://docs.djangoproject.com/en/3.1/topics/i18n/ 115 | 116 | LANGUAGE_CODE = 'en-us' 117 | 118 | TIME_ZONE = 'UTC' 119 | 120 | USE_I18N = True 121 | 122 | USE_L10N = True 123 | 124 | USE_TZ = True 125 | 126 | 127 | # Static files (CSS, JavaScript, Images) 128 | # https://docs.djangoproject.com/en/3.1/howto/static-files/ 129 | 130 | STATIC_URL = '/static/' 131 | --------------------------------------------------------------------------------