Home Start Get started Quick tour of Polymer Install Polymer 2.x Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community Get started Quick tour of Polymer Install Polymer 2.x
Build an element
1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties
Build an app
1. Get set up 2. Create a new page 3. Add some elements 4. Deploy

In this step, you'll deploy your application to the web.

Run the following Polymer CLI command to prepare your application for deployment:

polymer build

This command minifies the HTML, JS, and CSS dependencies of your application, and generates a service worker that precaches all of the dependencies of your application so that it can work offline.

The built files are output to the build/default folder. The default build contains an unbundled build with granular resources suitable for serving via HTTP/2 with server push.

For more information on build options, see the documentation for the polymer build command. This includes documentation on generating bundled (concatenated) resources suitable for serving from servers or to clients that do not support HTTP/2 server push.

Polymer applications can be deployed to any web server.

This template utilizes the <app-location> element to enable URL-based routing, which requires that the server serve the index.html entry point for all routes.

You can follow one of the sections below to deploy this app to either Google AppEngine or Firebase Static Hosting, which are both free and secure approaches for deploying a Polymer app. The approach is similar for other hosting providers.

  1. Download the Google App Engine SDK and follow the instructions for your platform to install it. This tutorial uses the Python SDK.

  2. Sign up for an AppEngine account.

  3. Open the project dashboard and create a new project

    • Click the Create Project button.
    • Type a project name.
    • Click the Create button.

    The App Engine gives you a project ID based on the name of your project. Make note of this ID.

  4. cd into the main folder for your app (e.g. my-app/).

  5. Create an app.yaml file with the following contents:

    runtime: python27
    api_version: 1
    threadsafe: yes
    
    handlers:
    - url: /bower_components
      static_dir: build/default/bower_components
      secure: always
    
    - url: /images
      static_dir: build/default/images
      secure: always
    
    - url: /src
      static_dir: build/default/src
      secure: always
    
    - url: /manifest.json
      static_files: build/default/manifest.json
      upload: build/default/manifest.json
      secure: always
    
    - url: /.*
      static_files: build/default/index.html
      upload: build/default/index.html
      secure: always
    
  6. Set your project id to the ID given to your app by the App Engine. For example:

    gcloud config set project my-app-164409
    
  7. Create your app.

    gcloud app create
    

    You will need to select a region for your app to be deployed in. This can't be changed.

  8. Deploy your app.

    gcloud app deploy
    
  9. Your app will be available online at its designated URL. For example:

    https://my-app-164409.appspot.com/new-view
    

    Open your app URL in your browser by typing this command:

    gcloud app browse
    

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

  1. Sign up for a Firebase account.

  2. Go to https://www.firebase.com/account to create a new app. Make note of the project ID associated with your app.

    Welcome to Firebase showing Project ID

  3. Install the Firebase command line tools.

    npm install -g firebase-tools
    
  4. cd into your project directory.

  5. Inititalize the Firebase application.

    firebase login
    firebase init
    
  6. Firebase asks you for a project to associate with your app. Select the one you created earlier.

  7. Firebase asks you the name of your app's public directory. Enter build/default.

  8. Edit your firebase configuration to add support for URL routing. Add the following to the hosting object in your firebase.json file.

    "rewrites": [
      {
        "source": "!/__/**",
        "destination": "/index.html"
      },
      {
        "source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
        "destination": "/index.html"
      }
    ]
    

    For example, your firebase.json file may look like this afterwards:

    {
      "database": {
        "rules": "database.rules.json"
      },
      "hosting": {
        "public": "build/default",
        "rewrites": [
          {
            "source": "!/__/**",
            "destination": "/index.html"
          },
          {
            "source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
            "destination": "/index.html"
          }
        ]
      }
    }
    

    This instructs Firebase to serve up index.html for any URLs that don't otherwise end in a file extension.

  9. Deploy your project.

    firebase deploy
    

    The URL to your live site is listed in the output. You can also open the site in your default browser by running firebase open hosting:site.