Deploying Angular 4 with Node Express Server in Firebase

Question

I created an angular 4 project using angular cli.

Now i install express and my app.js file is

app.js

const express = require('express')
const app = express()
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const firebase = require("firebase");

app.use(express.static(path.join(__dirname, 'dist')));

var api = require('./server/routes/api');

app.use('/api', api);
app.get('*', (req, res) => {
     res.render(path.join(__dirname, 'index.html'));

});


// Initialize Firebase
// TODO: Replace with your project's customized code snippet
//NOTE : I have replace the credentials
var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
   databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
   storageBucket: "<BUCKET>.appspot.com",
  };
firebase.initializeApp(config);

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

Now if i run

npm app.js

my localhost:3000 is working and my angular js dist folder is displayed in the browser.

If i run localhost:3000/api i am getting my api calls.

Now, how to deploy this to firebase.

I tried firebase.init in a seperate folder, which was creating a set of json files...

Still its not clear, how to deploy (i need my server folder, dist folder )to be copied along with app.js to firebase app.

Hope i was clear. Downvoters are welcome with proper reasoning.

Answer 1

I have similar structure and what i have is:
$ firebase login
$ firebase init hosting
$ firebase init functions

You have to choose a firebase project, and you will have a directory structure like this:

• root
  • functions
    • dist (your built angular project)
    • node_modules
    • index.js (main endpoint)
    • app.js
    • package.json
  • public (delete index.html)
  • .firebase.c
  • firebase.json

There are three things you need to do, first in firebase.json put:

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

In index.js:

const express = require('express')
const app = require('/app')
const firebase = require("firebase");


// Initialize Firebase
var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
   databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
   storageBucket: "<BUCKET>.appspot.com",
  };
firebase.initializeApp(config);

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

And finally your app.js

const express = require('express')
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');

app.use(express.static(path.join(__dirname, 'dist')));

var api = require('./server/routes/api');

app.use('/api', api);

module.exports = app;

To run this:
$ firebase serve --only functions,hosting
and to deploy
$ firebase deploy