https://github.com/javascript-pro/isomorphic
Isomorphic React App
https://github.com/javascript-pro/isomorphic
Last synced: 9 months ago
JSON representation
Isomorphic React App
- Host: GitHub
- URL: https://github.com/javascript-pro/isomorphic
- Owner: javascript-pro
- Created: 2017-10-03T05:44:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T12:25:51.000Z (about 2 years ago)
- Last Synced: 2025-04-06T06:15:08.745Z (about 1 year ago)
- Language: JavaScript
- Size: 38.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
The `src` folder contains the source code for React app. It also uses [Webpack](https://github.com/webpack/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.
## Setting up the sample
1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).
1. Clone or download this repo and open the `isomorphic-react-app` directory.
1. 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 with `firebase login`.
1. Configure the CLI locally by using `firebase use --add` and select your project in the list.
1. Install dependencies locally by running: `cd functions; npm install; cd ../src; npm install`
1. Run `npm run build` within the `src` folder to start webpack, which will bundle the app. It will output `functions/build/server.bundle.js` and `public/assets/client.bundle.js`
1. Import the sample `functions/data-seed.json` to your Firebase Realtime Database. For more details, see [https://support.google.com/firebase/answer/6386780?hl=en#import](https://support.google.com/firebase/answer/6386780?hl=en#import)
## Deploy and test
This sample comes with a web-based UI for testing the function.
To test locally do:
1. Start serving your project locally using `firebase serve --only hosting,functions`
1. Open the app in a browser at `https://localhost:5000`.
To test it out:
1. Deploy your project using `firebase deploy`
1. Open the app using `firebase open hosting:site`, this will open a browser.
## Contributing
We'd love that you contribute to the project. Before doing so please read our [Contributor guide](../CONTRIBUTING.md).
## License
© Google, 2017. Licensed under an [Apache-2](../LICENSE) license.