✨ add react to the project

Author: koladev32

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.gitignore

@@ -7,7 +7,15 @@
 /node_modules/
 build/
 env
+venv/
+
+# ignore compiled files
+
+frontend/static/
 
 #src
 *.sqlite*
 
+# json files
+webpack-stats.json
+

core/settings.py

@@ -26,22 +26,29 @@
 DEBUG = True
 
 # Hosts Settings
-ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.onrender.com', '0.0.0.0']
-CSRF_TRUSTED_ORIGINS = ['http://localhost:8000', 'http://localhost:5085', 'http://127.0.0.1:8000', 'http://127.0.0.1:5085', 'https://core-django.onrender.com']
+ALLOWED_HOSTS = ["localhost", "127.0.0.1", ".onrender.com", "0.0.0.0"]
+CSRF_TRUSTED_ORIGINS = [
+    "http://localhost:8000",
+    "http://localhost:5085",
+    "http://127.0.0.1:8000",
+    "http://127.0.0.1:5085",
+    "https://core-django.onrender.com",
+]
 
 # Application definition
 
 INSTALLED_APPS = [
+    "webpack_loader",
+    "frontend",
+    "admin_datta.apps.AdminDattaConfig",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-
     # APPS
     "home",
-
     # Util
     "debug_toolbar",
 ]
@@ -55,14 +62,13 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
-
     # Util
     "debug_toolbar.middleware.DebugToolbarMiddleware",
 ]
 
 ROOT_URLCONF = "core.urls"
 
-UI_TEMPLATES = os.path.join(BASE_DIR, 'templates') 
+UI_TEMPLATES = os.path.join(BASE_DIR, "templates")
 
 TEMPLATES = [
     {
@@ -130,13 +136,18 @@
 
 STATIC_URL = "static/"
 
-STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
 
-STATICFILES_DIRS = (
-    os.path.join(BASE_DIR, 'static'),
-)
+STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+WEBPACK_LOADER = {
+    "DEFAULT": {
+        "BUNDLE_DIR_NAME": "frontend/",
+        "STATS_FILE": os.path.join(BASE_DIR, "webpack-stats.json"),
+    }
+}

core/urls.py

@@ -19,5 +19,7 @@
 urlpatterns = [
     path("", include("home.urls")),
     path("admin/", admin.site.urls),
-    path("__debug__/", include("debug_toolbar.urls")),        
+    path("__debug__/", include("debug_toolbar.urls")),
+    
+    path("", include("admin_datta.urls")),
 ]

frontend/src/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+export default function App() {
+  return (
+    <div>
+      <h1>This is a react Application</h1>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("app"));
+root.render(<App />);

gunicorn-cfg.py

@@ -3,9 +3,9 @@
 Copyright (c) 2019 - present AppSeed.us
 """
 
-bind = '0.0.0.0:5005'
+bind = "0.0.0.0:5005"
 workers = 1
-accesslog = '-'
-loglevel = 'debug'
+accesslog = "-"
+loglevel = "debug"
 capture_output = True
 enable_stdio_inheritance = True

home/urls.py

@@ -4,4 +4,5 @@
 
 urlpatterns = [
     path("", views.index, name="index"),
+    path('frontend', views.frontend, name='frontend'),
 ]

home/views.py

@@ -6,9 +6,12 @@
 
 from .models import *
 
+
 def index(request):
+    context = {
+        "date": datetime.today().strftime("%Y-%m-%d %H:%M:%S"),
+    }
+    return HttpResponse("Hello DJANGO! time is: " + context["date"])
 
-  context = {
-    'date': datetime.today().strftime('%Y-%m-%d %H:%M:%S'),
-  }
-  return HttpResponse("Hello DJANGO! time is: " + context['date'])
+def frontend(request):
+    return render(request, 'frontend/index.html')

package.json

@@ -0,0 +1,34 @@
+
+{
+  "name": "django-react-starter",
+  "version": "1.0.1",
+  "description": "Starter repo for serving a React SPA from Django",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack --config webpack.config.js --watch --mode development",
+    "build": "webpack --config webpack.config.js --mode production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "reactflow": "^11.7.0",
+    "recharts": "^2.5.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.3",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-tracker": "^1.8.0",
+    "webpack-cli": "^5.0.1"
+  }
+}

templates/frontend/index.html

@@ -0,0 +1,13 @@
+<!-- templates/frontend/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>React in Django</title>
+    {% load render_bundle from webpack_loader %}
+    {% render_bundle 'frontend' %}
+</head>
+<body>
+    <div id="react-root">This is a React application in Django.</div>
+</body>
+</html>

webpack.config.js

@@ -0,0 +1,34 @@
+const path = require("path");
+const BundleTracker = require("webpack-bundle-tracker");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+  entry: {
+    frontend: "./frontend/src/index.js",
+  },
+  output: {
+    path: path.resolve("./frontend/static/frontend/"),
+    filename: "main.bundle.js",
+    publicPath: "/static/frontend/",
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new BundleTracker({
+      path: __dirname,
+      filename: "./webpack-stats.json",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"],
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+};