kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-06-10 23:39:14 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
1259bda76316ffcaad7e71aac258fb00ade9d34d
create-react-app/docs/deployment.html
Dan Abramov 1259bda763 Deploy website 
Deploy website version based on fbfa21621a
2018-11-05 15:33:05 +00:00

340 lines
58 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Deployment · Create React App</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.&lt;hash&gt;.js` are served with the contents of the `/static/js/main.&lt;hash&gt;.js` file."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Deployment · Create React App"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/create-react-app/index.html"/><meta property="og:description" content="`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.&lt;hash&gt;.js` are served with the contents of the `/static/js/main.&lt;hash&gt;.js` file."/><meta property="og:image" content="https://facebook.github.io/create-react-app/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://facebook.github.io/create-react-app/img/logo-og.png"/><link rel="shortcut icon" href="/create-react-app/img/favicon/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/create-react-app/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/create-react-app/"><img class="logo" src="/create-react-app/img/logo.svg" alt="Create React App"/><h2 class="headerTitleWithLogo">Create React App</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/create-react-app/docs/getting-started" target="_self">Getting Started</a></li><li class=""><a href="https://reactjs.org/community/support.html" target="_self">Help</a></li><li class=""><a href="https://www.github.com/facebook/create-react-app" target="_self">GitHub</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Deployment</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Welcome</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/documentation-intro">About Docs</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/folder-structure">Folder Structure</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/available-scripts">Available Scripts</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/supported-browsers-features">Supported Browsers and Features</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/updating-to-new-releases">Updating to New Releases</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Development</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/setting-up-your-editor">Editor Setup</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/developing-components-in-isolation">Developing Components in Isolation</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/analyzing-the-bundle-size">Analyzing Bundle Size</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/using-https-in-development">HTTPS in Development</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Styles and Assets</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-stylesheet">Adding Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-css-modules-stylesheet">Adding CSS Modules</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-sass-stylesheet">Adding Sass Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/post-processing-css">Post-Processing CSS</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-images-fonts-and-files">Adding Images, Fonts, and Files</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/using-the-public-folder">Using the Public Folder</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/code-splitting">Code Splitting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Building your App</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/installing-a-dependency">Installing a Dependency</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/importing-a-component">Importing a Component</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/using-global-variables">Using Global Variables</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-bootstrap">Adding Bootstrap</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-flow">Adding Flow</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-typescript">Adding TypeScript</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-relay">Adding Relay</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-router">Adding a Router</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-custom-environment-variables">Environment Variables</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/making-a-progressive-web-app">Making a Progressive Web App</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Testing</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/running-tests">Running Tests</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/debugging-tests">Debugging Tests</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Back-End Integration</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/proxying-api-requests-in-development">Proxying in Development</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/fetching-data-with-ajax-requests">Fetching Data</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/integrating-with-an-api-backend">Integrating with an API</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/title-and-meta-tags">Title &amp; Meta Tags</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Deployment</h3><ul><li class="navListItem navListItemActive"><a class="navItem" href="/create-react-app/docs/deployment">Deployment</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced Usage</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/can-i-use-decorators">Can I Use Decorators?</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/pre-rendering-into-static-html-files">Pre-Rendering Static HTML</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/advanced-configuration">Advanced Configuration</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/alternatives-to-ejecting">Alternatives to Ejecting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Support</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/troubleshooting">Troubleshooting</a></li></ul></div></div></section></div><script>
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docMainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/create-react-app/edit/master/docusaurus/docs/deployment.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Deployment</h1></header><article><div><span><p><code>npm run build</code> creates a <code>build</code> directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served <code>index.html</code>, and requests to static paths like <code>/static/js/main.&lt;hash&gt;.js</code> are served with the contents of the <code>/static/js/main.&lt;hash&gt;.js</code> file.</p>
<h2><a class="anchor" aria-hidden="true" id="static-server"></a><a href="#static-server" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Server</h2>
<p>For environments using <a href="https://nodejs.org/">Node</a>, the easiest way to handle this would be to install <a href="https://github.com/zeit/serve">serve</a> and let it handle the rest:</p>
<pre><code class="hljs css language-sh">npm install -g serve
serve -s build
</code></pre>
<p>The last command shown above will serve your static site on the port <strong>5000</strong>. Like many of <a href="https://github.com/zeit/serve">serve</a>’s internal settings, the port can be adjusted using the <code>-p</code> or <code>--port</code> flags.</p>
<p>Run this command to get a full list of the options available:</p>
<pre><code class="hljs css language-sh">serve -h
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="other-solutions"></a><a href="#other-solutions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other Solutions</h2>
<p>You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one.</p>
<p>Here’s a programmatic example using <a href="https://nodejs.org/">Node</a> and <a href="http://expressjs.com/">Express</a>:</p>
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);
<span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
<span class="hljs-keyword">const</span> app = express();
app.use(express.static(path.join(__dirname, <span class="hljs-string">'build'</span>)));
app.get(<span class="hljs-string">'/'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req, res</span>) </span>{
res.sendFile(path.join(__dirname, <span class="hljs-string">'build'</span>, <span class="hljs-string">'index.html'</span>));
});
app.listen(<span class="hljs-number">9000</span>);
</code></pre>
<p>The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node.</p>
<p>The <code>build</code> folder with static assets is the only output produced by Create React App.</p>
<p>However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like <code>/todos/42</code> in your single-page app.</p>
<h2><a class="anchor" aria-hidden="true" id="serving-apps-with-client-side-routing"></a><a href="#serving-apps-with-client-side-routing" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Serving Apps with Client-Side Routing</h2>
<p>If you use routers that use the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries"><code>pushState</code> history API</a> under the hood (for example, <a href="https://github.com/ReactTraining/react-router">React Router</a> with <code>browserHistory</code>), many static file servers will fail. For example, if you used React Router with a route for <code>/todos/42</code>, the development server will respond to <code>localhost:3000/todos/42</code> properly, but an Express serving a production build as above will not.</p>
<p>This is because when there is a fresh page load for a <code>/todos/42</code>, the server looks for the file <code>build/todos/42</code> and does not find it. The server needs to be configured to respond to a request to <code>/todos/42</code> by serving <code>index.html</code>. For example, we can amend our Express example above to serve <code>index.html</code> for any unknown paths:</p>
<pre><code class="hljs css language-diff"> app.use(express.static(path.join(__dirname, 'build')));
<span class="hljs-deletion">-app.get('/', function (req, res) {</span>
<span class="hljs-addition">+app.get('/*', function (req, res) {</span>
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
</code></pre>
<p>If you’re using <a href="https://httpd.apache.org/">Apache HTTP Server</a>, you need to create a <code>.htaccess</code> file in the <code>public</code> folder that looks like this:</p>
<pre><code class="hljs"> <span class="hljs-attribute"><span class="hljs-nomarkup">Options</span></span> -MultiViews
<span class="hljs-attribute"><span class="hljs-nomarkup">RewriteEngine</span></span> <span class="hljs-literal">On</span>
<span class="hljs-attribute"><span class="hljs-nomarkup">RewriteCond</span></span> <span class="hljs-variable">%{REQUEST_FILENAME}</span> !-f
<span class="hljs-attribute"><span class="hljs-nomarkup">RewriteRule</span></span> ^ index.html<span class="hljs-meta"> [QSA,L]</span>
</code></pre>
<p>It will get copied to the <code>build</code> folder when you run <code>npm run build</code>.</p>
<p>If you’re using <a href="http://tomcat.apache.org/">Apache Tomcat</a>, you need to follow <a href="https://stackoverflow.com/a/41249464/4878474">this Stack Overflow answer</a>.</p>
<p>Now requests to <code>/todos/42</code> will be handled correctly both in development and in production.</p>
<p>On a production build, and when you've <a href="/create-react-app/docs/making-a-progressive-web-app#why-opt-in">opted-in</a>,
a <a href="https://developers.google.com/web/fundamentals/primers/service-workers/">service worker</a> will automatically handle all navigation requests, like for
<code>/todos/42</code>, by serving the cached copy of your <code>index.html</code>. This
service worker navigation routing can be configured or disabled by
<a href="/create-react-app/docs/available-scripts#npm-run-eject"><code>eject</code>ing</a> and then modifying the
<a href="https://github.com/GoogleChrome/sw-precache#navigatefallback-string"><code>navigateFallback</code></a>
and <a href="https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp"><code>navigateFallbackWhitelist</code></a>
options of the <code>SWPreachePlugin</code> <a href="../config/webpack.config.prod.js">configuration</a>.</p>
<p>When users install your app to the homescreen of their device the default configuration will make a shortcut to <code>/index.html</code>. This may not work for client-side routers which expect the app to be served from <code>/</code>. Edit the web app manifest at <a href="public/manifest.json"><code>public/manifest.json</code></a> and change <code>start_url</code> to match the required URL scheme, for example:</p>
<pre><code class="hljs css language-js"> <span class="hljs-string">"start_url"</span>: <span class="hljs-string">"."</span>,
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="building-for-relative-paths"></a><a href="#building-for-relative-paths" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Building for Relative Paths</h2>
<p>By default, Create React App produces a build assuming your app is hosted at the server root.<br>
To override this, specify the <code>homepage</code> in your <code>package.json</code>, for example:</p>
<pre><code class="hljs css language-js"> <span class="hljs-string">"homepage"</span>: <span class="hljs-string">"http://mywebsite.com/relativepath"</span>,
</code></pre>
<p>This will let Create React App correctly infer the root path to use in the generated HTML file.</p>
<p><strong>Note</strong>: If you are using <code>react-router@^4</code>, you can root <code>&lt;Link&gt;</code>s using the <code>basename</code> prop on any <code>&lt;Router&gt;</code>.<br>
More information <a href="https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string">here</a>.<br>
<br>
For example:</p>
<pre><code class="hljs css language-js">&lt;BrowserRouter basename=<span class="hljs-string">"/calendar"</span>/&gt;
&lt;Link to="/today"/&gt; // renders &lt;a href="/calendar/today"&gt;
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="serving-the-same-build-from-different-paths"></a><a href="#serving-the-same-build-from-different-paths" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Serving the Same Build from Different Paths</h3>
<blockquote>
<p>Note: this feature is available with <code>react-scripts@0.9.0</code> and higher.</p>
</blockquote>
<p>If you are not using the HTML5 <code>pushState</code> history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your <code>package.json</code>:</p>
<pre><code class="hljs css language-js"> <span class="hljs-string">"homepage"</span>: <span class="hljs-string">"."</span>,
</code></pre>
<p>This will make sure that all the asset paths are relative to <code>index.html</code>. You will then be able to move your app from <code>http://mywebsite.com</code> to <code>http://mywebsite.com/relativepath</code> or even <code>http://mywebsite.com/relative/path</code> without having to rebuild it.</p>
<h2><a class="anchor" aria-hidden="true" id="customizing-environment-variables-for-arbitrary-build-environments"></a><a href="#customizing-environment-variables-for-arbitrary-build-environments" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Customizing Environment Variables for Arbitrary Build Environments</h2>
<p>You can create an arbitrary build environment by creating a custom <code>.env</code> file and loading it using <a href="https://www.npmjs.com/package/env-cmd">env-cmd</a>.</p>
<p>For example, to create a build environment for a staging environment:</p>
<ol>
<li>Create a file called <code>.env.staging</code></li>
<li>Set environment variables as you would any other <code>.env</code> file (e.g. <code>REACT_APP_API_URL=http://api-staging.example.com</code>)</li>
<li>Install <a href="https://www.npmjs.com/package/env-cmd">env-cmd</a>
<pre><code class="hljs css language-sh">$ npm install env-cmd --save
$ <span class="hljs-comment"># or</span>
$ yarn add env-cmd
</code></pre></li>
<li>Add a new script to your <code>package.json</code>, building with your new environment:
<pre><code class="hljs css language-json">{
<span class="hljs-attr">"scripts"</span>: {
<span class="hljs-attr">"build:staging"</span>: <span class="hljs-string">"env-cmd .env.staging npm run build"</span>
}
}
</code></pre></li>
</ol>
<p>Now you can run <code>npm run build:staging</code> to build with the staging environment config.
You can specify other environments in the same way.</p>
<p>Variables in <code>.env.production</code> will be used as fallback because <code>NODE_ENV</code> will always be set to <code>production</code> for a build.</p>
<h2><a class="anchor" aria-hidden="true" id="azure-https-azuremicrosoftcom"></a><a href="#azure-https-azuremicrosoftcom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://azure.microsoft.com/">Azure</a></h2>
<p>See <a href="https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321">this</a> blog post on how to deploy your React app to Microsoft Azure.</p>
<p>See <a href="https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg">this</a> blog post or <a href="https://github.com/ulrikaugustsson/azure-appservice-static">this</a> repo for a way to use automatic deployment to Azure App Service.</p>
<h2><a class="anchor" aria-hidden="true" id="firebase-https-firebasegooglecom"></a><a href="#firebase-https-firebasegooglecom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://firebase.google.com/">Firebase</a></h2>
<p>Install the Firebase CLI if you haven’t already by running <code>npm install -g firebase-tools</code>. Sign up for a <a href="https://console.firebase.google.com/">Firebase account</a> and create a new project. Run <code>firebase login</code> and login with your previous created Firebase account.</p>
<p>Then run the <code>firebase init</code> command from your project’s root. You need to choose the <strong>Hosting: Configure and deploy Firebase Hosting sites</strong> and choose the Firebase project you created in the previous step. You will need to agree with <code>database.rules.json</code> being created, choose <code>build</code> as the public directory, and also agree to <strong>Configure as a single-page app</strong> by replying with <code>y</code>.</p>
<pre><code class="hljs css language-sh"> === Project Setup
First, <span class="hljs-built_in">let</span><span class="hljs-string">'s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'</span>ll just <span class="hljs-built_in">set</span> up a default project.
? What Firebase project <span class="hljs-keyword">do</span> you want to associate as default? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be <span class="hljs-built_in">read</span> from and written to.
? What file should be used <span class="hljs-keyword">for</span> Database Rules? database.rules.json
✔ Database Rules <span class="hljs-keyword">for</span> example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process <span class="hljs-keyword">for</span> your assets, use your build<span class="hljs-string">'s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
</span></code></pre>
<p>IMPORTANT: you need to set proper HTTP caching headers for <code>service-worker.js</code> file in <code>firebase.json</code> file or you will not be able to see changes after first deployment (<a href="https://github.com/facebook/create-react-app/issues/2440">issue #2440</a>). It should be added inside <code>&quot;hosting&quot;</code> key like next:</p>
<pre><code class="hljs">{
<span class="hljs-string">"hosting"</span>: {
...
<span class="hljs-string">"headers"</span>: [
{<span class="hljs-string">"source"</span>: <span class="hljs-string">"/service-worker.js"</span>, <span class="hljs-string">"headers"</span>: [{<span class="hljs-string">"key"</span>: <span class="hljs-string">"Cache-Control"</span>, <span class="hljs-string">"value"</span>: <span class="hljs-string">"no-cache"</span>}]}
]
...
</code></pre>
<p>Now, after you create a production build with <code>npm run build</code>, you can deploy it by running <code>firebase deploy</code>.</p>
<pre><code class="hljs css language-sh"> === Deploying to <span class="hljs-string">'example-app-fd690'</span>...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory <span class="hljs-keyword">for</span> upload...
Uploading: [============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.com
</code></pre>
<p>For more information see <a href="https://firebase.google.com/docs/hosting">Firebase Hosting</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="github-pages-https-pagesgithubcom"></a><a href="#github-pages-https-pagesgithubcom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://pages.github.com/">GitHub Pages</a></h2>
<blockquote>
<p>Note: this feature is available with <code>react-scripts@0.2.0</code> and higher.</p>
</blockquote>
<h3><a class="anchor" aria-hidden="true" id="step-1-add-homepage-to-packagejson"></a><a href="#step-1-add-homepage-to-packagejson" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 1: Add <code>homepage</code> to <code>package.json</code></h3>
<p><strong>The step below is important!</strong><br>
<strong>If you skip it, your app will not deploy correctly.</strong></p>
<p>Open your <code>package.json</code> and add a <code>homepage</code> field for your project:</p>
<pre><code class="hljs css language-json"> "homepage": "https://myusername.github.io/my-app",
</code></pre>
<p>or for a GitHub user page:</p>
<pre><code class="hljs css language-json"> "homepage": "https://myusername.github.io",
</code></pre>
<p>or for a custom domain page:</p>
<pre><code class="hljs css language-json"> "homepage": "https://mywebsite.com",
</code></pre>
<p>Create React App uses the <code>homepage</code> field to determine the root URL in the built HTML file.</p>
<h3><a class="anchor" aria-hidden="true" id="step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson"></a><a href="#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 2: Install <code>gh-pages</code> and add <code>deploy</code> to <code>scripts</code> in <code>package.json</code></h3>
<p>Now, whenever you run <code>npm run build</code>, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.</p>
<p>To publish it at <a href="https://myusername.github.io/my-app">https://myusername.github.io/my-app</a>, run:</p>
<pre><code class="hljs css language-sh">npm install --save gh-pages
</code></pre>
<p>Alternatively you may use <code>yarn</code>:</p>
<pre><code class="hljs css language-sh">yarn add gh-pages
</code></pre>
<p>Add the following scripts in your <code>package.json</code>:</p>
<pre><code class="hljs css language-diff"> "scripts": {
<span class="hljs-addition">+ "predeploy": "npm run build",</span>
<span class="hljs-addition">+ "deploy": "gh-pages -d build",</span>
"start": "react-scripts start",
"build": "react-scripts build",
</code></pre>
<p>The <code>predeploy</code> script will run automatically before <code>deploy</code> is run.</p>
<p>If you are deploying to a GitHub user page instead of a project page you'll need to make two
additional modifications:</p>
<ol>
<li>First, change your repository's source branch to be any branch other than <strong>master</strong>.</li>
<li>Additionally, tweak your <code>package.json</code> scripts to push deployments to <strong>master</strong>:</li>
</ol>
<pre><code class="hljs css language-diff"> "scripts": {
"predeploy": "npm run build",
<span class="hljs-deletion">- "deploy": "gh-pages -d build",</span>
<span class="hljs-addition">+ "deploy": "gh-pages -b master -d build",</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="step-3-deploy-the-site-by-running-npm-run-deploy"></a><a href="#step-3-deploy-the-site-by-running-npm-run-deploy" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 3: Deploy the site by running <code>npm run deploy</code></h3>
<p>Then run:</p>
<pre><code class="hljs css language-sh">npm run deploy
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="step-4-ensure-your-project-s-settings-use-gh-pages"></a><a href="#step-4-ensure-your-project-s-settings-use-gh-pages" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 4: Ensure your project’s settings use <code>gh-pages</code></h3>
<p>Finally, make sure <strong>GitHub Pages</strong> option in your GitHub project settings is set to use the <code>gh-pages</code> branch:</p>
<p><img src="http://i.imgur.com/HUjEr9l.png" width="500" alt="gh-pages branch setting"></p>
<h3><a class="anchor" aria-hidden="true" id="step-5-optionally-configure-the-domain"></a><a href="#step-5-optionally-configure-the-domain" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 5: Optionally, configure the domain</h3>
<p>You can configure a custom domain with GitHub Pages by adding a <code>CNAME</code> file to the <code>public/</code> folder.</p>
<p>Your CNAME file should look like this:</p>
<pre><code class="hljs">mywebsite<span class="hljs-selector-class">.com</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="notes-on-client-side-routing"></a><a href="#notes-on-client-side-routing" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Notes on client-side routing</h3>
<p>GitHub Pages doesn’t support routers that use the HTML5 <code>pushState</code> history API under the hood (for example, React Router using <code>browserHistory</code>). This is because when there is a fresh page load for a url like <code>http://user.github.io/todomvc/todos/42</code>, where <code>/todos/42</code> is a frontend route, the GitHub Pages server returns 404 because it knows nothing of <code>/todos/42</code>. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:</p>
<ul>
<li>You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to <code>hashHistory</code> for this effect, but the URL will be longer and more verbose (for example, <code>http://user.github.io/todomvc/#/todos/42?_k=yknaj</code>). <a href="https://reacttraining.com/react-router/web/api/Router">Read more</a> about different history implementations in React Router.</li>
<li>Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your <code>index.html</code> page with a special redirect parameter. You would need to add a <code>404.html</code> file with the redirection code to the <code>build</code> folder before deploying your project, and you’ll need to add code handling the redirect parameter to <code>index.html</code>. You can find a detailed explanation of this technique <a href="https://github.com/rafrex/spa-github-pages">in this guide</a>.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
<h4><a class="anchor" aria-hidden="true" id="dev-tty-no-such-a-device-or-address"></a><a href="#dev-tty-no-such-a-device-or-address" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>&quot;/dev/tty: No such a device or address&quot;</h4>
<p>If, when deploying, you get <code>/dev/tty: No such a device or address</code> or a similar error, try the following:</p>
<ol>
<li>Create a new <a href="https://github.com/settings/tokens">Personal Access Token</a></li>
<li><code>git remote set-url origin https://&lt;user&gt;:&lt;token&gt;@github.com/&lt;user&gt;/&lt;repo&gt;</code> .</li>
<li>Try <code>npm run deploy</code> again</li>
</ol>
<h4><a class="anchor" aria-hidden="true" id="cannot-read-property-email-of-null"></a><a href="#cannot-read-property-email-of-null" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>&quot;Cannot read property 'email' of null&quot;</h4>
<p>If, when deploying, you get <code>Cannot read property 'email' of null</code>, try the following:</p>
<ol>
<li><code>git config --global user.name '&lt;your_name&gt;'</code></li>
<li><code>git config --global user.email '&lt;your_email&gt;'</code></li>
<li>Try <code>npm run deploy</code> again</li>
</ol>
<h2><a class="anchor" aria-hidden="true" id="heroku-https-wwwherokucom"></a><a href="#heroku-https-wwwherokucom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://www.heroku.com/">Heroku</a></h2>
<p>Use the <a href="https://github.com/mars/create-react-app-buildpack">Heroku Buildpack for Create React App</a>.<br>
You can find instructions in <a href="https://blog.heroku.com/deploying-react-with-zero-configuration">Deploying React with Zero Configuration</a>.</p>
<h3><a class="anchor" aria-hidden="true" id="resolving-heroku-deployment-errors"></a><a href="#resolving-heroku-deployment-errors" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Resolving Heroku Deployment Errors</h3>
<p>Sometimes <code>npm run build</code> works locally but fails during deploy via Heroku. Following are the most common cases.</p>
<h4><a class="anchor" aria-hidden="true" id="module-not-found-error-cannot-resolve-file-or-directory"></a><a href="#module-not-found-error-cannot-resolve-file-or-directory" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>&quot;Module not found: Error: Cannot resolve 'file' or 'directory'&quot;</h4>
<p>If you get something like this:</p>
<pre><code class="hljs"><span class="hljs-string">remote:</span> Failed to create a production build. <span class="hljs-string">Reason:</span>
<span class="hljs-string">remote:</span> Module not <span class="hljs-string">found:</span> <span class="hljs-string">Error:</span> Cannot resolve <span class="hljs-string">'file'</span> or <span class="hljs-string">'directory'</span>
MyDirectory <span class="hljs-keyword">in</span> <span class="hljs-regexp">/tmp/</span>build_1234/src
</code></pre>
<p>It means you need to ensure that the lettercase of the file or directory you <code>import</code> matches the one you see on your filesystem or on GitHub.</p>
<p>This is important because Linux (the operating system used by Heroku) is case sensitive. So <code>MyDirectory</code> and <code>mydirectory</code> are two distinct directories and thus, even though the project builds locally, the difference in case breaks the <code>import</code> statements on Heroku remotes.</p>
<h4><a class="anchor" aria-hidden="true" id="could-not-find-a-required-file"></a><a href="#could-not-find-a-required-file" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>&quot;Could not find a required file.&quot;</h4>
<p>If you exclude or ignore necessary files from the package you will see a error similar this one:</p>
<pre><code class="hljs"><span class="hljs-comment">remote: Could not find a required file.</span>
<span class="hljs-comment">remote: Name: `index.html`</span>
<span class="hljs-comment">remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public</span>
<span class="hljs-comment">remote:</span>
<span class="hljs-comment">remote: npm ERR! Linux 3.13.0-105-generic</span>
<span class="hljs-comment">remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"</span>
</code></pre>
<p>In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local <code>.gitignore</code> or <code>~/.gitignore_global</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="netlify-https-wwwnetlifycom"></a><a href="#netlify-https-wwwnetlifycom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://www.netlify.com/">Netlify</a></h2>
<p><strong>To do a manual deploy to Netlify’s CDN:</strong></p>
<pre><code class="hljs css language-sh">npm install netlify-cli -g
netlify deploy
</code></pre>
<p>Choose <code>build</code> as the path to deploy.</p>
<p><strong>To setup continuous delivery:</strong></p>
<p>With this setup Netlify will build and deploy when you push to git or open a pull request:</p>
<ol>
<li><a href="https://app.netlify.com/signup">Start a new netlify project</a></li>
<li>Pick your Git hosting service and select your repository</li>
<li>Click <code>Build your site</code></li>
</ol>
<p><strong>Support for client-side routing:</strong></p>
<p>To support <code>pushState</code>, make sure to create a <code>public/_redirects</code> file with the following rewrite rules:</p>
<pre><code class="hljs"><span class="hljs-regexp">/* /i</span>ndex.html <span class="hljs-number">200</span>
</code></pre>
<p>When you build the project, Create React App will place the <code>public</code> folder contents into the build output.</p>
<h2><a class="anchor" aria-hidden="true" id="now-https-zeitco-now"></a><a href="#now-https-zeitco-now" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://zeit.co/now">Now</a></h2>
<p>Now offers a zero-configuration single-command deployment. You can use <code>now</code> to deploy your app for free.</p>
<ol>
<li><p>Install the <code>now</code> command-line tool either via the recommended <a href="https://zeit.co/download">desktop tool</a> or via node with <code>npm install -g now</code>.</p></li>
<li><p>Build your app by running <code>npm run build</code>.</p></li>
<li><p>Move into the build directory by running <code>cd build</code>.</p></li>
<li><p>Run <code>now --name your-project-name</code> from within the build directory. You will see a <strong>now.sh</strong> URL in your output like this:</p>
<pre><code class="hljs">&gt; Ready! <span class="hljs-string">https:</span><span class="hljs-comment">//your-project-name-tpspyhtdtk.now.sh (copied to clipboard)</span>
</code></pre>
<p>Paste that URL into your browser when the build is complete, and you will see your deployed app.</p></li>
</ol>
<p>Details are available in <a href="https://zeit.co/blog/unlimited-static">this article.</a></p>
<h2><a class="anchor" aria-hidden="true" id="s3-https-awsamazoncom-s3-and-cloudfront-https-awsamazoncom-cloudfront"></a><a href="#s3-https-awsamazoncom-s3-and-cloudfront-https-awsamazoncom-cloudfront" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://aws.amazon.com/s3">S3</a> and <a href="https://aws.amazon.com/cloudfront/">CloudFront</a></h2>
<p>See this <a href="https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af">blog post</a> on how to deploy your React app to Amazon Web Services S3 and CloudFront.</p>
<h2><a class="anchor" aria-hidden="true" id="surge-https-surgesh"></a><a href="#surge-https-surgesh" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://surge.sh/">Surge</a></h2>
<p>Install the Surge CLI if you haven’t already by running <code>npm install -g surge</code>. Run the <code>surge</code> command and log in you or create a new account.</p>
<p>When asked about the project path, make sure to specify the <code>build</code> folder, for example:</p>
<pre><code class="hljs css language-sh"> project path: /path/to/project/build
</code></pre>
<p>Note that in order to support routers that use HTML5 <code>pushState</code> API, you may want to rename the <code>index.html</code> in your build folder to <code>200.html</code> before deploying to Surge. This <a href="https://surge.sh/help/adding-a-200-page-for-client-side-routing">ensures that every URL falls back to that file</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="publishing-components-to-npm"></a><a href="#publishing-components-to-npm" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Publishing Components To npm</h2>
<p>Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like <a href="https://github.com/insin/nwb#react-components-and-libraries">nwb</a> to prepare it for publishing.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/create-react-app/docs/title-and-meta-tags"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/create-react-app/docs/can-i-use-decorators"><span>Next</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav docOnPageNav"><ul class="toc-headings"><li><a href="#static-server">Static Server</a></li><li><a href="#other-solutions">Other Solutions</a></li><li><a href="#serving-apps-with-client-side-routing">Serving Apps with Client-Side Routing</a></li><li><a href="#building-for-relative-paths">Building for Relative Paths</a><ul class="toc-headings"><li><a href="#serving-the-same-build-from-different-paths">Serving the Same Build from Different Paths</a></li></ul></li><li><a href="#customizing-environment-variables-for-arbitrary-build-environments">Customizing Environment Variables for Arbitrary Build Environments</a></li><li><a href="#azure-https-azuremicrosoftcom">Azure</a></li><li><a href="#firebase-https-firebasegooglecom">Firebase</a></li><li><a href="#github-pages-https-pagesgithubcom">GitHub Pages</a><ul class="toc-headings"><li><a href="#step-1-add-homepage-to-packagejson">Step 1: Add <code>homepage</code> to <code>package.json</code></a></li><li><a href="#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson">Step 2: Install <code>gh-pages</code> and add <code>deploy</code> to <code>scripts</code> in <code>package.json</code></a></li><li><a href="#step-3-deploy-the-site-by-running-npm-run-deploy">Step 3: Deploy the site by running <code>npm run deploy</code></a></li><li><a href="#step-4-ensure-your-project-s-settings-use-gh-pages">Step 4: Ensure your project’s settings use <code>gh-pages</code></a></li><li><a href="#step-5-optionally-configure-the-domain">Step 5: Optionally, configure the domain</a></li><li><a href="#notes-on-client-side-routing">Notes on client-side routing</a></li><li><a href="#troubleshooting">Troubleshooting</a></li></ul></li><li><a href="#heroku-https-wwwherokucom">Heroku</a><ul class="toc-headings"><li><a href="#resolving-heroku-deployment-errors">Resolving Heroku Deployment Errors</a></li></ul></li><li><a href="#netlify-https-wwwnetlifycom">Netlify</a></li><li><a href="#now-https-zeitco-now">Now</a></li><li><a href="#s3-https-awsamazoncom-s3-and-cloudfront-https-awsamazoncom-cloudfront">S3</a></li><li><a href="#surge-https-surgesh">Surge</a></li><li><a href="#publishing-components-to-npm">Publishing Components To npm</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/create-react-app/" class="nav-home"><img src="/create-react-app/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/create-react-app/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/react" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/create-react-app/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
var search = docsearch({
apiKey: '3be60f4f8ffc24c75da84857d6323791',
indexName: 'create-react-app',
inputSelector: '#search_input_react'
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink