零配置部署 React
React
你想使用 [React](https://facebook.github.io/react/) 来构建应用吗？“[入门](https://facebook.github.io/react/docs/getting-started.html)”是很容易的，可是接下来呢？


React 是一个构建用户界面的库，而它只是组成一个应用的一部分。应用还有其他的部分——风格、路由器、npm 模块、ES6 代码、捆绑和更多——这就是为什么使用它们的开发者不断流失的原因。这被称为 [JavaScript 疲劳](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4)。尽管存在这种复杂性，但是使用 React 的用户依旧继续增长。


社区应对这一挑战的方法是共享[模版文件](https://github.com/search?q=react+boilerplate)。这些模版文件展示出开发者们架构选择的多样性。官方的“开始入门”似乎离一个实际可用的应用程序相去甚远。


![](/data/attachment/album/201610/02/182222bybyjg2sk3sm3q2k.png)


### 新的，零配置体验


受开发者来自 [Ember.js](http://emberjs.com/) 和 [Elm](http://elm-lang.org/) 的经验启发，Facebook 的人们想要提供一个简单、直接的方式。他们发明了一个[新的开发 React 应用的方法](https://github.com/facebookincubator/create-react-app) ：`create-react-app`。在初始的公开版发布的三个星期以来，它已经受到了极大的社区关注（超过 8000 个 GitHub 粉丝）和支持（许多的拉取请求）。


`create-react-app` 是不同于许多过去使用模板和开发启动工具包的尝试。它的目标是零配置的[惯例-优于-配置](http://rubyonrails.org/doctrine/#convention-over-configuration)，使开发者关注于他们的应用的不同之处。


零配置一个强大的附带影响是这个工具可以在后台逐步成型。零配置奠定了工具生态系统的基础，创造的自动化和喜悦的开发远远超越 React 本身。


### 将零配置部署到 Heroku 上


多亏了 create-react-app 中打下的零配置基础，零配置的目标看起来快要达到了。因为这些新的应用都使用一个公共的、默认的架构，构建的过程可以被自动化，同时可以使用智能的默认项来配置。因此，[我们创造这个社区构建包来体验在 Heroku 零配置的过程](https://github.com/mars/create-react-app-buildpack)。


#### 在两分钟内创造和发布 React 应用


你可以免费在 Heroku 上开始构建 React 应用。



```
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

```

[使用构建包文档](https://github.com/mars/create-react-app-buildpack#usage)亲自试试吧。


### 从零配置出发


create-react-app 非常的新（目前版本是 0.2），同时因为它的目标是简洁的开发者体验，更多高级的使用情景并不支持（或者肯定不会支持）。例如，它不支持服务端渲染或者自定义捆绑。


为了支持更好的控制，create-react-app 包括了 npm run eject 命令。Eject 将所有的工具（配置文件和 package.json 依赖库）解压到应用所在的路径，因此你可以按照你心中的想法定做。一旦被弹出，你做的改变或许有必要选择一个特定的用 Node.js 或静态的构建包来布署。总是通过一个分支/拉取请求来使类似的工程改变生效，因此这些改变可以轻易撤销。Heroku 的预览应用对测试发布的改变是完美的。


我们将会追踪 create-react-app 的进度，当它们可用时，同时适配构建包来支持更多的高级使用情况。发布万岁！




---


via: <https://blog.heroku.com/deploying-react-with-zero-configuration>


作者：[Mars Hall](https://blog.heroku.com/deploying-react-with-zero-configuration) 译者：[zky001](https://github.com/zky001) 校对：[wxy](https://github.com/wxy)


本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出


OK
So you want to build an app with [React](https://legacy.reactjs.org/)? ["Getting started"](https://legacy.reactjs.org/docs/getting-started.html) is easy… and then what?

React is a library for building user interfaces, which comprise only one part of an app. Deciding on all the other parts — styles, routers, npm modules, ES6 code, bundling and more — and then figuring out how to use them is a drain on developers. This has become known as [javascript fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4). Despite this complexity, usage of React continues to grow.

The community answers this challenge by sharing [boilerplates](https://github.com/search?q=react+boilerplate&type=repositories). These boilerplates reveal the profusion of architectural choices developers must make. That official "Getting Started" seems so far away from the reality of an operational app.

##
[New, Zero-configuration Experience](#new-zero-configuration-experience)

Inspired by the cohesive developer experience provided by [Ember.js](https://emberjs.com/) and [Elm](https://elm-lang.org/), the folks at Facebook wanted to provide an easy, opinionated way forward. They created [a new way to develop React apps](https://github.com/facebook/create-react-app), `create-react-app`

. In the three weeks following its initial public release, it received tremendous community awareness (over 8,000 GitHub stargazers) and support (dozens of pull requests). Those numbers are up over 101k GitHub stargazers and 450 pull requests in the 7+ years since that release.

`create-react-app`

is different from many past attempts with boilerplates and starter kits. It targets zero configuration [[convention-over-configuration](https://rubyonrails.org/doctrine#convention-over-configuration)], focusing the developer on what is interesting and different about their application.

A powerful side-effect of zero configuration is that the tools can now evolve in the background. Zero configuration lays the foundation for the tools ecosystem to create automation and delight developers far beyond React itself.

##
[Zero-configuration Deploy to Heroku](#zero-configuration-deploy-to-heroku)

Thanks to the zero-config foundation of `create-react-app`

, the idea of zero-config deployment seemed within reach. Since these new apps all share a common, implicit architecture, the build process can be automated and then served with intelligent defaults. So, we created [this community buildpack to experiment with no-configuration deployment to Heroku](https://github.com/mars/create-react-app-buildpack).

###
[Create and Deploy a React App in Two Minutes](#create-and-deploy-a-react-app-in-two-minutes)

You can get started building React apps on [Heroku](https://www.heroku.com/platform).

```
npx create-react-app my-app
cd my-app
heroku create -b https://github.com/mars/create-react-app-buildpack.git --stack heroku-20
git push heroku main
heroku open
```


Try it yourself [using the buildpack docs](https://github.com/mars/create-react-app-buildpack/tree/v9.0.1#usage).

Note: This community buildpack is deprecated, no longer being maintained, and is not supported on Heroku-22 or newer stacks. Please see the [Nginx buildpack readme for static sites](https://github.com/heroku/heroku-buildpack-nginx/blob/main/static.md) for information on how to transition a static site or single page web app over to Nginx via an Nginx buildpack.

Improved static site support is on our [public roadmap](https://github.com/orgs/heroku/projects/130/views/9?pane=issue&itemId=50585099), where you can get more details and share your feedback.

##
[Growing Up from Zero Config](#growing-up-from-zero-config)

`create-react-app`

was very new (version 0.2) at the time this was published and since its target is a crystal-clear developer experience, more advanced use cases are not supported. For example, it does not provide server-side rendering or customized bundles.

To support greater control, `create-react-app`

includes the command `npm run eject`

. Eject unpacks all the tooling (config files and package.json dependencies) into the app's directory, so you can customize to your heart's content. Once ejected, changes you make may necessitate switching to a custom deployment with Node.js and/or static buildpacks. Always perform such project changes through a branch / pull request, so they can be easily undone. Heroku's [Review Apps](https://devcenter.heroku.com/articles/github-integration-review-apps) are perfect for testing changes to the deployment.

Stay tuned for an upcoming blog post going over a Next.js and Remix deployment. Happy deploying!