mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-04-23 20:51:12 +08:00
Bumping all headings one level because we can now
This commit is contained in:
@@ -6,7 +6,7 @@ sidebar_label: Deployment
|
||||
|
||||
`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.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file.
|
||||
|
||||
### Static Server
|
||||
## Static Server
|
||||
|
||||
For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:
|
||||
|
||||
@@ -23,7 +23,7 @@ Run this command to get a full list of the options available:
|
||||
serve -h
|
||||
```
|
||||
|
||||
### Other Solutions
|
||||
## Other Solutions
|
||||
|
||||
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.
|
||||
|
||||
@@ -49,7 +49,7 @@ The `build` folder with static assets is the only output produced by Create Reac
|
||||
|
||||
However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app.
|
||||
|
||||
### Serving Apps with Client-Side Routing
|
||||
## Serving Apps with Client-Side Routing
|
||||
|
||||
If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
|
||||
|
||||
@@ -94,7 +94,7 @@ When users install your app to the homescreen of their device the default config
|
||||
"start_url": ".",
|
||||
```
|
||||
|
||||
### Building for Relative Paths
|
||||
## Building for Relative Paths
|
||||
|
||||
By default, Create React App produces a build assuming your app is hosted at the server root.<br>
|
||||
To override this, specify the `homepage` in your `package.json`, for example:
|
||||
@@ -115,7 +115,7 @@ For example:
|
||||
<Link to="/today"/> // renders <a href="/calendar/today">
|
||||
```
|
||||
|
||||
#### Serving the Same Build from Different Paths
|
||||
### Serving the Same Build from Different Paths
|
||||
|
||||
> Note: this feature is available with `react-scripts@0.9.0` and higher.
|
||||
|
||||
@@ -127,7 +127,7 @@ If you are not using the HTML5 `pushState` history API or not using client-side
|
||||
|
||||
This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it.
|
||||
|
||||
### Customizing Environment Variables for Arbitrary Build Environments
|
||||
## Customizing Environment Variables for Arbitrary Build Environments
|
||||
|
||||
You can create an arbitrary build environment by creating a custom `.env` file and loading it using [env-cmd](https://www.npmjs.com/package/env-cmd).
|
||||
|
||||
@@ -155,13 +155,13 @@ You can specify other environments in the same way.
|
||||
|
||||
Variables in `.env.production` will be used as fallback because `NODE_ENV` will always be set to `production` for a build.
|
||||
|
||||
### [Azure](https://azure.microsoft.com/)
|
||||
## [Azure](https://azure.microsoft.com/)
|
||||
|
||||
See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure.
|
||||
|
||||
See [this](https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg) blog post or [this](https://github.com/ulrikaugustsson/azure-appservice-static) repo for a way to use automatic deployment to Azure App Service.
|
||||
|
||||
### [Firebase](https://firebase.google.com/)
|
||||
## [Firebase](https://firebase.google.com/)
|
||||
|
||||
Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
|
||||
|
||||
@@ -234,11 +234,11 @@ Now, after you create a production build with `npm run build`, you can deploy it
|
||||
|
||||
For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup).
|
||||
|
||||
### [GitHub Pages](https://pages.github.com/)
|
||||
## [GitHub Pages](https://pages.github.com/)
|
||||
|
||||
> Note: this feature is available with `react-scripts@0.2.0` and higher.
|
||||
|
||||
#### Step 1: Add `homepage` to `package.json`
|
||||
### Step 1: Add `homepage` to `package.json`
|
||||
|
||||
**The step below is important!**<br>
|
||||
**If you skip it, your app will not deploy correctly.**
|
||||
@@ -263,7 +263,7 @@ or for a custom domain page:
|
||||
|
||||
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
|
||||
|
||||
#### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json`
|
||||
### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json`
|
||||
|
||||
Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
|
||||
|
||||
@@ -304,7 +304,7 @@ additional modifications:
|
||||
+ "deploy": "gh-pages -b master -d build",
|
||||
```
|
||||
|
||||
#### Step 3: Deploy the site by running `npm run deploy`
|
||||
### Step 3: Deploy the site by running `npm run deploy`
|
||||
|
||||
Then run:
|
||||
|
||||
@@ -312,13 +312,13 @@ Then run:
|
||||
npm run deploy
|
||||
```
|
||||
|
||||
#### Step 4: Ensure your project’s settings use `gh-pages`
|
||||
### Step 4: Ensure your project’s settings use `gh-pages`
|
||||
|
||||
Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch:
|
||||
|
||||
<img src="http://i.imgur.com/HUjEr9l.png" width="500" alt="gh-pages branch setting">
|
||||
|
||||
#### Step 5: Optionally, configure the domain
|
||||
### Step 5: Optionally, configure the domain
|
||||
|
||||
You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
|
||||
|
||||
@@ -328,16 +328,16 @@ Your CNAME file should look like this:
|
||||
mywebsite.com
|
||||
```
|
||||
|
||||
#### Notes on client-side routing
|
||||
### Notes on client-side routing
|
||||
|
||||
GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
|
||||
|
||||
- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
|
||||
- Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
|
||||
|
||||
#### Troubleshooting
|
||||
### Troubleshooting
|
||||
|
||||
##### "/dev/tty: No such a device or address"
|
||||
#### "/dev/tty: No such a device or address"
|
||||
|
||||
If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
|
||||
|
||||
@@ -345,7 +345,7 @@ If, when deploying, you get `/dev/tty: No such a device or address` or a similar
|
||||
2. `git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>` .
|
||||
3. Try `npm run deploy` again
|
||||
|
||||
##### "Cannot read property 'email' of null"
|
||||
#### "Cannot read property 'email' of null"
|
||||
|
||||
If, when deploying, you get `Cannot read property 'email' of null`, try the following:
|
||||
|
||||
@@ -353,16 +353,16 @@ If, when deploying, you get `Cannot read property 'email' of null`, try the foll
|
||||
2. `git config --global user.email '<your_email>'`
|
||||
3. Try `npm run deploy` again
|
||||
|
||||
### [Heroku](https://www.heroku.com/)
|
||||
## [Heroku](https://www.heroku.com/)
|
||||
|
||||
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
|
||||
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
|
||||
|
||||
#### Resolving Heroku Deployment Errors
|
||||
### Resolving Heroku Deployment Errors
|
||||
|
||||
Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
|
||||
|
||||
##### "Module not found: Error: Cannot resolve 'file' or 'directory'"
|
||||
#### "Module not found: Error: Cannot resolve 'file' or 'directory'"
|
||||
|
||||
If you get something like this:
|
||||
|
||||
@@ -376,7 +376,7 @@ It means you need to ensure that the lettercase of the file or directory you `im
|
||||
|
||||
This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
|
||||
|
||||
##### "Could not find a required file."
|
||||
#### "Could not find a required file."
|
||||
|
||||
If you exclude or ignore necessary files from the package you will see a error similar this one:
|
||||
|
||||
@@ -391,7 +391,7 @@ remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/
|
||||
|
||||
In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
|
||||
|
||||
### [Netlify](https://www.netlify.com/)
|
||||
## [Netlify](https://www.netlify.com/)
|
||||
|
||||
**To do a manual deploy to Netlify’s CDN:**
|
||||
|
||||
@@ -420,7 +420,7 @@ To support `pushState`, make sure to create a `public/_redirects` file with the
|
||||
|
||||
When you build the project, Create React App will place the `public` folder contents into the build output.
|
||||
|
||||
### [Now](https://zeit.co/now)
|
||||
## [Now](https://zeit.co/now)
|
||||
|
||||
Now offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free.
|
||||
|
||||
@@ -440,11 +440,11 @@ Now offers a zero-configuration single-command deployment. You can use `now` to
|
||||
|
||||
Details are available in [this article.](https://zeit.co/blog/unlimited-static)
|
||||
|
||||
### [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
|
||||
## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
|
||||
|
||||
See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront.
|
||||
|
||||
### [Surge](https://surge.sh/)
|
||||
## [Surge](https://surge.sh/)
|
||||
|
||||
Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user