3 minutes
Firebase with NPM + Browserify
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.
I start new browser apps with a client starter repo which contains some handy build scripts based on substack’s task automation post:
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 ./package.json
under dependencies
and rerun npm install
:
"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 lib/entry.coffee
:
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!'
Save 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.
Next run firebase init
in the project root. Choose the firebase app name for this project. Then, for the app public directory use build/
since that is where our compiled html and javascript gets written. Once this is done, you’ll see a 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.