Deploy Files to Firebase Hosting

A simple guide to deploy files to firebase hosting.

Setup Firebase Tools

First, you'll need to install Firebase tools. It's a set of CLI tools for deploying files to Firebase hosting. If you already have, head to to the next section.

**

Create a site in your firebase project.

Next, install Firebase tools globally from node.js:

npm install -g firebase-tools

Confirm installation by running the following in console. You should see the installed Firebase version.

firebase --version

Next, create a project folder, then cd into that folder. Then, login using your Firebase account. Follow the given steps in the console.

firebase login --no-localhost

Finally, initialize firebase hosting and choose your Firebase project:

firebase init hosting

Deploy Configuration

Create a config file. The headers part allows caching hosted files for 14 days. We will be deploying the dist directory to "blogger-file-host-bd193" site.

The intent of this post is to create a public resources. The following config allows example.blogspot.com to access hosted JavaScript files. (CSS files don't require Access-Control-Allow-Origin config).

firebase.json

{
  "hosting": {
    "target": "blogger-file-host-bd193",
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=1209600"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "https://example.blogspot.com"
          }
        ]
      }
    ]
  }
}

Next, set the deployment target:

# firebase target:apply hosting <hosting.target> <firebase_site_name>

firebase target:apply hosting blogger-file-host-bd193 blogger-file-host-bd193

Test Deploy

Create a dist folder and index.js file.

.
└── dist/
    └── index.js

dist/index.js

console.log('App ready');

Finally, deploy your files:

firebase deploy

Your files should be accessible at the following URL:

<firebase_site>/index.js

blogger-file-host-bd193.web.app/index.js