Serve html file using firebase function

Question

How can I serve index.html file located in my blog folder by using a firebase function.

Here is my file tree

FirebaseWebsite
  │   
  ├── blog
  │   ├── index.html
  │   ├── css
  │   │   ├── fonts
  │   │   │   ├── FontAwesome.otf
  │   │   │   ├── fontawesome-webfont.eot
  │   │   │   ├── fontawesome-webfont.svg
  │   │   │   ├── fontawesome-webfont.ttf
  │   │   │   └── fontawesome-webfont.woff
  │   │   ├── images
  │   │   │   └── banner.jpg
  │   │   └── style.css
  │   ├── fancybox
  │   │   ├── blank.gif
  │   │   ├── fancybox_loading.gif
  │   │   ├── [email protected]
  │   │   ├── fancybox_overlay.png
  │   │   ├── fancybox_sprite.png
  │   │   ├── [email protected]
  │   │   ├── helpers
  │   │   │   ├── fancybox_buttons.png
  │   │   │   ├── jquery.fancybox-buttons.css
  │   │   │   ├── jquery.fancybox-buttons.js
  │   │   │   ├── jquery.fancybox-media.js
  │   │   │   ├── jquery.fancybox-thumbs.css
  │   │   │   └── jquery.fancybox-thumbs.js
  │   │   ├── jquery.fancybox.css
  │   │   ├── jquery.fancybox.js
  │   │   └── jquery.fancybox.pack.js
  │   ├── js
  │   │   └── script.js
  │   └── tags
  │       └── Topic-for-blog
  │           └── index.html
  ├── index.js
  │
  ├── functions
  │      └── index.js
  │
  ├── Public
  │      └── aboutUs.html
  │
  └── firebase.json

Here is the firebase function that I am using

index.js (from functions folder)

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

blogApp.get('/blog', (request, response) => {

    response.sendfile('../blog/public/index.html');
});

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

Below is the configuration

firebase.json

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/blog",
        "function": "blogApp"
      }
    ],
    "cleanUrls": true
  }
}

Below is the error that I am getting when I visit the url

Refused to load the image '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Any guidance on resolving this issue would be greatly appreciated.

Doug Stevenson · Accepted Answer · 2018-06-19 00:14:01Z

1

When you deploy your functions, everything in the functions folder is packaged up and sent to Cloud Functions. Nothing outside of that folder is sent, which means that your blog folder is not available at runtime (nor is your static web content deployed to Firebase Hosting). If you want to contents of blog to be readable at runtime by your deployed code, it should live in the functions folder before you run the deploy command.

answered Jun 19, 2018 at 0:14

Doug Stevenson

321k37 gold badges458 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kurrodu Over a year ago

Thank you, I was able to serve index.html file from the firebase functions folder, however, I was not able to serve the corresponding static files (.css, images etc) from the firebase functions folder. e.g. style.css file is empty and other folders with images are missing. Please see the updated folder tree in my question.

Doug Stevenson Over a year ago

Are you sure you're actually serving index.html from the function? It was more likely that Firebase Hosting was serving it directly, overriding the function.

Prajwal Over a year ago

Hey, do you remember how you solved for this? I am on the same boat right now. Any help is appreciated. Thank you.

Collectives™ on Stack Overflow

Serve html file using firebase function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related