Isomorphic React App
This sample shows how to create an isomorphic React application using using Functions, Hosting, and Realtime Database.
During the initial request to your app, Hosting will proxy your request to a Node express server. The server will then load any data that's necessary for your app (through the Realtime Database). It will also generate the markup that's needed from React. It will inject the markup with the preloaded state before passing it to the client.
This sample uses
react-router to demonstrate simple routing logic for React.
src folder contains the source code for React app. It also uses Webpack to bundle the app and generate two bundles, one for the server, and one for the client. The server bundle is required by the express server to generate the initial markup (also knows as Server-Side Rendering). The client bundle is loaded by the browser.
Setting up the sample
- Create a Firebase Project using the Firebase Console.
- Clone or download this repo and open the
- You must have the Firebase CLI installed. If you don't have it install it with
npm install -g firebase-toolsand then configure it with
- Configure the CLI locally by using
firebase use --addand select your project in the list.
- Install the Cloud Functions dependencies locally by running:
cd functions; npm install
- Install the React app's dependencies locally by running:
cd ../src; npm install
npm run buildwithin the
srcfolder to start webpack, which will bundle the app. It will output
- Import the sample data
functions/data-seed.jsonto your Firebase Realtime Database. For more details, see https://support.google.com/firebase/answer/6386780?hl=en#import
- Deploy the Realtime Database security rules by running:
firebase deploy --only database
Deploy and test
This sample comes with a web-based UI for testing the function. To test locally do:
- Start serving your project locally using
firebase serve --only hosting,functions
- Open the app in a browser at
To test it out:
- Deploy your project using
- Open the app using
firebase open hosting:site, this will open a browser.
We'd love that you contribute to the project. Before doing so please read our Contributor guide.
© Google, 2017. Licensed under an Apache-2 license.