استفاده از React به عنوان فایل های استاتیک در برنامه جنگو: راهنمای گام به گام

🚌 من شما را در فرآیند گام به گام ایجاد یک برنامه وب پایه با استفاده از جنگو به عنوان بک‌اند و React به‌عنوان فرانت‌اند راهنمایی می‌کنم.

💡 آن را به‌عنوان پایه‌ای در نظر بگیرید که می‌توانید بعداً روی آن بسازید، یا به‌عنوان منبعی از الهام برای کمک به تکمیل پروژه خود.

👉 اگر به دنبال راه حلی برای اجرای Django و React هستید تحت همان URL، رابط کاربری React را به عنوان فایل های ثابت برای جنگو ارائه می کند، پس این پست برای شما نوشته شده است.

🔧 پیش نیازها، ابزار

من از محیط زیر استفاده می کنم:

اگر nvm-windows با موفقیت بر روی سیستم شما نصب شده است، می توانید Node را اضافه کنید.

nvm install 

آخرین نسخه نصب شده را انتخاب کنید

nvm use newest

نسخه Node را بررسی کنید

node -v

1. راه اندازی جنگو به عنوان بک اند

یک دایرکتوری برای پروژه ایجاد کنید. اسم این را بگذاریم my-webapp دایرکتوری با دستور زیر، یا در صورت تمایل می توانید نام دیگری انتخاب کنید.

mkdir my-webapp

دایرکتوری را به این فهرست جدید تغییر دهید.

cd my-webapp

1.1 راه اندازی محیط مجازی

ایجاد محیط مجازی برای پروژه با استفاده از venv.

python -m venv venv

محیط مجازی را فعال کنید.

venv\Scripts\activate

پس از دستور فعال سازی، اکنون باید چیزی مشابه را مشاهده کنید:

(venv) PS C:\Apps\my-webapp>

یعنی محیط مجازی فعال شده است.

1.2 جنگو را نصب کنید و یک پروژه بسازید

pip install django

django-admin startproject config .

python manage.py runserver

باز کنید http://localhost:8000/ در مرورگر وب شما

1.3 برنامه جنگو را ایجاد کنید

Ctrl+C را فشار دهید و در رابط خط فرمان ادامه دهید.

می توانید نام برنامه جنگو را هر چه می خواهید بگذارید. انتخاب من در حال حاضر backend است.

python manage.py startapp backend

1.4 به روز رسانی config/settings.py

فراموش نکنید که برنامه جدید را به لیست برنامه های نصب شده در برنامه اضافه کنید settings.py.

# config/settings.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'backend',  # I've just added
]

2. راه اندازی React به عنوان فرانت اند

برنامه React را با Vite ایجاد کنید. دایرکتوری فایل های React خواهد بود frontend اما می توانید نام دیگری را نیز انتخاب کنید.

npm create vite@latest frontend

در طول فرآیند، از شما می‌پرسد که می‌خواهید از کدام چارچوب استفاده کنید، و همچنین می‌توانید بین جاوا اسکریپت و تایپ اسکریپت به عنوان زبان توسعه انتخاب کنید. همانطور که می بینید، من اینجا React و JavaScript را انتخاب کرده ام.

برای بررسی موفقیت آمیز بودن نصب، دستورات پیشنهادی را اجرا کنید.

cd frontend

npm install

npm run dev

روی پیوند میزبان کلیک کنید، سپس می توانید ببینید:

به روز رسانی فایل ها

برای ارائه فایل های استاتیک از React به Django، باید به روز رسانی کنید settings.py در جنگو بر این اساس:

# config/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [str(BASE_DIR.joinpath('static')),],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# config/settings.py

STATIC_URL = 'assets/'

STATICFILES_DIRS = [ str(BASE_DIR.joinpath('static', 'assets')) ]

گام بعدی ایجاد نمای جنگو برای رندر کردن است index.html template که یک فایل قالب HTML است و به جای سیستم قالب پیش فرض جنگو با React قابل توسعه است.

# config/urls.py

from django.contrib import admin
from django.urls import path, re_path
from backend.views import React

urlpatterns = [
    path('admin/', admin.site.urls),

    # React
    re_path(r'^.*', React.as_view(), name='frontend'),
]

# backend/views.py

from django.views.generic import TemplateView

# React home page
class React(TemplateView):
    template_name = 'index.html'

در نهایت توصیه می شود مکان صحیح فایل های استاتیک را نیز در React تنظیم کنید. در زیر می توانید نحوه انجام این کار را مشاهده کنید.

// frontend/vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  // This ensures that when you run npm run build, Vite places the CSS and JS  files in the correct location that Django expects.

  build: {
    outDir: '../static',  // Output to Django's static folder
    assetsDir: 'assets',  // Put all static assets in an 'assets' directory
  },

})

3. سفارشی کردن صفحه خوش آمدگویی

من فایل ها را از src/ دایرکتوری به جز App.jsx App.css main.jsx. پس از آن می توانید فایل های ذکر شده را شخصی سازی کنید. صفحه خوش آمدگویی در مورد من یک صفحه ساده “Hello World” است که برای شروع برنامه وب من در حال حاضر کافی است.

// frontend/src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// frontend/src/App.jsx

import './App.css';

function App() {
  return (
    <div className="App">
     <h1> Hello World </h1>
    </div>
  );
}

export default App;

/* src/App.css */

body {
  background: #d7dded;
}

.App {
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  color: #0c1823;
}

پس از به‌روزرسانی فایل‌ها، برنامه React را بسازید.

npm run build

اگر با پیام هشدار بعدی مواجه شدید:

(!) outDir C:\DEV\blog\django-react\static داخل ریشه پروژه نیست و خالی نخواهد شد.
از –emptyOutDir برای لغو استفاده کنید.

فایل src/package.json را با به روز رسانی کنید "build": "vite build --emptyOutDir"

آخرین مرحله بازگشت به مسیر پروژه است:

cd ..

python manage.py runserver

باز کنید http://localhost:8000/ در مرورگر وب شما

با تشکر از توجه شما، امیدوارم این پست مفید بوده باشد! 🙂