Puter 在生产环境中

Puter 在生产环境中

构建

npm run build

使用

将在 dist 目录中构建 Puter。在您的 HTML 页面中包含生成的 ./dist/gui.js 文件，并在页面加载时调用 gui()：

<script type="text/javascript" src="./dist/gui.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function() {
        // 初始化 GUI。所有选项都是可选的！
        gui({
            // 应用程序的来源。这是 GUI 的基础 URL。
            gui_origin: "https://puter.com", 
            // API 的来源。这是 GUI 调用其所有操作的 API 端点的基础 URL。
            api_origin: "https://api.puter.com", 
            // 用户网站托管的域名。
            hosting_domain: "puter.site",
            // 文件/目录名称的最大长度。
            max_item_name_length: 500,
            // GUI 是否需要在允许用户发布网站之前强制执行电子邮件验证。
            require_email_verification_to_publish_website: true,
        })
    });
</script>

生产环境完整示例

假设生产环境中有以下目录结构：

.
├── dist/
│   ├── favicons/
│   ├── images/
│   ├── bundle.min.css
│   ├── bundle.min.js
│   ├── gui.js
│   └── ...
└── index.html

下面的 index.html 文件将加载 Puter 以及所有必要的元标签、favicons 和品牌资产：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Puter</title>
    <meta name="author" content="Puter Technologies Inc.">
    <meta name="description" content="Puter 是一个注重隐私的个人云，可以将您所有的文件、应用程序和游戏保存在一个私密且安全的地方，随时随地从任何地方访问。">
    <meta name="facebook-domain-verification" content="e29w3hjbnnnypf4kzk2cewcdaxym1y" />
    <link rel="canonical" href="https://puter.com"> 
    <!-- Meta meta tags -->
    <meta property="og:url" content="https://puter.com"> 
    <meta property="og:type" content="website">
    <meta property="og:title" content="Puter">
    <meta property="og:description" content="Puter 是一个注重隐私的个人云，可以将您所有的文件、应用程序和游戏保存在一个私密且安全的地方，随时随地从任何地方访问。">
    <meta property="og:image" content="./dist/images/screenshot.png">
    <!-- Twitter meta tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="puter.com">
    <meta property="twitter:url" content="https://puter.com"> 
    <meta name="twitter:title" content="Puter">
    <meta name="twitter:description" content="Puter 是一个注重隐私的个人云，可以将您所有的文件、应用程序和游戏保存在一个私密且安全的地方，随时随地从任何地方访问。">
    <meta name="twitter:image" content="./dist/images/screenshot.png">
    <!-- favicons -->
    <link rel="apple-touch-icon" sizes="57x57" href="./dist/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./dist/favicons/apple-icon-60x60.png">
    <!-- 其他 favicons ... -->
    <link rel="manifest" href="./dist/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="./dist/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- 当适用时预加载图片 -->
    <link rel="preload" as="image" href="./dist/images/wallpaper.webp">
</head>
<body>
    <!-- 加载 GUI 脚本 -->
    <script type="text/javascript" src="./dist/gui.js"></script>    
    <!-- 在文档加载时初始化 GUI -->
    <script type="text/javascript">
    window.addEventListener('load', function() {
        gui()
    });
    </script>
</body>
</html>

服务器设置

GUI 是一个单页应用程序 (SPA)，最佳实践是任何根路径下的路由 (/*) 应优先加载 index.html 文件。然而，在某些情况下，我们可能希望为特定路由加载自定义页面：例如，/privacy 路由可能需要加载一个包含您的隐私政策的页面，而与 GUI 应用程序无关。在这些情况下，只要以下基本 GUI 路由用 GUI 加载（即 index.html 文件）就可以加载自定义页面：

/app/*
/action/*

换句话说，将上述路由视为 Puter 的“保留”路由。

最佳实践

title 标签和元标签 (<title></title>, <meta property="og:title", <meta name="twitter:title", …) 应由服务器动态设置。例如，如果 URL 是应用程序的（例如 https://puter.com/app/editor）那么 title 标签和元标签应包含应用程序的标题而不是通用的 Puter 标题。
description 元标签 (<meta name="description", <meta property="og:description", <meta name="twitter:description", …) 应由服务器动态设置。例如，如果 URL 是应用程序的（例如 https://puter.com/app/editor）那么 description 元标签应包含应用程序的描述而不是通用的 Puter 描述。
确保动态添加到 HTML 页面的任何 HTML 代码都被转义。例如，如果应用程序的描述是 Puter is a <b>privacy-first</b> personal cloud to keep all your files, apps, and games in one private and secure place, accessible from anywhere at any time. 则 <b> 标签应转义为 <b>，以便浏览器不会将其解释为 HTML 标签。
确保在动态向 HTML 页面添加文本时将所有换行符替换为空格。
通常，出于 UX 和 SEO 的原因，请确保标签用有关 URL 所代表状态的相关信息填充。例如，用户是在桌面上还是在一个应用程序中？

Puter 基于 Web 的桌面操作系统

生产实践

Puter 在生产环境中

构建

使用

生产环境完整示例

服务器设置

最佳实践