Skip to content

Add deploy to Firebase CDN on template's README (Closes #374) #1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 5, 2016
Merged

Add deploy to Firebase CDN on template's README (Closes #374) #1143

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e79705
Add deploy to Firebase CDN on template's README (Closes #374)
guilhermebruzzi Dec 3, 2016
95a7ff5
Move section and minor tweaks
gaearon Dec 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Move section and minor tweaks
  • Loading branch information
@gaearon
gaearon authored Dec 5, 2016
commit 95a7ff5d1c7ef83ce74e58deead773e548719d99
129 changes: 63 additions & 66 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,14 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Making a Progressive Web App](#making-a-progressive-web-app)
- [Deployment](#deployment)
- [Building for Relative Paths](#building-for-relative-paths)
- [Firebase](#firebase)
- [GitHub Pages](#github-pages)
- [Heroku](#heroku)
- [Modulus](#modulus)
- [Netlify](#netlify)
- [Now](#now)
- [S3 and CloudFront](#s3-and-cloudfront)
- [Surge](#surge)
- [Firebase](#firebase)
- [Troubleshooting](#troubleshooting)
- [Something Missing?](#something-missing)

Expand Down Expand Up @@ -962,6 +962,68 @@ To override this, specify the `homepage` in your `package.json`, for example:

This will let Create React App correctly infer the root path to use in the generated HTML file.


### Firebase

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.

Then run the `firebase init` command from your project's root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`.

```sh
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do 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 read from and written to.

? What file should be used for Database Rules? database.rules.json
✔ Database Rules for 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 for your assets, use your build'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!
```

Now, after you create a production build with `npm run build`, you can deploy it by running `firebase deploy`.

```sh
=== Deploying to 'example-app-fd690'...

i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for 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
```

For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup).

### GitHub Pages

>Note: this feature is available with `[email protected]` and higher.
Expand Down Expand Up @@ -1093,71 +1155,6 @@ Install the Surge CLI if you haven't already by running `npm install -g surge`.

Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).

### Firebase

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 the `firebase login` command and login with your previous created Firebase account.

Then run the `firebase init` command from your project's root. You need to choose the *Hosting: Configure and deploy Firebase Hosting sites* option, choose your previous created project, accept *database.rules.json* to be created, choose *build* as public directory and accept to *Configure as a single-page app* with the *y* option.

```sh
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do 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 read from and written to.

? What file should be used for Database Rules? database.rules.json
✔ Database Rules for 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 for your assets, use your build'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!
```

After creating the build folder with `npm run build`, you can deploy to firebase with the `firebase deploy` command.

```sh
=== Deploying to 'example-app-fd690'...

i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for 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
```

For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup).

## Troubleshooting

### `npm test` hangs on macOS Sierra
Expand Down