[](https://res.cloudinary.com/practicaldev/image/fetch/s--w7vekApL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://images.ctfassets.net/fo9twyrwpveg/3toAvaEx2goY6KWwKqSQ6a/365366a812eb6b45da35b55aa8162e36/20180806_CodeSandbox_Netlify_Contentful.png)

设置开发机器可能是一个乏味的过程。我曾经在一家公司工作,在不到两天的时间内完成了我们正在开发的自定义商店系统的开发环境的设置是一项成就(公平地说,这是在 Vagrant 和 Docker 成为事物之前)。为什么会这样?

构建软件产品在很大程度上依赖于你最喜欢的编辑器或 IDE 等东西来提高生产力,它依赖于安装的依赖项,如数据库、shell 程序或服务器来实际运行和更新你的软件。这仍然是必需品,还是我们今天可以放弃所有这些并完全依赖云服务?

我最近发表了关于前端堆栈 2018的演讲,并了解了在不将单个文件放在计算机上的情况下您能走多远。 事实证明;您真的可以从当今使用强大在线服务的任何计算机上创建网站,使其可编辑,然后再部署它们(我是最近的静态网站生成器的忠实粉丝)。

CodeSandbox – 新的在线编辑器

不久前,我注意到 CodeSandbox 越来越多地用于 React 原型设计,当时人们开始在 Twitter 上共享具有特定 React 模式或最佳实践的沙箱。 “我们需要另一个在线编辑器吗?”是我的第一反应。

今年早些时候,我写了一篇关于如何在 React](https://www.contentful.com/blog/2018/01/23/how-to-write-reusable-sane-api-based-components/?utm_campaign=deploy-cloud-codesandbox&utm_medium=referral&utm_source=devto&utm_content=deploy-cloud-codesandbox&utm_term=)中使用渲染道具的文章[并决定尝试CodeSandbox。它不像我的本地编辑器(我使用的是 VSCode)——但它非常接近。

在 CodeSandbox 中,您可以从分叉 500,000 (!) 个可用用户沙箱之一开始,或者选择使用 React、Vue、Angular 和其他框架的入门模板从头开始。查看所有用户创建的沙箱,您会发现编辑器主要用于当今 React 生态系统中的快速原型设计。但是,这并不意味着您不能使用它在 React 生态系统内部或外部构建更复杂的东西。

完全在云中开始 JavaScript 开发

使用现代框架开始一个基于 JavaScript 的新项目非常乏味,而且与过去对初学者友好相去甚远。研究 React 的人发现这必须改变并提出create-react-app。这个项目可以帮助你在几分钟内引导并启动一个新的 React 项目,方法是移除所有配置并提供所有需要的默认值(#zeroconfig all the things 🎉)。

create-react-app 是 CodeSandbox 创建新 React 项目的基础。对于 Preact、Vue 和其他框架,可以使用类似的 CLI 工具,甚至还有一个没有大量框架依赖的“vanilla”启动模板,它使用Parcel(一个新的零配置捆绑器——太棒了,相信我!)给你所有你需要的自由。

当您决定走 React 路线并初始化一个新项目时,您将获得一个准备好投入 React 开发的代码库。

重要的编辑器功能,让您忘记您在在线编辑器中“只是”

cmd/ctrl+p 快速访问文件和命令

在进行 Web 开发时,我离不开一些东西——首先是CMD+p和CMD+Shift+p。这两个快捷方式让您可以通过快速且易于使用的模糊搜索跳转到任何文件或执行任何可用的命令。编程通常与生产力有关,这两个快捷键可帮助您在不离开键盘的情况下实现任何目标。

_ 依赖处理和自动安装 _

但是现在您处于云环境中,对吗?那么安装依赖项是如何工作的呢? CodeSandbox 提供了一个对话框,让您可以轻松地从 npm 中选择依赖项。当您使用此对话框安装软件包时,package.json将自动更新。甜的!

默认包含 Prettier

在 CodeSandbox 中开发时,Prettier默认开启,可配置,运行也非常流畅!

在单独的窗口中热重载

查看上面的屏幕截图,编辑器为您提供了浏览器内预览。很酷的是,您可以在单独的窗口中打开预览,这非常适合像我这样的两个显示器设置。这样,代码就在一台显示器上,我可以在另一台显示器上近乎实时地看到变化。

带有 TypeScript 类型定义的项目的自动完成

当我发现 VSCode 选择了 npm 包中包含的类型定义时,我最终决定使用 TypeScript。作为一名 JavaScript 开发人员,我非常习惯于没有很好的自动完成功能,但是看到我的编辑器选择 TypeScript 定义非常棒。看到 CodeSandbox 做同样的事情真是太好了!

GitHub 集成使 CodeSandbox 成为真正的工具

最后一个吸引我的功能是 GitHub 集成,它允许您在 CodeSandbox 中创建一个项目,将其推送到 GitHub,然后从 CodeSandbox 直接提交到 GitHub。很酷的东西!

唯一缺少的功能

一次查看多个文件的拆分视图模式是使其成为我日常开发应用程序的唯一缺失。让我们希望它很快就会到来! 🤞🏻

内容丰富——任何项目的内容基础设施

使用 CodeSandbox,您可以快速创建下一个 JavaScript 项目并将其推送到 GitHub。很多时候,当您进行网站开发时,这些项目是为那些不习惯编写代码的人构建的。

以朋友的快速单页投资组合网站为例。您如何实现这个项目,既省去了使用拉取请求更新内容的工作,又不用自己建立完整的内容管理系统?为此,您可以使用 Contentful 的内容基础架构。

借助 Contentful,您可以在几分钟内定义所需的数据模型,并使用 JSON API 获取数据。对于上面的示例,您需要一个具有图像、标题和段落的单独字段的实体。这种灵活性是 Contentful 的亮点——创建一个内容类型portfolio并定义三个所需的字段,而无需设置服务器或类似的东西。

您的非技术朋友现在可以对您正在构建的 JavaScript 应用程序进行内容更改,而无需编辑 JSON 文件或 React 代码。

稍后,您可以使用提供的JavaScript SDK来获取您朋友编辑的 Contentful 数据。

import React from "react";
import ReactDOM from "react-dom";
import { createClient } from "contentful";
import "./styles.css";

// create the SDK client with the needed credentials
// which you can get in the web app
const client = createClient({
  space: "...",
  accessToken: "..."
});

function Portfolio() { /* … */ }

class App extends React.Component {
  constructor() {
    super();
    this.state = { isLoading: true, portfolio: null };
    // fetch the entry of your portfolio entry type
    client
      .getEntries({
        content_type: "portfolio"
      })
      .then(({ items }) => {
        this.setState({ isLoading: false, portfolio: items[0] });
      });
  }

render() {
    return this.state.isLoading ? (
      <div>Loading</div>
    ) : (
      <div className="App">
        <Portfolio {...this.state.portfolio.fields} />
      </div>
    );
  }
}

进入全屏模式 退出全屏模式

当您查看上面的代码时,我最喜欢的一件事是您可以很容易地将内容条目与前端组件连接起来(<Portfolio {...this.state.portfolio.fields} />)。这种连接使 Contentful非常适合组件驱动的应用程序和站点。

Netlify——点击几下的静态部署工具

现在,您可以在 CodeSandbox 中编辑并连接到 Github 的代码,您可以通过 Contentful 编辑为应用程序提供支持的内容。最后一步是在某处部署此应用程序。

Netlify是一个相对较新的服务,专门用于静态部署。 Netlify 最酷的地方在于,它们还允许您定义构建脚本——可以说,它们是您的 CI 服务和主机。

要将站点部署到 Netlify,您可以从导入特定的 GitHub 存储库开始:

您接下来的步骤是定义一个构建命令和将存在静态文件的公共目录。在 create-react-app 的情况下,构建命令为npm run build,发布目录为build。提交这两个配置后,您的第一个部署将启动并运行,您将在 netlify.com 上获得一个唯一的子域.

在 Netlify 中导入 GitHub 存储库后,一件不太明显的事情是,这个过程还在 GitHub 上定义了 webhook。现在,每次您将新代码推送到 GitHub 时,Netlify 都会自动重新部署您的站点。魔法?魔法!

使用 webhook 连接所有部分

对于这个投资组合演示站点,不需要额外的 webhook 配置,因为 React 应用程序直接从浏览器中获取该数据。仅限客户端的应用程序有一个显着的缺点,即它们最初会显示一个加载微调器,直到它们获取所有需要的 API 数据。一种更高效的方法是在服务器上静态预渲染 React,然后在客户端 React 代码启动时执行称为hydration的操作。

静态预渲染方法意味着,每当您的朋友在 Contentful 中更新她的投资组合数据时,您都必须重新渲染生成的 HTML 文件并部署它们。在这种情况下,必须在 Contentful 中配置一个通知 Netlify 的额外 webhook。

通过更多的 webhook 配置,您可以设置完整的部署管道,无需任何本地安装和配置,无需加载微调器即可发送静态站点。

利用 Web 服务的强大功能避免重新发明轮子

总之,我很惊讶网络开发领域发生了如此大的变化。无服务器技术改变了我们的工作方式我们不再需要担心项目中可能需要的所有小部件。对于运行 Node.js 项目,我们可以使用Zeit,用于身份验证Auth0,以及用于高性能搜索体验Algolia。

Webhook 和无服务器功能使我能够以简单快捷的方式连接所有这些服务并在云中编写快速连接器。这非常令人兴奋,因为我现在可以专注于构建东西而不是设置东西......我什至可以在我们坐在朋友的阳台上时在他的计算机上创建和部署网站。