Skip to content

Latest commit

 

History

History
67 lines (45 loc) · 2.23 KB

deploy-to-firebase-pretty-urls.md

File metadata and controls

67 lines (45 loc) · 2.23 KB

Deploy to Firebase using Pretty URLs

Firebase is a very simple and secure way to deploy a Polymer Starter Kit site. You can sign up for a free account and deploy your application in less than 5 minutes.

The instructions below are based on the Firebase hosting quick start guide.

  1. Sign up for a Firebase account

  2. Install the Firebase command line tools

    npm install -g firebase-tools
    

    The -g flag instructs npm to install the package globally so that you can use the firebase command from any directory. You may need to install the package with sudo privileges.

  3. cd into your project directory

  4. Inititalize the Firebase application

    firebase init
    

    Firebase asks you which app you would like to use for hosting. If you just signed up, you should see one app with a randomly-generated name. You can use that one. Otherwise go to https://www.firebase.com/account to create a new app.

  5. Firebase asks you the name of your app's public directory. Enter dist. This works because when you run gulp to build your application, PSK builds everything and places it all in dist. So dist contains everything your application needs to run.

  6. Edit firebase.json, change firebase name, and add rewrites section see example firebase.json

    {
      "firebase": "polymer-starter-kit",
      "public": "dist",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [ {
        "source": "**",
        "destination": "/index.html"
      } ]
    }
    
  7. Add <base href="/"> to head near top of index.html, above <!-- Place favicon.ico in the app/ directory -->

  8. Remove hashbang: true in routing.html near bottom. The call to page should look like this now:

    page();
    
  9. Build

    gulp
    
  10. Deploy

    firebase deploy
    

    The URL to your live site is listed in the output.

You can see a demo of Polymer Starter Kit hosted on Firebase using pretty URLs at https://polymer-starter-kit.firebaseapp.com.