互联网操作系统!Puter 是浏​​览器中的先进开源桌面环境,旨在功能丰富、速度极快且可高度扩展。它可用于构建远程桌面环境或用作云存储服务、远程服务器、Web 托管平台等的接口。

« 现场演示 »

入门

本地发展

git clone https://github.com/HeyPuter/puter
cd puter
npm install
npm start

这将在http://localhost:4000(或下一个可用端口)启动 Puter 。


使用 Docker

git clone https://github.com/HeyPuter/puter
cd puter
docker compose up


部署到生产环境

有关如何在生产中部署 Puter 的详细指南:

构建

npm run build

用法

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

<script type="text/javascript" src="./dist/gui.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function() {
        // Initialize the GUI. All options are optional!
        gui({
            // The origin of the app. This is the base URL of the GUI. 
            gui_origin: "https://puter.com",

            // The origin of the API. This is the base URL of the API endpoints that the GUI will call for all its operations.
            api_origin: "https://api.puter.com",

            // The domain under which user websites are hosted.
            hosting_domain: "puter.site",

            // The maximum length of file/directory names.
            max_item_name_length: 500,

            // If GUI has to enforce email verification before allowing user to publish a website.
            require_email_verification_to_publish_website: true,
        })
    });
</script>

完整生产示例

假设生产中的目录结构如下:

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

下面的文件index.html将加载 Puter 和所有必要的元标记、网站图标和品牌资产:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Puter</title>
    <meta name="author" content="Puter Technologies Inc.">
    <meta name="description" content="Puter is a privacy-first personal cloud to keep all your files, apps, and games in one private and secure place, accessible from anywhere at any time.">
    <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 is a privacy-first personal cloud to keep all your files, apps, and games in one private and secure place, accessible from anywhere at any time.">
    <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 is a privacy-first personal cloud to keep all your files, apps, and games in one private and secure place, accessible from anywhere at any time.">
    <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">
    <link rel="apple-touch-icon" sizes="72x72" href="./dist/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./dist/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./dist/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./dist/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./dist/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./dist/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./dist/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="./dist/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./dist/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./dist/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./dist/favicons/favicon-16x16.png">
    <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">

    <!-- Preload images when applicable -->
    <link rel="preload" as="image" href="./dist/images/wallpaper.webp">
</head>

<body>
    <!-- Load the GUI script -->
    <script type="text/javascript" src="./dist/gui.js"></script>    
    <!-- Initialize GUI when document is loaded -->
    <script type="text/javascript">
    window.addEventListener('load', function() {
        gui()
    });
    </script>
</body>

</html>

服务器设置

GUI 是单页应用程序 (SPA),作为最佳实践,根 ( /*) 下的任何路由都最好加载该index.html文件。然而,有些情况下我们希望为特定路由加载自定义页面:例如,该/privacy路由可能需要加载包含您的隐私策略且与 GUI 应用程序无关的页面。在这些情况下,只要随 GUI(即文件index.html)加载以下基本 GUI 路由,就可以加载自定义页面:

  • /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>,则应将其转义&lt;b&gt;,以便浏览器不会将其解释为 HTML 标签。

  • 动态添加文本到 HTML 页面时,请确保用空格替换所有换行符。

  • 一般来说,出于用户体验和搜索引擎优化的原因,请确保标签中填充了有关 URL 所代表状态的相关信息。例如,用户是在桌面上还是在应用程序上?


常问问题

Puter 的用例是什么?

电脑可以用作:

  • Dropbox、Google Drive、OneDrive 等的替代品,具有新颖的界面和强大的功能。

  • 服务器和工作站的远程桌面环境。

  • 用于构建和托管网站、网络应用程序和游戏的平台。

  • 一个友好的开源项目和社区,用于了解 Web 开发、云计算、分布式系统等!


为什么 Puter 不使用 React、Angular、Vue 等构建?

出于性能方面的考虑,Puter 是使用普通 JavaScript 和 jQuery 构建的。此外,我们希望避免复杂的抽象并尽可能保持对整个堆栈的控制。

部分灵感也来自我们最喜欢的一些非框架构建的项目:VSCodePhotopeaOnlyOffice


为什么选择 jQuery?

Puter 直接与 DOM 交互,而 jQuery 提供了一个优雅而强大的 API 来操作 DOM、处理事件等等。它还快速、成熟且经过实战考验。

开源地址

GitHub鉴赏官 - https://github.com/HeyPuter/puter

开源是一种精神,致敬屏幕背后的你!


Q.E.D.

  • reword 您的打赏,就是俺创作的动力