我将如何创建一个 Django + SvelteKit webapp？答案

【问题标题】：How would I go about creating a Django + SvelteKit webapp?我将如何创建一个 Django + SvelteKit webapp？
【发布时间】：2022-06-14 20:50:13
【问题描述】：

我已经获得了相当多的 Bootstrap 和 Django，但从未尝试过其他前端框架，如 Angular、React 等，最后想尝试 SvelteKit。所以我对这类东西真的很陌生，也很陌生。

目前我已经按照他们网站上的教程设置了我的 Django 项目和 SvelteKit 项目。

我的问题是我现在对如何结合 Django 和 SvelteKit 感到困惑。我是否只是在不同的端口上同时运行两个服务器并将来自 Django JSON API 的数据获取到我的 Svelte 前端，还是有某种方法可以解决这个问题？我想也许有一种方法可以让我的 Django 应用程序为我从 Svelte 服务器呈现 Svelte 文件。我现在真的很迷茫，所以如果有人可以帮助我或有一些资源我可以阅读以更熟悉这个主题，因为我没有在网上找到很多东西，那就太好了！

非常感谢！

【问题讨论】：

如果您使用 vanilla svelte 应用程序而不是 sveltekit，则可能会设置一个流程，您的 Django API 将尝试路由和处理请求，并且对于任何它不理解的东西都会提供苗条的应用程序而不是 400 代码。从那里，苗条的应用程序将尝试处理请求，如果它不理解，则呈现 404 页面。我还没有看到这样做，所以你必须自己研究如何。我只在 .NET 和 React 组合中看到过这种模式。

标签： django api svelte web-development-server sveltekit

【解决方案1】：

首先，了解 Svelte 和 SvelteKit 之间的区别。 SvelteKit 是一个前端+服务器的解决方案，是在香草Svelte 之上的一层。 SvelteKit 添加了路由和对服务器（更少）功能的支持。

如果您想使用 Django 进行所有服务器端处理，您应该只使用（vanilla）Svelte 编写您从 Django 提供的 html 调用的独立 Web 组件。如果您不使用任何额外的框架功能，则无需使用 SvelteKit。

如何write a web component with vanilla Svelte
如何write a web component with SvelteKit。

如果您只想在 Django 中编写您的 API 并通过 SvelteKit 执行其他所有操作，我会从不同的子域和/或端口同时运行 Django 和 SvelteKit 服务器。喜欢django.example.com 和kit.example.com 或example.com:8000 和example.com:3000。

SvelteKit 还提供了一个低级的handle() 钩子，可以绕过 SvelteKit，但通常还是使用 JS/node.js。我认为将请求从 SvelteKit 传递给 Django 会很棘手。

【讨论】：

+1 对此，还值得一提的是，您可以使用包含客户端路由和许多其他功能的 vanilla svelte 应用程序获得完整的 SPA 体验，并且在某些情况下从CDN 实际上可能更适合您的用户。 Sveltekit 所做的只是将人们常用的功能形式化并添加“包含电池”的服务器层。（但我仍然喜欢 sveltekit，我还在用它写 2 个副项目！）

【解决方案2】：

我发现自己有同样的问题，它并不完美，但我可以使用以下方法：

创建一个包含所有内容的目录，例如我的项目
在目录中创建您的 Django 项目，例如django-svelte，django-admin startproject django-svelte
从 my-project/django-svelte 创建一个应用程序来包含 svelte 应用程序，例如前端，python manage.py startapp frontend
在frontend里面创建两个子目录templates和static；在它们每个内部创建一个 frontend 目录。（最后应该有 frontend/templates/frontend 和 frontend/static/frontend）
在 my-project 内部初始化一个 svelte-kit 项目，例如客户，npm init svelte client
在 client 中安装所有软件包并添加 @sveltejs/adapter-static 和 npm install 和 npm i -D @sveltejs/adapter-static
将svelte.config.js的内容替换为：

import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        paths: { base: "/static/frontend" }, // Adjust according to where you collect static files and the name of the Django app 
        adapter: adapter({
            pages: '../django-svelte/frontend/templates/frontend', // Adjust according to the name of the Django app
            assets: '../django-svelte/frontend/static/frontend', // Adjust according to the name of the Django app
            fallback: null,
            precompress: false
        }),

        prerender: {
            // This can be false if you're using a fallback (i.e. SPA mode)
            default: true
        }
    }
};

这将在 frontend 应用程序中写入您的 HTML、JS 和 CSS 文件。

使用npm run build 创建一个构建
使用python manage.py collectstatic在Django中收集静态文件
使用python manage.py runserver 或其他服务器运行 Django

我相信还有更简单的方法 :-)

【讨论】：