Django-React-TypeScript 开发指南

Django-React-TypeScript 开发指南

django-react-typescript This is a non-opinionated Django + React boilerplate built with great development experience and easy deployment in mind. 项目地址: https://gitcode.com/gh_mirrors/dj/django-react-typescript

本教程将引导您快速了解并运行 Django-React-TypeScript 这一强大的前后端分离项目模板。它基于 Django 5 和 React 18，专为提供良好的开发体验和便捷部署而设计。

1. 项目目录结构及介绍

项目采用了清晰的分层架构，确保了代码的组织性和可维护性。

• backend: 包含Django后端的所有代码，其中重要的子目录包括：
  • config: 项目的基本配置。
  • core: 核心应用逻辑。
  • api: 使用Django Rest Framework定义的API接口。
• frontend: 存放React前端应用的源码，使用TypeScript编写。关键文件如src/index.tsx是入口点。
• scripts: 含有项目构建和管理脚本。
• .env.example 和 .env: 示例环境变量文件和实际使用的环境变量文件。
• docker-compose.*, Dockerfile: 部署相关的配置文件。
• manage.py: Django命令行工具的入口文件。
• pyproject.toml, package.json, pnpm-lock.yaml: 分别管理Python依赖、Node.js依赖以及锁定版本的文件。

2. 项目的启动文件介绍

主要脚本文件：pnpm scripts

• pnpm run bootstrap: 在首次设置时运行，安装所有必要的前后端依赖。
• pnpm dev: 开发模式下启动项目，适用于非容器化数据库配置，启动后台和前端。
• pnpm dev:full: 启动包含数据库（通过Docker Compose）的完整开发环境，适合本地开发，同时也会启动pgAdmin。

对于后端，可以通过manage.py执行常规的Django命令，如迁移数据库(python manage.py migrate)或运行shell(python manage.py shell)。

3. 项目的配置文件介绍

环境配置：.env 文件

• 重要性: .env用于存储敏感信息如数据库凭证、CDN（如Cloudinary）的密钥等，不提交到版本控制中。
• 如何使用: 根据.env.example创建自己的.env文件，并填充相应的值。

Django配置：config/settings.py

• 概述: 包含Django项目的整体设置，如数据库连接、中间件、应用程序的注册等。
• 自定义: 开发者可以根据需求在此进行修改，例如添加新的第三方应用或调整静态文件服务方式。

前端构建配置：webpack.config.js (假设存在)

虽然没有直接提及Webpack配置文件，但一个典型的React项目会有一个这样的文件来定制打包过程。在本项目中，Webpack配置可能内置于TypeScript编译流程中或使用其他配置文件。

Docker配置：docker-compose.yml, Dockerfile

• 目的: 提供容器化的运行环境，简化部署。
• 使用: 允许开发者通过一行命令启动整个环境（数据库、应用服务器等），适合生产环境和需要高度隔离的开发环境。

---

遵循以上指南，您可以快速地配置并运行这个结合了Django强大后端与React高效前端的项目，无论是进行原型开发还是构建复杂的Web应用。记住，在部署前仔细检查和调整环境配置以符合生产环境的安全和性能标准。

django-react-typescript This is a non-opinionated Django + React boilerplate built with great development experience and easy deployment in mind. 项目地址: https://gitcode.com/gh_mirrors/dj/django-react-typescript