Firebase recently announced static client web application hosting. This lowers the bar for client-only apps which work closely with the firebase data and auth apis. The possibilities are very broad. Here is how I quickly got up and running.
git clone https://github.com/tphummel/node-bify-app.git my-app cd my-app rm -rf .git/ git init
You could also use a tool like beefy to quickly set up local browserify development.
Before getting into firebase, you can see our dev setup in action with:
npm install npm run dev open http://localhost:7007
Firebase makes their client scripts available via cdn or with some other package manager that isn’t NPM. But with a little looking I saw @flipside had already forked both scripts to add browserify/npm compatibility.
Add these two lines to
dependencies and rerun
"firebase-client": "tinj/firebase-client", "firebase-simple-login": "tinj/firebase-simple-login"
From here, we can see both scripts in action with a few lines added to
Note: you’ll need to have created an app on firebase.com and have enabled anonymous authentication in the project web console for this next bit to work. See the firebase docs for more detail.
... Firebase = require 'firebase-client' FirebaseSimpleLogin = require 'firebase-simple-login' dbRef = new Firebase 'https://your-app-name.firebaseIO.com/' authStateChanged = (err, user) -> console.error err if err if user console.log 'user logged in: ', user else console.log 'logged out' auth = new FirebaseSimpleLogin dbRef, authStateChanged auth.login 'anonymous' dbRef.on 'value', (snapshot) -> console.log 'heard value', snapshot dbRef.set 'hello world!', (err) -> console.error err if err console.log 'set a value!'
lib/entry.coffee and the watch script will automatically rebuild the browserify bundle. Reload your browser window and you should see logging for the api activity in the browser console.
Additionally, if the
set command succeeded above, you should be able to see an entry in the firebase web console under the “data” tab that reads “hello world!".
To host this project with firebase, first we need the firebase cli tools:
npm install -g firebase-tools. After that, you should have the
firebase command available in your terminal.
firebase init in the project root. Choose the firebase app name for this project. Then, for the app public directory use
firebase.json file was created in the project root. Now run
firebase deploy. You’ll see terminal output and if everything went correctly,
firebase open will open the deployed app in your default browser.