Node.js apps on Firebase Hosting Crash Course - Firecasts

By: Firebase

688   9   26862

Uploaded on 08/01/2017

Node apps are here on Firebase Hosting. David takes you through getting set up and shares some performance and development tips along the way.

See the official documentation: https://goo.gl/k3iv33

Add the Firecasts playlist! https://goo.gl/n2XqG1
Subscribe to the Firebase Channel: https://goo.gl/9giPHG
Music by http://terramonk.com

Comments (18):

By pier25    2017-11-04

Eh, he could also use Firebase functions to accomplish that and again for free with CDN without worrying about scaling issues.

https://www.youtube.com/watch?v=LOeioOKUKI8

Original Thread

By anonymous    2017-09-20

(Update: Now the answer is: Yes, you can - see updates below)

Original answer

No, you can't. Firebase hosting is only for static content.

See: https://firebase.google.com/docs/hosting/

Firebase Hosting provides fast and secure static hosting for your web app.

You need either a service like Heroku that can run your Node app, or you need your own server where you will install Node and run your app.

Update

Now you can host your Node apps on Firebase directly - thanks to Ayyappa for pointing it out in the comments.

See this excellent video tutorial:

and the documentation:

Cloud Functions for Firebase lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your code is stored in Google's cloud and runs in a managed environment. There's no need to manage and scale your own servers.

Note that this is still in Beta:

This is a Beta release of Google Cloud Functions. This API might be changed in backward-incompatible ways and is not subject to any SLA or deprecation policy.

Original Thread

By anonymous    2017-09-20

You're in luck. Firebase just this week released a video that walks step-by-step through setting up an Node.js/Express app on Firebase Hosting.

This has only been possible since the integration of Cloud Functions with Firebase Hosting, which was released at I/O 2017. Most tutorials likely are from before that time, when there was no way to run server-side code on Firebase Hosting.

Original Thread

By anonymous    2017-11-20

You could create your own API with Firebase Functions and make that API do the requests to the 3rd party API and cache the results for 'x' time or write them to your Firebase Database using the Admin SDK.

Then your users will be able to fetch that data directly from your database without ever touching the 3rd party API.

Here you have a videotutorial from Firebase on how to create a Node.js app (hosting and functions). Functions section of the video is what you are looking for.

Hope it helps! :)

Original Thread

By anonymous    2018-01-01

Should help https://www.youtube.com/watch?v=LOeioOKUKI8

Original Thread

By anonymous    2018-01-22

I'm using Firebase Hosting and Cloud Functions. When I execute firebase serve --only functions I got this error :

Cannot start emulator. Error: Cannot find module '/usr/local/lib/node_modules/firebase-tools/node_modules/grpc/src/node/extension_binary/node-v57-darwin-x64-unknown/grpc_node.node'

I installed all dependencies required like firebase-tools. I used this tutorial

Any ideas?

Original Thread

By anonymous    2018-01-22

Your nodejs file needs to have a get route that will be used as the entry point for the rest of your methods.

"source: "**" 

needs an actual route.

for my apps i use init

app.get('/init',function(req, res){
app.listen(process.env.PORT || 8080, () => console.log(__dirname));
})

therefore my source needs to be

"source: "/init" 

For more information checkout: https://www.youtube.com/watch?v=LOeioOKUKI8

Original Thread

By anonymous    2018-01-29

I found how to do firebase hosting with template engine, here is tutorial https://www.youtube.com/watch?v=LOeioOKUKI8

Original Thread

By anonymous    2018-02-05

and this https://www.youtube.com/watch?v=LOeioOKUKI8&t=2s

Original Thread

By anonymous    2018-02-12

I've seen the great tutorial from David East on hosting an Express app with Firebase (https://www.youtube.com/watch?v=LOeioOKUKI8). I'm hoping to use this to host my app, but I would also require access to the firebase database and firebase authentication as well.

Does a tutorial exist (or boilerplate) that can help me work out how to combine all 3?

Original Thread

By anonymous    2018-03-12

I have express, react based existing project that I managed to port to Firebase hosting with cloud functions successfully..at least on the dev server. It looks like this.. This is running on http://localhost:5000/ with command

firebase serve --only functions,hosting

enter image description here

Now, when I deploy this, it looks like

enter image description here

This is NOT a static site. Following the firebase vid here https://www.youtube.com/watch?v=LOeioOKUKI8

So I have express server running with

app.use('/static',express.static('../public'));

I had to do this because otherwise, firebase hosting treats each path as public path and it messes up scripts sourcing from public folder and also my react router in react app.

While this works on local server run by firebae, it throws 404 on prod.

Failed to load resource: the server responded with a status of 404 ()

The point is I got all this working on local machine but the deployment just won't oblige.

The deployment was not smooth.

firebase deploy

didn't work.

firebase --only hosting

worked.

firebase --only functions

did not work for quite sometime.

It kept throwing

Error setting up the execution environment for your function. Please try again after a few minutes.

a few times before it finally worked. And I didn't change anything to make it work. Just did it by itself.

Is there something I am missing? I am very new to firebase hosting.

I already have a production site running somewhere and I wish to port it to firebase. But I can not have random 'try again after a few minutes problems'.

But first things first, why are my static files not rendering on prod when they do on dev?

Thanks

Original Thread

By anonymous    2018-04-02

You can run an express application using firebase hosting to serve dynamic content via firebase functions. You cannot, however, use Koa.js currently. The functions.https.onRequest requires you to pass an HTTP request handler or an express app returned from express().

Here is the relevant article from Firebase about serving dynamic content from functions. https://firebase.google.com/docs/hosting/functions

Here is a video tutorial from Firebase on using express. https://www.youtube.com/watch?v=LOeioOKUKI8

Original Thread

By anonymous    2018-04-08

Yes, the FEAN stack is absolutely feasible. Firebase can indeed replace MongoDB entirely. It depends on your needs of course.

The 'F' in FEAN actually gives you two options: Realtime Database or Cloud Firestore. There are significant differences between the two, so I recommend studying up on those. They will impact performance (and cost, down the line, if you switch to a paid plan). At the risk of oversimplifying, Realtime DB is relatively simple and limited, whereas Firestore attempts to emulate MongoDB's sophisticated querying language and organization into collections.

More resources:

1) https://firebase.google.com/docs/firestore/rtdb-vs-firestore

2) https://savvyapps.com/blog/firebase-realtime-database-vs-cloud-firestore-for-your-app

Also note that MongoDB and Firebase DBs are not mutually exclusive.

In one of my apps, for example, I am using both, side-by-side. I have a Mongo Cloud Atlas deployment, and make API calls to it via Firebase Functions. So the E and N part of your stack could both be handled by Firebase Functions. Watch their official video for more details: Node.js apps on Firebase Hosting Crash Course.

If you want to go the server-less architecture route, the following stack was surprisingly easy to set up:

F: Firebase Cloud Firestore OR Firebase Realtime Database
E: Express app hosted on Firebase Functions
A: Angular front-end using AngularFire2 package
N: Node app hosted on Firebase Functions

I think you'll find that all these components integrate together nicely.

In my case, I'm running an MFEAN stack. I cache the processed results of my Mongo query in my Realtime Database. This way, I don't have to call my MongoDB over and over for common requests. I can serve those from my Firebase Realtime DB instead, which is crazy fast.

Original Thread

By anonymous    2018-05-29

Im trying to run an Express app into firebase, i'm following the steps of this official video:

Node.js apps on Firebase hosting crash course

My Express app is actually running on this URL

http://localhost:5001/my-app/us-central1/app/test

But on the video, the demostration is running on this url

http://localhost:5000/test

So, i'm really confused about this, i'been made everything as the tutorial shows

this is my code on functions/index.js

const functions = require('firebase-functions');

const express = require('express')
const app = express()

app.get('/test', (req, res) => {
    res.send(`Well if i'm reading this the app is working`)
})


exports.app = functions.https.onRequest(app)

And this is firebase.json

{
  "hosting": {
    "public": "public",
    "rewrite":[{
      "source": "/test",
      "function": "app"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

What i'm doing wrong? if i enter to localhost:5000 i just get the public static index.html, i just want to control the app by myself.

I hope you can give me a little help to get documented, thanks!

Original Thread

By anonymous    2018-05-29

Let's say I have a single page application using React/Node, and I want to deploy that application using a content delivery network to improve load performance.

To do that in Amazon Web Services (AWS) I would need to incorporate different services to work together.

I would need to host my bundled static web page files on amazon's S3 bucket. Then I would need to host my Node API on Elastic Beanstalk. Lastly, I would then need to setup a CloudFront distribution and set my origin to my S3 bucket.

It would look something like this:

enter image description here

Now, if I wanted to do the same thing in Firebase, according to this video tutorial, I can simply setup Firebase Hosting which is backed by their own CDN which gives similar improved load times. Firebase hosting can encompass the entire React/Node application without the need for separation or various services like I did in AWS.

My questions are:

  1. How does Firebase hosting encompass dynamic Node Apps with out the need to separate the front and backend or use various other services?
  2. The point of a CDN is to cache files, so it wouldn't be possible to use a CDN on a Node API right or wrong? If right then how is Firebase using Node app in their CDN?
  3. It seems much simpler to setup on Firebase to serve an entire dynamic app on their CDN compared to AWS, would their be any drawbacks to this or is it just a better service?

Original Thread

By anonymous    2018-05-29

I am trying to deploy a node.js app hosted on firebase app as instructed here: https://www.youtube.com/watch?v=LOeioOKUKI8.

My firebase.json file is:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
          "source": "/**"
        , "function": "app"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

And my functions/src/index.ts file is as follows:

import * as functions from 'firebase-functions';
import * as express   from 'express';
import * as math      from 'mathjs'            ;


const app = express();

app.get('/', (req, res) => {
    let num = math.round(math.random(1,100),0)
    res.send(`hello world from index ${num}`)
})      


exports.app = functions.https.onRequest(app);

After removing public/index.html and running the local server, and navigating to 5000/, I get new home page as expected. However when I try to deploy it with

firebase deploy --only functions,hosting

I get error:

> tsc
✔  functions: Finished running predeploy script.
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (5.57 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting: preparing public directory for upload...

Error: An unexpected error has occurred.

There should be no error due to typescript since I have tsc --watch running in the background.

Has anyone else encountered this issue?

Original Thread

Popular Videos 3

Submit Your Video

If you have some great dev videos to share, please fill out this form.