Dynamic rendering with Firebase Functions and Firebase Hosting

Question

I'm trying to achieve Dynamic Rendering for my react application hosted in Firebase Hosting using Firebase Function.

The idea behind it comes from this article, https://dev.to/burhanahmeed/dynamic-rendering-simple-solution-for-spa-when-shared-on-social-media-amd

What I would like to achieve is Firebase Functions handles all the requests, Depending on the user agent serves static content generated on the fly, otherwise serve the main application hosted in Firebase Hosting.

So far I have just changed firebase.json to redirect all the requests to my 'app' function instead of '/index.html'

    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]

And my app function is something like

app.get('*', (req, res) => {
  if(isBot()){
    // serve static content
  }else{
    // serve the index of my hosted app
    res.render('/index'); // <--- how to access hosted /index.html in build ??
  }
});

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

The problem I'm facing is that from the functions running in Firebase Functions I'm not able to get content from the "build" folder

I'm trying with something like

app.get('*', (req, res) => {
  res.render('../build/index');
});

But that's obviously not working, I'm not sure what would be the best approach..

Any help/suggestion would be appreciated

Hi @giovanni and @Dondi , I'm implementing it with firebase function hosting but i am getting error **" Error: No default engine was specified and no extension was provided. at new View"**. this is how my `index.js` look like `const app = express();` `app.set('views', path.join(__dirname, '..', 'build'));` `app.get('**', function (req, res) { res.render('index'); });` `exports.app = functions.https.onRequest(app);` — Ahsan Ullah, Oct 06 '21 at 19:33
@AhsanUllah please check this [answer](https://stackoverflow.com/questions/23595282/error-no-default-engine-was-specified-and-no-extension-was-provided). If this doesn't solve your problem, my suggestion is to post a new question so you can further elaborate. — Donnald Cucharo, Oct 07 '21 at 00:08
@Dondi the issue resolve i found out that html file cannot be render we need to send html file instead of render. **This solve my issue,** `res.sendFile('index.html)` Thank you for your reply — Ahsan Ullah, Oct 08 '21 at 08:13

Donnald Cucharo · Accepted Answer · 2021-04-12T01:31:10.333

res.render() accepts an absolute path, or a path relative to the views setting. In order to traverse through the filesystem properly, you need to use a module such as path.

Here's how to move up to "build" directory from where the current JS file resides, for example:

const express = require('express');
const path = require('path');

...

app.set('views', path.join(__dirname, '..', 'build'));

Then render your template:

res.render('index');

Or, another way without specifying views is to directly render the template like the following samples:

res.render(path.join(__dirname, '..', 'build', 'index'));

res.render(path.join(__dirname, '..', 'build') + '/index');

Here's a reference on how to utilize path.join().

Dynamic rendering with Firebase Functions and Firebase Hosting

1 Answers1

Linked