Search code examples
javascriptangularjsgoogle-cloud-platformgoogle-cloud-functionsfirebase-hosting

firebase hosting in express with angularjs - server side rendering is not working


i have a firebase App, with express as backend and angularjs as frontend. this app have admin dashboard and client page, with directory structure like this

App - functions
       --admin
          ---app
          ---controllers
          ---views
       --client
          ---app
          ---controllers
          ---views
       --index.js
    -public
      --assets
        ---images
        ---stylesheets
        ---javascripts

and this my index.js for express

const functions           = require('firebase-functions');
const admin				  = require('firebase-admin');
const express			  = require('express');
const path   			  = require('path');
const bodyParser 		  = require('body-parser');
const cookieParser		  = require('cookie-parser');
const serviceAccount 	  = require('./service_account.json');

const app		          = express();
const firebaseApp	      = admin.initializeApp({
        credential: admin.credential.cert(serviceAccount),
        databaseURL: "https://lelangawi.firebaseio.com"
    });

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing
app.use(cookieParser());

app.set('views', __dirname);
app.use('/assets', express.static(path.join(__dirname + '../../public/assets')));
app.use('/admin/app', express.static(path.join(__dirname + '../../functions/admin/app')));
app.use('/client/app', express.static(path.join(__dirname + '../../functions/client/app')));
app.use('/admin/controllers', express.static(path.join(__dirname + '../../functions/admin/controllers')));
app.use('/client/controllers', express.static(path.join(__dirname + '../../functions/client/controllers')));


app.engine('html', require('ejs').renderFile);

// CORS Support
app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.get('/admin', function (req, res) {
    res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.render('admin/views/index.html');
});

app.get('/', function (req, res) {
    res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.render('client/views/index.html');
});

app.get('/admin/partials/:name', function (req, res) {
    res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.render('admin/views/partials/' + req.params.name);
});

app.get('/client/partials/:name', function (req, res) {
    res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.render('client/views/partials/' + req.params.name);
});



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

and everytime i run command firebase serve in console, it get error : cannot get the url. but it works from the app url

this the hosting url: http://localhost:5000

and this the fungtions url : http://localhost:5001/lelangawi/us-central1/app/


Solution

  • to configure the hosting route, you have to change the hosting rule on file firebase.json

    "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]}
    

    then change to this

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