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.
The 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, and the client bundle is included in the functions/template.js - the markup that's being passed onto the client.
- Create a Firebase Project using the Firebase Console.
- Clone or download this repo and open the
isomorphic-react-appdirectory. - You must have the Firebase CLI installed. If you don't have it install it with
npm install -g firebase-toolsand then configure it withfirebase login. - Configure the CLI locally by using
firebase use --addand select your project in the list. - Install dependencies locally by running:
cd functions; npm install; cd ../src; npm install - Run
npm run buildwithin thesrcfolder to start webpack, which will bundle the app. It will outputfunctions/build/server.bundle.jsandpublic/assets/client.bundle.js - Import the sample
functions/data-seed.jsonto your Firebase Realtime Database. For more details, see https://support.google.com/firebase/answer/6386780?hl=en#import
This sample comes with a web-based UI for testing the function. To test it out:
- Deploy your project using
firebase deploy - 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.