A live, working demo app to showcase Firebase's web features
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets More prod prep Jan 12, 2018
data Images loading dynamically. Dec 21, 2017
functions
src Switching the version.url for the version.shortUrl due to some spam p… Jan 30, 2018
.gitignore Lotsa fixes Jan 15, 2018
.node-version Getting storage function deployed Dec 16, 2017
LICENSE
README.md README Jan 13, 2018
database.rules.bolt Refreshing currentUser token when custom claim has been issued. Setti… Jan 3, 2018
favicon.ico Moved out of @quiver Dec 12, 2017
firebase.json Straightening out Firestore syncing issues. Jan 2, 2018
firestore.indexes.json
firestore.rules Global tag editing may need renaming... Jan 8, 2018
package-lock.json Moved out of @quiver Dec 12, 2017
package.json Fixing the manifest and switching markdown links to 640px in width. Jan 19, 2018
preact.config.js
storage.rules Refreshing currentUser token when custom claim has been issued. Setti… Jan 3, 2018
template.html
tsconfig.json Moved out of @quiver Dec 12, 2017
yarn.lock

README.md

fogo

A live, working demo app to showcase Firebase's web features

Install Node.js

Use the official Node.js install instructions to get your Node on your system. Once you can run node --version in your command line, you're good to go.

I recommend the latest LTS version of Node.js. Even-numbered version of Node are the long-term support (LTS) versions. The Odd-numbered versions are the bleeding edge. I'm using v8.9.1 as of this writing. I'll stay on the 8.x branch until the 10.x branch ships.

I use nvs and .node-version files to manage Node versions. This matters because the tests run in /functions need to be run in the version of Node that Cloud Functions uses, and that version has historically lagged the most recent LTS version. See /functions/.node-version.

Install your package manager of choice

You can use either Yarn or NPM. They should both work; however, I'm using yarn as of this writing, because I'm a hipster like that.

Run a quick check to make sure you have everything before moving on.

yarn --version #should read out a version number

Clone the repo

Open your command line and cd to your favorite development directory. Then clone the repo:

git clone https://github.com/how-to-firebase/fogo.git
cd fogo

Install dependencies

Node.js packages install their dependencies into /node_modules. This can be done with Yarn or NPM.

# Using Yarn
yarn
# Using NPM
npm install

Edit environment files

There are two "dist" environment files, /src/environment.js.dist and /functions/config.json.dist.

Make sure to copy each dist file without the .dist at the end, and edit it to match your development and deploy environments. For instance, you'll need to modify the Firebase details to point to your own target Firebase instance. You'll also need an Algolia.com account with the appropriate API keys, or you won't get any search.

Notice that /src/environment.js.dist has a howtofirebase environment. This is because I like to host multiple sites on a single Firebase instance. I built this app to run dynamically in different "environments" based on location.hostname. So you can make up as many environments as you like in /src/environment.js and assign them to hostnames as necessary. Mix and match. It's fun!

Serve it up locally

This project uses package scripts from /package.json.

Read the docs if you're fuzzy on package scripts.

Run yarn start and you should see something like this:

Compiled successfully!

You can view the application in browser.

Local:            http://localhost:8080
On Your Network:  http://192.168.1.25:8080

Now open the application up in your browser and you're live!

Deploy

You can deploy to your own Firebase project by installing the Firebase CLI with yarn global add firebase-tools and running firebase init. Once Firebase is initialized to your own project you'll notice a new file--/.firebaserc--that should point to your project.

Run yarn deploy to deploy the whole app, or see the scripts listed in /package.json for more options.

Questions? Bugs?

This app needs to be immaculate. Bulletproof. Perfect.

Please file issues for questions, bug reports... anything.

If in doubt, file an issue and I'll get right on it!