|
| 1 | +# Integrate React |
| 2 | + |
| 3 | +Using the Firebase CLI, you can deploy your React static web apps to Firebase |
| 4 | +and serve them with Firebase Hosting. |
| 5 | + |
| 6 | +Note: Framework-aware Hosting is an early public preview. This means |
| 7 | +that the functionality might change in backward-incompatible ways. A preview |
| 8 | +release is not subject to any SLA or deprecation policy and may receive limited |
| 9 | +or no support. |
| 10 | + |
| 11 | +## Before you begin |
| 12 | + |
| 13 | +Before you get started deploying your app to Firebase, |
| 14 | +review the following requirements and options: |
| 15 | + |
| 16 | +- Firebase CLI version 12.1.0 or later. Make sure to |
| 17 | + [install the CLI](/docs/cli#install_the_firebase_cli) using your preferred |
| 18 | + method. |
| 19 | +- Optional: An existing React project using Vite. You can create one with |
| 20 | + `npm create vite@latest -- --template react` or let the Firebase CLI |
| 21 | + [initialize a new project](#initialize-a-new-project) for you. |
| 22 | + |
| 23 | + |
| 24 | +## Initialize Firebase |
| 25 | + |
| 26 | +To get started, initialize Firebase for your framework project. |
| 27 | +Use the Firebase CLI for a new project, or modify `firebase.json` for an |
| 28 | +existing project. |
| 29 | + |
| 30 | +### Initialize a new project |
| 31 | + |
| 32 | +1. In the Firebase CLI, enable the web frameworks preview: |
| 33 | + <pre class="devsite-terminal">firebase experiments:enable webframeworks</pre> |
| 34 | +1. Run the initialization command from the CLI and then follow the prompts: |
| 35 | + <pre class="devsite-terminal">firebase init hosting</pre> |
| 36 | +1. Answer yes to "Do you want to use a web framework? (experimental)" |
| 37 | +1. Choose your hosting source directory. If there is an existing React |
| 38 | + codebase (with Vite), the CLI detects it and the process completes. |
| 39 | + |
| 40 | +## Serve static content |
| 41 | + |
| 42 | +After initializing Firebase, you can serve static content with the standard |
| 43 | +deployment command: |
| 44 | + |
| 45 | +```shell |
| 46 | +firebase deploy |
| 47 | +``` |
| 48 | + |
| 49 | +You can [view your deployed app](/docs/hosting/test-preview-deploy#view-changes) |
| 50 | +on its live site. |
0 commit comments