Code Monkey home page Code Monkey logo

polymer-3's Introduction

Start Polymer 3.0

A simple Polymer 3.0 demo app. See it deployed at start-polymer3.firebaseapp.com.

Please use the latest version of Chrome or Safari to view the app. It uses native dynamic imports.

If you have done all this before:

npm install -g polymer-cli
git clone https://github.com/PolymerLabs/start-polymer3.git
cd start-polymer3
npm install
polymer serve

Otherwise:

  1. Set up a development environment for Polymer projects:
  2. Clone, install and serve the start-polymer3 project locally.
  3. (Optional) Build the start-polymer3 project for production.
  4. (Optional) Deploy the start-polymer3 project.

Set up a development environment for Polymer projects

Before you can serve this project, you will need to install Polymer CLI and its prerequisites.

Install Polymer CLI Prerequisites

Install Polymer CLI

When you've installed the prerequisites, run the following command to install the Polymer CLI globally:

npm install -g polymer-cli

Clone, install and serve the start-polymer3 project locally

To clone the project, install its dependencies, and serve locally:

git clone https://github.com/PolymerLabs/start-polymer3.git
cd start-polymer3
npm install
polymer serve

To view the app, open the applications link in the latest version of Chrome or Safari. For example:

~/start-polymer3 > polymer serve
info:    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/start-polymer3/

In the example above, you'd open http://127.0.0.1:8081.

Build the start-polymer3 project for production

To build the start-polymer3 app:

npm install
polymer build

The build is output to build/es6-unbundled. To serve the built app locally:

cd build/es6-unbundled
polymer serve

Deploy the start-polymer3 project

You can deploy a built Polymer app to any web server. One way is to deploy with Firebase:

Deploy with Firebase

To deploy the app to your own Firebase project:

  1. Install the Firebase CLI tools.

    npm install -g firebase-tools
    firebase login
    
  2. From the Firebase console, create a Firebase project.

  3. Initialize Firebase in your project folder.

    firebase init
    

    Complete the Firebase initialization process to set up your project for hosting.

    If you are prompted to

    • select Firebase CLI features, select Hosting.
    • select a default Firebase project, select the project you created from the Firebase console.
    • specify a public directory, you can enter build/es6-unbundled to deploy the build configuration supplied with this sample project.
    • configure as a single-page app, enter Y.
    • overwrite index.html, enter N.
  4. In a text editor, open firebase.json from your root project folder.

    hosting.ignore is a list of files and folders that Firebase will not deploy. Remove the node_modules folder from this list and save firebase.json.

    firebase.json: Before

    {
        "hosting": {
            "public": "build/es6-unbundled",    
            "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
            ],
            "rewrites": [
            {
                "source": "**",
                "destination": "/index.html"
            }
            ]
        }
    }
    

    firebase.json: After

    {
        "hosting": {
            "public": "build/es6-unbundled",
            "ignore": [
            "firebase.json",
            "**/.*"
            ],
            "rewrites": [
            {
                "source": "**",
                "destination": "/index.html"
            }
            ]
        }
    }
    
  5. Deploy your project with Firebase.

    firebase deploy
    

polymer-3's People

Contributors

panchalkalpesh avatar pycolors avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.