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 (also knows as Server-Side Rendering). The client bundle is loaded by the browser.
- Create a Firebase Project using the Firebase Console.
- Clone or download this repo and open the
isomorphic-react-app
directory. - You must have the Firebase CLI installed. If you don't have it install it with
npm install -g firebase-tools
and then configure it withfirebase login
. - Configure the CLI locally by using
firebase use --add
and 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
- Run
npm run build
within thesrc
folder to start webpack, which will bundle the app. It will outputfunctions/build/server.bundle.js
andpublic/assets/client.bundle.js
- Import the sample data
functions/data-seed.json
to 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
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
https://localhost:5000
.
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.
© AdysenLabs, 2017. Licensed under an Apache-2 license.
Continuous integration CI Redux