Skip to content

Latest commit

 

History

History
112 lines (89 loc) · 3.66 KB

4.1. Firebase Hosting.md

File metadata and controls

112 lines (89 loc) · 3.66 KB
Raw

Firebase Hosting

Firebase Hosting provides fast and secure static hosting for your web app.

Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content-delivery network (CDN) with a single command.

How does it work?

Firebase Hosting is built for the modern web developer. Static sites are more powerful than ever with the rise of front-end JavaScript frameworks like Angular and static generator tools like Jekyll. Whether you are deploying a simple app landing page or a complex Progressive Web App, Hosting gives you the infrastructure, features, and tooling tailored to deploying and managing static websites.

Getting Started with Firebase Hosting

  1. Install Firebase CLI (Command Line Interface) requires Node.js and npm, which can both be installed by following the instructions on https://nodejs.org/. Installing Node.js also installs npm.

    Once you have Node.js and npm installed, you can install the Firebase CLI via npm:

        npm install -g firebase-tools

    This installs the globally available firebase command. To update to the latest version, simply re-run the same command.

  2. Initialize your app Once you've chosen the Firebase app you'd like to deploy, cd into your project directory and run the command:

        firebase init

    Running the firebase init command creates a firebase.json settings file in the root of your project directory. You can learn more about this file in the Customize Hosting Behavior section of the guide.

  3. Add a file When you initialize your app, you will be prompted for a directory to use as the public root (default is "public"). If you don't already have a valid index.html file in your public root directory, one is created for you.

  4. Deploy your Website Your app will be deployed to the domain <YOUR-FIREBASE-APP>.firebaseapp.com

        firebase deploy

    or

        firebase serve

    To test your site locally at localhost:5000.

  5. Manage your rollbacks From the Hosting panel in the Firebase Console you can see a full history of your deploys. To rollback to a previous deploy, hover over its entry in the list, click the overflow menu icon, then click "Rollback".

    {
      "hosting": {
        "site": "id",
        "public": "dist",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
          "source": "**",
            "destination": "/index.html"
          }
        ],
        "headers": [
          {
            "source": "**/*.np@(eot|otf|ttf|ttc|woff|font.css)",
            "headers": [
              {
                "key": "Access-Control-Allow-Origin",
                "value": "*"
              }
            ]
          },
          {
            "source": "**/*.@(jpg|jpeg|gif|png)",
            "headers": [
              {
                "key": "Cache-Control",
                "value": "max-age=31557600"
              }
            ]
          },
          {
            "source": "**/*.@(css|js)",
            "headers": [
              {
                "key": "Cache-Control",
                "value": "max-age=31557600"
              }
            ]
          },
          {
            "source": "**/*.@(woff2|svg|min.css)",
            "headers": [
              {
                "key": "Cache-Control",
                "value": "max-age=31557600"
              }
            ]
          }
        ]
      }
    }