# Django React Kit
A powerful Django package that enables server-side rendering (SSR) of React components with file-based routing, similar to Next.js but integrated seamlessly with Django.
## 🚀 Features
- **Server-Side Rendering (SSR)**: Render React components on the server for better SEO and performance
- **File-Based Routing**: Organize your React pages using a familiar file system structure
- **Django Integration**: Access Django ORM, authentication, and middleware from React components
- **Hot Module Replacement**: Fast development with HMR support
- **TypeScript Support**: Full TypeScript support for type-safe development
- **Easy Installation**: Install via PyPI and integrate with existing Django projects
## 📦 Installation
```bash
pip install django-react-kit
```
## 🛠️ Quick Start
### 1. Add to Django Settings
Add `django_react_kit` to your `INSTALLED_APPS`:
```python
# settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django_react_kit', # Add this
# ... your other apps
]
```
### 2. Configure URLs
Include the React Kit URLs in your main URL configuration:
```python
# urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
# ... your other URL patterns
path('', include('django_react_kit.urls')), # Add this last (catch-all)
]
```
### 3. Build React Components
```bash
python manage.py reactbuild
```
For development with hot module replacement:
```bash
python manage.py reactbuild --watch
```
### 4. Run Django Server
```bash
python manage.py runserver
```
Visit `http://127.0.0.1:8000/` to see your React-rendered Django app!
## 📁 File Structure
After installation, Django React Kit provides this structure:
```
django_react_kit/
├── frontend/
│ ├── app/
│ │ ├── page.tsx # Home page component
│ │ ├── layout.tsx # Root layout component
│ │ └── about/
│ │ └── page.tsx # About page component
│ ├── ssr.js # Server-side rendering script
│ ├── main.tsx # Client-side entry point
│ └── package.json # Frontend dependencies
├── templates/
│ └── django_react_kit/
│ └── index.html # Base HTML template
├── management/
│ └── commands/
│ └── reactbuild.py # Build management command
├── views.py # ReactView class
└── urls.py # URL routing
```
## 🎯 Creating Custom Views
Extend the `ReactView` to provide custom data to your React components:
```python
# views.py
from django_react_kit.views import ReactView
from .models import Post
class BlogView(ReactView):
def get_data(self, request):
posts = Post.objects.all()
return {
'posts': [
{
'id': post.id,
'title': post.title,
'content': post.content,
'created_at': post.created_at.isoformat(),
}
for post in posts
],
'user': {
'is_authenticated': request.user.is_authenticated,
'username': request.user.username if request.user.is_authenticated else None,
}
}
```
## 📄 Creating React Pages
Create new pages by adding files to the `frontend/app/` directory:
```tsx
// frontend/app/blog/page.tsx
import React from 'react';
interface BlogPageProps {
data?: {
posts: Array<{
id: number;
title: string;
content: string;
created_at: string;
}>;
user: {
is_authenticated: boolean;
username?: string;
};
};
}
const BlogPage: React.FC<BlogPageProps> = ({ data }) => {
return (
<div>
<h1>Blog Posts</h1>
{data?.posts?.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
<small>Published: {new Date(post.created_at).toLocaleDateString()}</small>
</article>
))}
</div>
);
};
export default BlogPage;
```
## ⚙️ Configuration
### Environment Variables
Set these in your Django settings or environment:
```python
# settings.py
# Node.js executable path (optional, defaults to 'node')
NODE_PATH = '/usr/local/bin/node'
# Frontend build directory (optional)
REACT_BUILD_DIR = BASE_DIR / 'django_react_kit' / 'frontend'
```
### Custom SSR Configuration
You can customize the SSR behavior by overriding methods in `ReactView`:
```python
from django_react_kit.views import ReactView
class CustomReactView(ReactView):
def get_ssr_timeout(self):
"""Override SSR timeout (default: 10 seconds)"""
return 15
def handle_ssr_error(self, error, request):
"""Custom error handling for SSR failures"""
if settings.DEBUG:
return HttpResponse(f"SSR Error: {error}", status=500)
# Fallback to client-side rendering in production
return render(request, 'django_react_kit/index.html', {
'rendered_content': '<div>Loading...</div>',
'initial_data': json.dumps(self.get_data(request)),
'path': request.path
})
```
## 🔧 Management Commands
### reactbuild
Build React components for production:
```bash
python manage.py reactbuild
```
**Options:**
- `--watch`: Enable watch mode for development
- `--production`: Build for production environment
## 🚀 Deployment
### Production Setup
1. Build the frontend for production:
```bash
python manage.py reactbuild --production
```
2. Ensure Node.js is available on your server
3. Configure your web server (nginx/Apache) to serve static files
4. Set appropriate Django settings:
```python
# settings.py (production)
DEBUG = False
ALLOWED_HOSTS = ['your-domain.com']
```
### Docker Integration
```dockerfile
# Dockerfile
FROM python:3.11
# Install Node.js
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
RUN apt-get install -y nodejs
# Install Python dependencies
COPY requirements.txt .
RUN pip install -r requirements.txt
# Copy project
COPY . /app
WORKDIR /app
# Build React components
RUN python manage.py reactbuild --production
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
```
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🆘 Support
- **Documentation**: [Read the full docs](https://django-react-kit.readthedocs.io/)
- **Issues**: [Report bugs or request features](https://github.com/django-react-kit/django-react-kit/issues)
- **Discussions**: [Join our community discussions](https://github.com/django-react-kit/django-react-kit/discussions)
## 🙏 Acknowledgments
- Inspired by Next.js file-based routing
- Built with Django and React
- Thanks to the Django and React communities
---
**Django React Kit** - Bringing modern React development to Django with SSR! 🎉
Raw data
{
"_id": null,
"home_page": "https://github.com/django-react-kit/django-react-kit",
"name": "django-react-kit",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "django react ssr server-side-rendering frontend",
"author": "Django React Kit Team",
"author_email": "hello@djangoreactkit.com",
"download_url": "https://files.pythonhosted.org/packages/0d/bf/6417d6b46f57561e372924336f7975270fac8140c9bd5fc53c5045ec7dd4/django_react_kit-1.0.2.tar.gz",
"platform": null,
"description": "# Django React Kit\r\n\r\nA powerful Django package that enables server-side rendering (SSR) of React components with file-based routing, similar to Next.js but integrated seamlessly with Django.\r\n\r\n## \ud83d\ude80 Features\r\n\r\n- **Server-Side Rendering (SSR)**: Render React components on the server for better SEO and performance\r\n- **File-Based Routing**: Organize your React pages using a familiar file system structure\r\n- **Django Integration**: Access Django ORM, authentication, and middleware from React components \r\n- **Hot Module Replacement**: Fast development with HMR support\r\n- **TypeScript Support**: Full TypeScript support for type-safe development\r\n- **Easy Installation**: Install via PyPI and integrate with existing Django projects\r\n\r\n## \ud83d\udce6 Installation\r\n\r\n```bash\r\npip install django-react-kit\r\n```\r\n\r\n## \ud83d\udee0\ufe0f Quick Start\r\n\r\n### 1. Add to Django Settings\r\n\r\nAdd `django_react_kit` to your `INSTALLED_APPS`:\r\n\r\n```python\r\n# settings.py\r\nINSTALLED_APPS = [\r\n 'django.contrib.admin',\r\n 'django.contrib.auth',\r\n 'django.contrib.contenttypes',\r\n 'django.contrib.sessions',\r\n 'django.contrib.messages',\r\n 'django.contrib.staticfiles',\r\n 'django_react_kit', # Add this\r\n # ... your other apps\r\n]\r\n```\r\n\r\n### 2. Configure URLs\r\n\r\nInclude the React Kit URLs in your main URL configuration:\r\n\r\n```python\r\n# urls.py\r\nfrom django.contrib import admin\r\nfrom django.urls import path, include\r\n\r\nurlpatterns = [\r\n path('admin/', admin.site.urls),\r\n # ... your other URL patterns\r\n path('', include('django_react_kit.urls')), # Add this last (catch-all)\r\n]\r\n```\r\n\r\n### 3. Build React Components\r\n\r\n```bash\r\npython manage.py reactbuild\r\n```\r\n\r\nFor development with hot module replacement:\r\n\r\n```bash\r\npython manage.py reactbuild --watch\r\n```\r\n\r\n### 4. Run Django Server\r\n\r\n```bash\r\npython manage.py runserver\r\n```\r\n\r\nVisit `http://127.0.0.1:8000/` to see your React-rendered Django app!\r\n\r\n## \ud83d\udcc1 File Structure\r\n\r\nAfter installation, Django React Kit provides this structure:\r\n\r\n```\r\ndjango_react_kit/\r\n\u251c\u2500\u2500 frontend/\r\n\u2502 \u251c\u2500\u2500 app/\r\n\u2502 \u2502 \u251c\u2500\u2500 page.tsx # Home page component\r\n\u2502 \u2502 \u251c\u2500\u2500 layout.tsx # Root layout component\r\n\u2502 \u2502 \u2514\u2500\u2500 about/\r\n\u2502 \u2502 \u2514\u2500\u2500 page.tsx # About page component\r\n\u2502 \u251c\u2500\u2500 ssr.js # Server-side rendering script\r\n\u2502 \u251c\u2500\u2500 main.tsx # Client-side entry point\r\n\u2502 \u2514\u2500\u2500 package.json # Frontend dependencies\r\n\u251c\u2500\u2500 templates/\r\n\u2502 \u2514\u2500\u2500 django_react_kit/\r\n\u2502 \u2514\u2500\u2500 index.html # Base HTML template\r\n\u251c\u2500\u2500 management/\r\n\u2502 \u2514\u2500\u2500 commands/\r\n\u2502 \u2514\u2500\u2500 reactbuild.py # Build management command\r\n\u251c\u2500\u2500 views.py # ReactView class\r\n\u2514\u2500\u2500 urls.py # URL routing\r\n```\r\n\r\n## \ud83c\udfaf Creating Custom Views\r\n\r\nExtend the `ReactView` to provide custom data to your React components:\r\n\r\n```python\r\n# views.py\r\nfrom django_react_kit.views import ReactView\r\nfrom .models import Post\r\n\r\nclass BlogView(ReactView):\r\n def get_data(self, request):\r\n posts = Post.objects.all()\r\n return {\r\n 'posts': [\r\n {\r\n 'id': post.id,\r\n 'title': post.title,\r\n 'content': post.content,\r\n 'created_at': post.created_at.isoformat(),\r\n }\r\n for post in posts\r\n ],\r\n 'user': {\r\n 'is_authenticated': request.user.is_authenticated,\r\n 'username': request.user.username if request.user.is_authenticated else None,\r\n }\r\n }\r\n```\r\n\r\n## \ud83d\udcc4 Creating React Pages\r\n\r\nCreate new pages by adding files to the `frontend/app/` directory:\r\n\r\n```tsx\r\n// frontend/app/blog/page.tsx\r\nimport React from 'react';\r\n\r\ninterface BlogPageProps {\r\n data?: {\r\n posts: Array<{\r\n id: number;\r\n title: string;\r\n content: string;\r\n created_at: string;\r\n }>;\r\n user: {\r\n is_authenticated: boolean;\r\n username?: string;\r\n };\r\n };\r\n}\r\n\r\nconst BlogPage: React.FC<BlogPageProps> = ({ data }) => {\r\n return (\r\n <div>\r\n <h1>Blog Posts</h1>\r\n {data?.posts?.map(post => (\r\n <article key={post.id}>\r\n <h2>{post.title}</h2>\r\n <p>{post.content}</p>\r\n <small>Published: {new Date(post.created_at).toLocaleDateString()}</small>\r\n </article>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nexport default BlogPage;\r\n```\r\n\r\n## \u2699\ufe0f Configuration\r\n\r\n### Environment Variables\r\n\r\nSet these in your Django settings or environment:\r\n\r\n```python\r\n# settings.py\r\n\r\n# Node.js executable path (optional, defaults to 'node')\r\nNODE_PATH = '/usr/local/bin/node'\r\n\r\n# Frontend build directory (optional)\r\nREACT_BUILD_DIR = BASE_DIR / 'django_react_kit' / 'frontend'\r\n```\r\n\r\n### Custom SSR Configuration\r\n\r\nYou can customize the SSR behavior by overriding methods in `ReactView`:\r\n\r\n```python\r\nfrom django_react_kit.views import ReactView\r\n\r\nclass CustomReactView(ReactView):\r\n def get_ssr_timeout(self):\r\n \"\"\"Override SSR timeout (default: 10 seconds)\"\"\"\r\n return 15\r\n \r\n def handle_ssr_error(self, error, request):\r\n \"\"\"Custom error handling for SSR failures\"\"\"\r\n if settings.DEBUG:\r\n return HttpResponse(f\"SSR Error: {error}\", status=500)\r\n # Fallback to client-side rendering in production\r\n return render(request, 'django_react_kit/index.html', {\r\n 'rendered_content': '<div>Loading...</div>',\r\n 'initial_data': json.dumps(self.get_data(request)),\r\n 'path': request.path\r\n })\r\n```\r\n\r\n## \ud83d\udd27 Management Commands\r\n\r\n### reactbuild\r\n\r\nBuild React components for production:\r\n\r\n```bash\r\npython manage.py reactbuild\r\n```\r\n\r\n**Options:**\r\n- `--watch`: Enable watch mode for development\r\n- `--production`: Build for production environment\r\n\r\n## \ud83d\ude80 Deployment\r\n\r\n### Production Setup\r\n\r\n1. Build the frontend for production:\r\n```bash\r\npython manage.py reactbuild --production\r\n```\r\n\r\n2. Ensure Node.js is available on your server\r\n\r\n3. Configure your web server (nginx/Apache) to serve static files\r\n\r\n4. Set appropriate Django settings:\r\n```python\r\n# settings.py (production)\r\nDEBUG = False\r\nALLOWED_HOSTS = ['your-domain.com']\r\n```\r\n\r\n### Docker Integration\r\n\r\n```dockerfile\r\n# Dockerfile\r\nFROM python:3.11\r\n\r\n# Install Node.js\r\nRUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash -\r\nRUN apt-get install -y nodejs\r\n\r\n# Install Python dependencies\r\nCOPY requirements.txt .\r\nRUN pip install -r requirements.txt\r\n\r\n# Copy project\r\nCOPY . /app\r\nWORKDIR /app\r\n\r\n# Build React components\r\nRUN python manage.py reactbuild --production\r\n\r\nCMD [\"python\", \"manage.py\", \"runserver\", \"0.0.0.0:8000\"]\r\n```\r\n\r\n## \ud83e\udd1d Contributing\r\n\r\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\r\n\r\n## \ud83d\udcc4 License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## \ud83c\udd98 Support\r\n\r\n- **Documentation**: [Read the full docs](https://django-react-kit.readthedocs.io/)\r\n- **Issues**: [Report bugs or request features](https://github.com/django-react-kit/django-react-kit/issues)\r\n- **Discussions**: [Join our community discussions](https://github.com/django-react-kit/django-react-kit/discussions)\r\n\r\n## \ud83d\ude4f Acknowledgments\r\n\r\n- Inspired by Next.js file-based routing\r\n- Built with Django and React\r\n- Thanks to the Django and React communities\r\n\r\n---\r\n\r\n**Django React Kit** - Bringing modern React development to Django with SSR! \ud83c\udf89\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Server-Side Rendering for React components in Django",
"version": "1.0.2",
"project_urls": {
"Bug Reports": "https://github.com/cyberwizdev/cyberwizdev/issues",
"Documentation": "https://django-react-kit.readthedocs.io/",
"Homepage": "https://github.com/django-react-kit/django-react-kit",
"Source": "https://github.com/cyberwizdev/django-react-kit"
},
"split_keywords": [
"django",
"react",
"ssr",
"server-side-rendering",
"frontend"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "338e0318d37a5cd118baa84a4d5a33324b185eb8295ea04d4752606e6fe04050",
"md5": "9c6fe9e56870cdb6d57ff19267f6ffec",
"sha256": "c1fc1b2153dda2738e49917e51e7176f3fb611f27bc07823bb04cf0dca7a6768"
},
"downloads": -1,
"filename": "django_react_kit-1.0.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "9c6fe9e56870cdb6d57ff19267f6ffec",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 16144,
"upload_time": "2025-08-23T03:31:03",
"upload_time_iso_8601": "2025-08-23T03:31:03.643496Z",
"url": "https://files.pythonhosted.org/packages/33/8e/0318d37a5cd118baa84a4d5a33324b185eb8295ea04d4752606e6fe04050/django_react_kit-1.0.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "0dbf6417d6b46f57561e372924336f7975270fac8140c9bd5fc53c5045ec7dd4",
"md5": "02d8af01ed4d0539f29708b5994e78b6",
"sha256": "45b84e5787c9e939deab7ce568e94f709c9af1ddc2b9a494c251bc69bc958fc9"
},
"downloads": -1,
"filename": "django_react_kit-1.0.2.tar.gz",
"has_sig": false,
"md5_digest": "02d8af01ed4d0539f29708b5994e78b6",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 16430,
"upload_time": "2025-08-23T03:31:05",
"upload_time_iso_8601": "2025-08-23T03:31:05.226222Z",
"url": "https://files.pythonhosted.org/packages/0d/bf/6417d6b46f57561e372924336f7975270fac8140c9bd5fc53c5045ec7dd4/django_react_kit-1.0.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-23 03:31:05",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "django-react-kit",
"github_project": "django-react-kit",
"github_not_found": true,
"lcname": "django-react-kit"
}
JSON
