From 3e797050f7b807a826ee003816676c94a419866e Mon Sep 17 00:00:00 2001 From: Guilherme Bruzzi Date: Sat, 3 Dec 2016 14:42:58 -0200 Subject: [PATCH 1/2] Add deploy to Firebase CDN on template's README (Closes #374) --- packages/react-scripts/template/README.md | 66 +++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 79105db05c5..17b54e75f8c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -54,6 +54,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Now](#now) - [S3 and CloudFront](#s3-and-cloudfront) - [Surge](#surge) + - [Firebase](#firebase) - [Troubleshooting](#troubleshooting) - [Something Missing?](#something-missing) @@ -1092,6 +1093,71 @@ 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 From 95a7ff5d1c7ef83ce74e58deead773e548719d99 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 5 Dec 2016 22:19:20 +0000 Subject: [PATCH 2/2] Move section and minor tweaks --- packages/react-scripts/template/README.md | 129 +++++++++++----------- 1 file changed, 63 insertions(+), 66 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 17b54e75f8c..1bac2192a5f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -47,6 +47,7 @@ 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) @@ -54,7 +55,6 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Now](#now) - [S3 and CloudFront](#s3-and-cloudfront) - [Surge](#surge) - - [Firebase](#firebase) - [Troubleshooting](#troubleshooting) - [Something Missing?](#something-missing) @@ -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 `react-scripts@0.2.0` and higher. @@ -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