mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-06-10 23:39:14 +08:00
399 lines
66 KiB
HTML
399 lines
66 KiB
HTML
<!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="<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. For more information see the <a href="/docs/production-build">production build</a> section.</p>
|
||
"/><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://create-react-app.dev/index.html"/><meta property="og:description" content="<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. For more information see the <a href="/docs/production-build">production build</a> section.</p>
|
||
"/><meta property="og:image" content="https://create-react-app.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://create-react-app.dev/img/logo-og.png"/><link rel="shortcut icon" href="/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><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/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="/docs/getting-started" target="_self">Docs</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 collapsible">Welcome<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/documentation-intro">About Docs</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Getting Started<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/folder-structure">Folder Structure</a></li><li class="navListItem"><a class="navItem" href="/docs/available-scripts">Available Scripts</a></li><li class="navListItem"><a class="navItem" href="/docs/supported-browsers-features">Supported Browsers and Features</a></li><li class="navListItem"><a class="navItem" href="/docs/updating-to-new-releases">Updating to New Releases</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Development<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/setting-up-your-editor">Editor Setup</a></li><li class="navListItem"><a class="navItem" href="/docs/developing-components-in-isolation">Developing Components in Isolation</a></li><li class="navListItem"><a class="navItem" href="/docs/analyzing-the-bundle-size">Analyzing Bundle Size</a></li><li class="navListItem"><a class="navItem" href="/docs/using-https-in-development">HTTPS in Development</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Styles and Assets<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/adding-a-stylesheet">Adding Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-css-modules-stylesheet">Adding CSS Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-sass-stylesheet">Adding Sass Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-css-reset">Adding CSS Reset</a></li><li class="navListItem"><a class="navItem" href="/docs/post-processing-css">Post-Processing CSS</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-images-fonts-and-files">Adding Images, Fonts, and Files</a></li><li class="navListItem"><a class="navItem" href="/docs/loading-graphql-files">Loading .graphql Files</a></li><li class="navListItem"><a class="navItem" href="/docs/using-the-public-folder">Using the Public Folder</a></li><li class="navListItem"><a class="navItem" href="/docs/code-splitting">Code Splitting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Building your App<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/installing-a-dependency">Installing a Dependency</a></li><li class="navListItem"><a class="navItem" href="/docs/importing-a-component">Importing a Component</a></li><li class="navListItem"><a class="navItem" href="/docs/using-global-variables">Using Global Variables</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-bootstrap">Adding Bootstrap</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-flow">Adding Flow</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-typescript">Adding TypeScript</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-relay">Adding Relay</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-router">Adding a Router</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-custom-environment-variables">Environment Variables</a></li><li class="navListItem"><a class="navItem" href="/docs/making-a-progressive-web-app">Making a Progressive Web App</a></li><li class="navListItem"><a class="navItem" href="/docs/production-build">Creating a Production Build</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Testing<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/running-tests">Running Tests</a></li><li class="navListItem"><a class="navItem" href="/docs/debugging-tests">Debugging Tests</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Back-End Integration<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/proxying-api-requests-in-development">Proxying in Development</a></li><li class="navListItem"><a class="navItem" href="/docs/fetching-data-with-ajax-requests">Fetching Data</a></li><li class="navListItem"><a class="navItem" href="/docs/integrating-with-an-api-backend">Integrating with an API</a></li><li class="navListItem"><a class="navItem" href="/docs/title-and-meta-tags">Title & Meta Tags</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Deployment<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem navListItemActive"><a class="navItem" href="/docs/deployment">Deployment</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Advanced Usage<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/can-i-use-decorators">Can I Use Decorators?</a></li><li class="navListItem"><a class="navItem" href="/docs/pre-rendering-into-static-html-files">Pre-Rendering Static HTML</a></li><li class="navListItem"><a class="navItem" href="/docs/advanced-configuration">Advanced Configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/alternatives-to-ejecting">Alternatives to Ejecting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Support<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
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"><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.<hash>.js</code> are served with the contents of the <code>/static/js/main.<hash>.js</code> file. For more information see the <a href="/docs/production-build">production build</a> section.</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>-l</code> or <code>--listen</code> flags:</p>
|
||
<pre><code class="hljs css language-sh">serve -s build -l 4000
|
||
</code></pre>
|
||
<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="https://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="https://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="/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="/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>SWPrecachePlugin</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><Link></code>s using the <code>basename</code> prop on any <code><Router></code>.<br>
|
||
More information <a href="https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string">here</a>.<br></p>
|
||
<p><br>
|
||
For example:</p>
|
||
<pre><code class="hljs css language-js"><BrowserRouter basename=<span class="hljs-string">"/calendar"</span>/>
|
||
<Link to="/today"/> // renders <a href="/calendar/today">
|
||
</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 -f .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="aws-amplify-http-consoleamplifyaws"></a><a href="#aws-amplify-http-consoleamplifyaws" 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="http://console.amplify.aws">AWS Amplify</a></h2>
|
||
<p>The AWS Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators) with serverless backends. The Amplify Console offers globally available CDNs, easy custom domain setup, feature branch deployments, and password protection.</p>
|
||
<ol>
|
||
<li>Login to the Amplify Console <a href="https://console.aws.amazon.com/amplify/home">here</a>.</li>
|
||
<li>Connect your Create React App repo and pick a branch. If you're looking for a Create React App+Amplify starter, try the <a href="https://github.com/swaminator/create-react-app-auth-amplify">create-react-app-auth-amplify starter</a> that demonstrates setting up auth in 10 minutes with Create React App.</li>
|
||
<li>The Amplify Console automatically detects the build settings. Choose Next.</li>
|
||
<li>Choose <em>Save and deploy</em>.</li>
|
||
</ol>
|
||
<p>If the build succeeds, the app is deployed and hosted on a global CDN with an amplifyapp.com domain. You can now continuously deploy changes to your frontend or backend. Continuous deployment allows developers to deploy updates to their frontend and backend on every code commit to their Git repository.</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>"hosting"</code> key like next:</p>
|
||
<pre><code class="hljs css language-json">{
|
||
"hosting": {
|
||
...
|
||
"headers": [
|
||
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
|
||
]
|
||
...
|
||
</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></p>
|
||
<p><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 one
|
||
additional modification:</p>
|
||
<ol>
|
||
<li>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-for-a-project-page-ensure-your-project-s-settings-use-gh-pages"></a><a href="#step-4-for-a-project-page-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: For a project page, 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="https://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>"/dev/tty: No such a device or address"</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://<user>:<token>@github.com/<user>/<repo></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>"Cannot read property 'email' of null"</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 '<your_name>'</code></li>
|
||
<li><code>git config --global user.email '<your_email>'</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>"Module not found: Error: Cannot resolve 'file' or 'directory'"</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>"Could not find a required file."</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="zeit-now-https-zeitco"></a><a href="#zeit-now-https-zeitco" 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">ZEIT Now</a></h2>
|
||
<p><a href="https://zeit.co">ZEIT Now</a> is a cloud platform for websites and serverless APIs, that you can use to deploy your Create React App projects to your personal domain (or a free <code>.now.sh</code> suffixed URL).</p>
|
||
<p>This guide will show you how to get started in a few quick steps:</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="step-1-installing-now-cli"></a><a href="#step-1-installing-now-cli" 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: Installing Now CLI</h3>
|
||
<p>To install their command-line interface with <a href="https://www.npmjs.com/package/now">npm</a>, run the following command:</p>
|
||
<pre><code class="hljs css language-shell">npm i -g now
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="step-2-deploying"></a><a href="#step-2-deploying" 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: Deploying</h3>
|
||
<p>You can deploy your application by running the following command in the root of the project directory:</p>
|
||
<pre><code class="hljs css language-shell">now
|
||
</code></pre>
|
||
<p><strong>Alternatively</strong>, you can also use their integration for <a href="https://zeit.co/github">GitHub</a> or <a href="https://zeit.co/gitlab">GitLab</a>.</p>
|
||
<p>That’s all!</p>
|
||
<p>Your site will now deploy, and you will receive a link similar to the following: <a href="https://react.now-examples.now.sh">https://react.now-examples.now.sh</a></p>
|
||
<p>Out of the box, you are preconfigured for client-side routing compatibility and appropriate default caching headers. This behaviour can be overwritten <a href="https://zeit.co/docs/v2/advanced/routes/">like this</a>.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="render-https-rendercom"></a><a href="#render-https-rendercom" 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://render.com">Render</a></h2>
|
||
<p>Render offers free <a href="https://render.com/docs/static-sites">static site</a> hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.</p>
|
||
<p>Deploy your app in just a few minutes by following the <a href="https://render.com/docs/deploy-create-react-app">Create React App deployment guide</a>.</p>
|
||
<p>Use invite code <code>cra</code> to sign up or use <a href="https://render.com/i/cra">this link</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="docLastUpdate"><em>Last updated on 8/8/2019 by Leo Lamprecht</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/title-and-meta-tags"><span class="arrow-prev">← </span><span>Title & Meta Tags</span></a><a class="docs-next button" href="/docs/can-i-use-decorators"><span>Can I Use Decorators?</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><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="#aws-amplify-http-consoleamplifyaws">AWS Amplify</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-for-a-project-page-ensure-your-project-s-settings-use-gh-pages">Step 4: For a project page, 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="#zeit-now-https-zeitco">ZEIT Now</a><ul class="toc-headings"><li><a href="#step-1-installing-now-cli">Step 1: Installing Now CLI</a></li><li><a href="#step-2-deploying">Step 2: Deploying</a></li></ul></li><li><a href="#render-https-rendercom">Render</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="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/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/create-react-app" 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="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3be60f4f8ffc24c75da84857d6323791',
|
||
indexName: 'create-react-app',
|
||
inputSelector: '#search_input_react'
|
||
});
|
||
</script></body></html> |