Polymer is a library that helps you create custom HTML elements. In this codelab, you'll build a web app with custom elements.

What you will build

In this codelab, you're going to build a simple game in the form of a Web app. The app will:

  • Present a flag to the user
  • Invite the user to guess which country the flag belongs to
  • Tell the user whether they got the answer correct or incorrect
  • Let the user click a button to show them another flag to identify

What you'll learn

What you'll need

To start the tutorial, you will need some software:

You'll also need to have some basic skills and knowledge:

That said, I assume you know about as much about web development as I do (very little!). This tutorial is for beginners.

Install Git

Git is a version control tool.

Download the Git Installer

  1. Run the Git installer.
  2. Check whether Git is correctly installed: git --version

If all is well, Git tells you its version info:

If you don't see a Git version number at this point, you may need to refer to the official Git installation instructions.

Install Node and npm

Node is a JavaScript runtime environment. npm is a package manager for Node. They will both be installed when you install Node.

Download the Node installer

  1. Download and run the Node installer (this will install npm as well).
  2. Update npm to the latest version: npm install npm@latest -g
  3. Check that Node and npm are correctly installed. Run the following commands:

node -v

npm -v

If you don't see version numbers for Node and npm, you may need to refer to the official installation instructions on the npm website.

Install Bower

Bower is a package manager for the Web. Your Polymer project will rely on Bower to manage and track the Web Components it depends on, and their version information.

After installing npm, you will be able to install Bower using npm.

  1. Run the following command: npm install -g bower
  2. Check that Bower is installed correctly: bower -v

Install the Polymer CLI

The Polymer CLI is what you'll use to generate your app from a template, view the working app locally, and package it up ready for deployment.

  1. Use npm to install the Polymer CLI: npm install -g polymer-cli
  2. Check that the Polymer CLI installed correctly: polymer --version

Congratulations! You've configured a development environment for Polymer apps.

  1. Create a folder for your app, cd to it, and initialize your Polymer app:

mkdir whose-flag
cd whose-flag
polymer init

  1. When prompted to choose the type of project you want to create, select Polymer 2.0 Application.

  1. Press Enter to accept the default application name and main element name supplied by the Polymer CLI: whose-flag and whose-flag-app.
  2. When prompted for a description of your app, type: Match flags to their countries!
  3. Press Enter. The Polymer CLI creates the scaffolding for your app.

  1. Type ls and have a look at the file structure Polymer CLI has set up for you. You should see something like this:

What is all this stuff?

The Polymer CLI has generated the files and folders composing the basic structure of an app. Here's a short explanation of these files and folders:

File or folder

What's inside?

bower_components

Your app has a set of dependencies - chunks of code that it depends on to work. These dependencies are managed with Bower, a package manager, and stored in the bower_components folder.

bower.json

Describes your app's dependencies to the package manager, Bower.

index.html

Your app's landing page.

manifest.json

Stores metadata for your app that helps browsers to load it efficiently.

README.md

README files usually describe how to install and use the app. Currently, yours contains some default content generated by the Polymer CLI.

src/

Folder that stores the code we'll write for your app - html, javascript and css.

test/

A placeholder folder for automated tests. You won't need this since you will test your app manually.

Let's take a look at src/whose-flag-app/whose-flag-app.html. Open this file in a text editor.

whose-flag-app.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <dom-module id="whose-flag-app">
   <template>
     <style>
       :host {
         display: block;
       }
     </style>
     <h2>Hello [[prop1]]!</h2>
   </template>
 
   <script>
     /**
      * @customElement
      * @polymer
      */
     class WhoseFlagApp extends Polymer.Element {
       static get is() { return 'whose-flag-app'; }
       static get properties() {
         return {
           prop1: {
             type: String,
             value: 'whose-flag-app'
           }
         };
       }
     }
 
     window.customElements.define(WhoseFlagApp.is, WhoseFlagApp);
   </script>
 </dom-module>

Here are some important things to note:

whose-flag-app.html

static get properties() {
  return {
    prop1: {
      type: String,
        value: 'whose-flag-app'
    }
  };
}

This means you can use it in your HTML, like this:

<h2>Hello [[prop1]]!</h2>

The square brackets denote a Polymer feature called data binding. We'll learn more about this soon.

Cool - you made an app! It's that easy. The app doesn't do much yet, but let's take a look at it.

In the main folder for your app (the root whose-flag folder), type:

polymer serve --open

The Polymer development server starts up, and the --open flag automatically opens a browser window for you:

You can serve your app at any time to see how it looks.

In the following steps, you'll import and use interface elements from WebComponents.org to define the visual appearance of your app.

Add a toolbar

  1. Open a new terminal window.
  2. Type cd whose-flag to get to your root project folder.
  3. Install the app-layout elements:
bower install app-layout --save

Installing the app-layout elements means that they are added to your app's Bower dependencies, and will be available for your app to use in its code.

  1. With a text editor, open bower.json to see what the above command has done:

bower.json

...
"dependencies": {
   "polymer": "Polymer/polymer#^2.0.0",
   "app-layout": "^2.0.1"
 },
...
  1. From src/whose-flag-app, open whose-flag-app.html in a text editor. The first line in this file is a link to another file:

whose-flag-app.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

This is an HTML Import. It is like a library - an HTML file that contains elements and functions that you can use to build other elements. This line is here because you need the Polymer library in order to do Polymer things.

  1. Add the following line under the existing HTML Import:

whose-flag-app.html

<link rel="import" href="../../bower_components/app-layout/app-layout.html">

This tells Polymer that you're going to use the app-layout elements. Note that you don't need to import <app-toolbar> itself; we're importing the whole collection of app-layout elements.

  1. Locate the following text in whose-flag-app.html:

whose-flag-app.html

<h2>Hello [[prop1]]!</h2>

This is just placeholder text, and you can safely delete it. Replace it with this:

whose-flag-app.html

<app-header>
   <app-toolbar>
     <div main-title>Whose flag is this?</div>
   </app-toolbar>
 </app-header>

Points to note:

If you want a preview of your app at any time, you can run polymer serve --open from the whose-flag root project folder, using a command line. You can also leave the Polymer development server running--just remember to refresh your browser to see your changes.

Your app should look like this:

In the following steps, we will add the rest of the user interface.

Add an image

  1. Install <iron-image> by typing bower install iron-image --save from the root whose-flag project folder.
  2. Import <iron-image> by placing the following code after the existing import links in whose-flag-app.html (remember, whose-flag-app.html is in src/whose-flag-app).
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
  1. Add the following code to whose-flag-app.html, after the </app-header> close tag:

whose-flag-app.html

<div id="flag-image-container">
  <iron-image 
    id="flag-image"
    preload fade src="data/svg/BR.svg">
  </iron-image>
</div>

<iron-image> makes it easy to get your images to render nicely. The preload attribute makes sure that the image does not render until the browser has fully loaded it. Until the image is fully loaded, the preload attribute uses the image's background color (defined in CSS--we'll get to that shortly) as a placeholder.

The fade attribute works with the preload attribute. When the browser has fully loaded the image, it renders the image with a nice fade effect.

At the moment, the image we point to (data/svg/BR.svg) doesn't yet exist - so the appearance of your app won't have changed since the previous step.

Add buttons

Add three buttons to the simple app interface.

  1. First, install the <paper-button> element:
bower install paper-button --save
  1. In whose-flag-app.html, import the <paper-button> element:

whose-flag-app.html

<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  1. Insert the following code straight after the closing </iron-image> tag. We'll put these buttons inside the <div id="flag-image-container"> ...</div> block to make sure they align with the image.
<div id="answer-button-container">
  <paper-button id="optionA" class="answer">Brazil</paper-button>
  <paper-button id="optionB" class="answer">Uruguay</paper-button>
</div>
<p>A message will go here, telling you if you got it right.</p>
<paper-button class="another" id="another">Another!</paper-button> 

Your app should look like this:

At the moment, these buttons don't do anything. That's fine as you are just defining the interface of your app.

Delete placeholder code

In the <script></script> block, locate the following code, and delete it:

whose-flag-app.html

prop1: {
  type: String,
  value: 'whose-flag-app'
}

This step won't change the appearance of your app.


Set up data for the app

Your app tries to load an image called data/svg/BR.svg, so you should make sure it can find it--and the other images and data you'll be using soon. In the following steps, you will set up the data for the app.

  1. In the root project folder, create a folder called data/.
  2. Click the Download app data button below and save the file to your computer.

Download app data

  1. Unzip the file and place its contents in the data/ folder you just created.

You should now have the following folder structure:

You should see the flag of Brazil when you refresh your browser or serve your app to view changes.

Click here to see what your project should look like at the end of this step.

Here's a demo of the app at this stage.

Let's give your app some style. You will use an existing color scheme found in the <paper-styles> component, which provides an easy implementation of material design.

  1. Install paper-styles. Type the following command from the root whose-flag project folder:
bower install paper-styles --save
  1. Import the color scheme inside paper-styles by adding the following code to the list of imports at the start of whose-flag-app.html:

whose-flag-app.html

<link rel="import" href="../../bower_components/paper-styles/color.html">
  1. Replace the existing <style></style> block with the following code:

whose-flag-app.html

    <style>
      :host {
        display: block;
        font-family: Roboto, Noto, sans-serif;
      }
      paper-button {
        color: white;
      }
      paper-button.another {
        background: var(--paper-blue-500);
        width: 100%;
      }
      paper-button.another:hover {
        background: var(--paper-light-blue-500);
      }
      paper-button.answer {
        background: var(--paper-purple-500);
        flex-grow: 1;
      }
      paper-button.answer:hover {
        background: var(--paper-pink-500);
      }
      app-toolbar {
        background-color: var(--paper-blue-500);
        color: white;
        margin: 20px 0;
      }
      iron-image {
        border: solid;
        width: 100%;
        --iron-image-width: 100%;
         background-color: white;
      }
      #flag-image-container {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
      }
      #answer-button-container {
        display: flex; /* or inline-flex */
        flex-flow: row wrap;
        justify-content:space-around;
      }
    </style>
paper-button.another:hover {
  background: var(--paper-light-blue-500);
}

--paper-light-blue-500 is a custom CSS property. You imported this custom CSS property with paper-styles, so it is now available to use.

The code extract above takes --paper-light-blue-500 and assigns it to act as the value of the background color for paper-buttons of class another when they are being hovered over.

Remember that you can serve and test your app at any time by typing the following command from the root whose-flag project folder:

polymer serve --open

Go here to see what your project code should look like now.

Here's a demo of the app at this stage.

The text of your buttons is currently hard-coded. You need to change this so that you can display the button text from a data source. To do this, you will bind the text of your buttons to properties of your whose-flag-app element.

At the moment, whose-flag-app has no properties:

whose-flag-app.html

  static get properties() {
    return {
    };
  }
  1. Add two properties to whose-flag-app:

whose-flag-app.html

  static get properties() {
    return {
      countryA: {
        type: String,
        value: "Brazil"
      },
      countryB: {
        type: String,
        value: "Uruguay"
      }
    };
  }

Their values remain hard-coded for now. Now, you can bind the button text to these properties.

  1. Find the following lines in whose-flag-app.html:

whose-flag-app.html

  <paper-button id="optionA">Brazil</paper-button>
  <paper-button id="optionB">Uruguay</paper-button>

Replace the hard-coded button text with data bindings:

whose-flag-app.html

  <paper-button id="optionA">[[countryA]]</paper-button>
  <paper-button id="optionB">[[countryB]]</paper-button>

This syntax is called data binding. [[countryA]] will be replaced by the value of this.countryA from your element. [[countryB]] will be replaced by the value of this.countryB.

  1. Create another property called outputMessage:

whose-flag-app.html

    static get properties() {
    return {
      countryA: {
        type: String,
        value: "Brazil"
      },
      countryB: {
        type: String,
        value: "Uruguay"
      },
      outputMessage: {
        type: String,
        value: ""
      }
    };
  }
  1. Locate the following placeholder text:

whose-flag-app.html

  <p>A message will go here, telling you if you got it right.</p>

Replace it with a data binding:

whose-flag-app.html

  <p>[[outputMessage]]</p>
  1. Add a property to hold the correct answer, and a property to hold the user's answer. In the properties function, after the definition of outputMessage, create two more properties:

whose-flag-app.html

  correctAnswer: {
    type: String,
    value: "Brazil"
  }, 
  userAnswer: {
    type: String,
    value: "Brazil"
  }

Remember to add a comma between each property, and to make sure that there is no comma after the last property.

Now listen for, and handle, the event that is fired when the user selects an answer. When a user clicks on an HTML button, the button fires an event. A web developer can listen for that event and create a function that will run whenever that event is fired. This function is called an event listener.

  1. Add the following function to the class definition of WhoseFlagApp:

whose-flag-app.html

_selectAnswer(event) {
    let clickedButton = event.target;
    this.userAnswer = clickedButton.textContent;
    if (this.userAnswer == this.correctAnswer) {
      this.outputMessage = `${this.userAnswer} is correct!`;
    }
    else {
      this.outputMessage = `Nope! The correct answer is ${this.correctAnswer} !`;
    }
  }

Here's where this function will sit inside your code:

  <script>
    ...
    class WhoseFlagApp extends Polymer.Element {
      static get is() { return 'whose-flag-app'; }
      static get properties() {
        return {
          ...
          }
        };
      }
      _selectAnswer(event) {
        ...
        }
      }
    }
    ...
  </script>

Now, make sure this function gets called.

  1. Add on-click="_selectAnswer" to the attributes of each answer button:

whose-flag-app.html

<paper-button id="optionA" class="answer" on-click="_selectAnswer">[[countryA]]</paper-button>
     <paper-button id="optionB" class="answer" on-click="_selectAnswer">[[countryB]]</paper-button>

Notes:

Click here to see what your project code should look like now.

Here's a demo of the app at this stage.

We'll add some code to load the country data from a file. First, have a look inside the whose-flag/data/ folder that you downloaded earlier. This folder contains:

Here's an extract so you can see how the data is laid out:

countrycodes.json

{ "countrycodes":[
{
 "code": "AF",
 "name": "Afghanistan"
},
{
 "code": "AL",
 "name": "Albania"
},
{
 "code": "DZ",
 "name": "Algeria"
},...}]}

Use <iron-ajax> to load countrycodes.json

Instead of hardcoding the country names and flag image filename, you'll take these values from countrycodes.json. Loading this file is simple--you can use a Polymer component called <iron-ajax>.

  1. From the root project folder, install <iron-ajax>:
bower install iron-ajax --save
  1. Import <iron-ajax> by adding the following line to the imports section in whose-flag-app.html:

whose-flag-app.html

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

Now we can use <iron-ajax> to load the file.

  1. Locate the following piece of code inside whose-flag-app.html:

whose-flag-app.html

    <app-header>
     <app-toolbar>
       <div main-title>Whose flag is this?</div>
     </app-toolbar>
   </app-header>
   <div id="flag-image-container">
     <iron-image
       id="flag-image"
       preload fade src="data/svg/BR.svg">
     </iron-image>
  1. Insert the following block of code between </app-header> and <div id="flag-image-container">:

whose-flag-app.html

<iron-ajax
  auto
  url="data/countrycodes.json"
  handle-as="json"
  on-response="_handleResponse"></iron-ajax>

Your code should look like this:

whose-flag-app.html

<app-header>
  <app-toolbar>
    <div main-title>Whose flag is this?</div>
  </app-toolbar>
</app-header>
<iron-ajax
  auto
  url="data/countrycodes.json"
  handle-as="json"
  on-response="_handleResponse"></iron-ajax>
<div id="flag-image-container">
  <iron-image
    id="flag-image"
      preload fade src="data/svg/BR.svg">
  </iron-image>

Let's look at what this code does:

Create an event listener

We will add the event listener, _handleResponse, to the scripts inside the WhoseFlagApp class definition. Before we do so, we need to add a property that it will use.

  1. Inside the properties function, add a property called countryList:

whose-flag-app.html

static get properties() {
  return {
    countryA: {
      type: String,
      value: "Brazil"
    },
    countryB: {
      type: String,
      value: "Uruguay"
    },
    outputMessage: {
      type: String,
      value: ""
    },
    correctAnswer: {
      type: String,
      value: "Brazil"
    },
    userAnswer: {
      type: String
    },
    countryList: {
      type: Object
    }
  };
}        

Now, we'll create the _handleResponse method. This method will do three things:

  1. Place the following code inside the class definition for WhoseFlagApp:

whose-flag-app.html

_handleResponse(event) {
  this.countryList = event.detail.response.countrycodes;
  this.countryA = this.countryList[0];
  this.countryB = this.countryList[1];
  this.correctAnswer = this.countryA;
}

Use the data loaded from countrycodes.json

The data inside countrycodes.json is made up of objects with key-value pairs. Each object has a code and a name. this.countryA and this.countryB each contain one of these objects. For example:

countrycodes.json

{
 "code": "AF",
 "name": "Afghanistan"
}

You can reference the items within the objects. For example, countryA.code is the string "AF" and countryA.name is the string "Afghanistan".

You will now change your code to use this data structure.

  1. Find the following code:

whose-flag-app.html

<div id="answer-button-container">
  <paper-button class="answer" id="optionA" on-click="_selectAnswer">[[countryA]]</paper-button>
  <paper-button class="answer" id="optionB" on-click="_selectAnswer">[[countryB]]</paper-button>
</div>

Replace it with the following code:

whose-flag-app.html

<div id="answer-button-container">
  <paper-button class="answer" id="optionA" on-click="_selectAnswer">[[countryA.name]]</paper-button>
  <paper-button class="answer" id="optionB" on-click="_selectAnswer">[[countryB.name]]</paper-button>
</div> 

Now that we have assigned values from the data file to the country options, we can delete the hard-coded values in the properties function.

  1. Change the properties section of your code to look like this:

whose-flag-app.html

     static get properties() {
       return {
         countryA: {
           type: Object
         },
         countryB: {
           type: Object
         },
         outputMessage: {
           type: String,
           value: ""
         },
         correctAnswer: {
           type: Object
         },
         userAnswer: {
           type: String
         },
         countryList: {
           type: Object
         }
       };

Note: You will be changing any property that holds an item from countrycodes.json to be of type Object instead of type String. (userAnswer and outputMessage don't change type, by the way! userAnswer is the textContent of the button the user clicks, while outputMessage is the confirmation message telling the user whether they answered correctly. They are still Strings.)

  1. Since correctAnswer is now an Object with name and code fields, instead of a String, update _selectAnswer to accommodate this:

whose-flag-app.html

     _selectAnswer(event) {
       let clickedButton = event.target;
       this.userAnswer = clickedButton.textContent;
       if (this.userAnswer == this.correctAnswer.name) {
         this.outputMessage = `${this.userAnswer} is correct!`;
       }
       else {
         this.outputMessage = `Nope! The correct answer is ${this.correctAnswer.name}!`;
       }
     }
  1. Finally, replace the hard-coded filename with a reference to the data loaded from countrycodes.json. Find the following code:

whose-flag-app.html

<iron-image
  id="flag-image"
  preload fade src="data/svg/BR.svg">
</iron-image>

Change it to the following code:

whose-flag-app.html

  <iron-image
     id="flag-image"
     preload fade src="data/svg/[[correctAnswer.code]].svg">
  </iron-image>

Click here to see what your project should look like now.

Here's a demo of the app at this stage.

In this step, we make the game dynamic and playable.

Here's the existing code for selecting the countries to be displayed:

whose-flag-app.html

_handleResponse(event) {
  this.countryList = event.detail.response.countrycodes;
  this.countryA = this.countryList[0];
  this.countryB = this.countryList[1];
  this.correctAnswer = this.countryA;
}

We'll write a function, __getRandomCountry, that selects a random country from the array of countries(this.countryList). We'll use this function to randomize the options the user is presented with.

The JavaScript math function, Math.random(), will help with this. Math.random returns a random number between 0 and 1, for example, 0.30201092490461323 or 0.06303133640534542.

To get a random integer that we can use as an array index, we can multiply the random number by the length of the array and extract the integer part using Math.floor:

__getRandomCountry() {
  return Math.floor(Math.random() * (this.countryList.length));
}
  1. Place the new function in whose-flag-app.html, inside the class definition for WhoseFlagApp:

whose-flag-app.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
...

<dom-module id="whose-flag-app">
  <template>
    ...
  </template>
  
  <script>
    ...
    class WhoseFlagApp extends Polymer.Element {
      ...
      _handleResponse(event) {
        this.countryList = event.detail.response.countrycodes;
        this.countryA = this.countryList[0];
        this.countryB = this.countryList[1];
        this.correctAnswer = this.countryA;
      }
      __getRandomCountry() {
        return Math.floor(Math.random() * (this.countryList.length));
      }
    }
    window.customElements.define(WhoseFlagApp.is, WhoseFlagApp);
  </script>
</dom-module>
  1. Use __getRandomCountry, instead of hard-coded integers, as an array index for this.countryList:

whose-flag-app.html

this.countryA = this.countryList[this.__getRandomCountry()];
this.countryB = this.countryList[this.__getRandomCountry()];

Modify your code to make sure that countryA and countryB are always different from each other.

  1. Enclose the code for assigning values to this.countryA and this.countryB in a while loop:
_handleResponse(event) {
  this.countryList = event.detail.response.countrycodes;
  while (!this.countryA || !this.countryB || (this.countryA.code == this.countryB.code)){
    this.countryA = this.countryList[this.__getRandomCountry()];
    this.countryB = this.countryList[this.__getRandomCountry()];
  }
  this.correctAnswer = this.countryA;
}

Now we'll randomize which button's answer is correct.

  1. Add the following code to the __handleResponse function, after this.correctAnswer = this.countryA;:
let coin = (Math.floor(Math.random() * 2));
this.correctAnswer = coin == 1 ? this.countryA : this.countryB;

Now that your app is capable of generating random questions, give the user an option to play again!

  1. Add the following function to the class definition for WhoseFlagApp:
_restart() {
  window.location.reload();
}
  1. Hook up the _restart function to the Another! button:
<paper-button class="another" id="another" on-click="_restart">Another!</paper-button>

Click here to see what your project should look like now.

Here's a demo of the finished app!

Build the app for production

Now you'll generate a build of your app. You'll package up the app into a format that you can push to an external-facing web server.

  1. With a text editor, create a new file called polymer.json. Save it in the root whose-flag project folder.
  2. Paste the following text into polymer.json, and save the file:
{
 "sources": [
   "data/*",
   "data/svg/*"
 ]
}

This makes sure that your app's data and images are included in the build.

Note: If you already have a polymer.json file in your project folder, delete its contents and replace them with the code sample above.

  1. Type polymer build.

To see what polymer build has done, let's examine the folder structure again. This is what we had before:

  1. In the main /whose-flag/ folder, type ls to see the changes:


You'll notice the build folder. This folder contains the default folder, which in turn contains all of the files that your app needs in order to function "in the wild" on a web server. This is the stuff that you will deploy.

Deploy your app with Firebase

Before you can deploy the build, you need to set up a place to host it. You can use any web server to deploy a Polymer app, but we're going to use Firebase Hosting, a web app hosting platform.

Setting up app hosting is a once-off step. In future, deploying your app will be even simpler!

Install Firebase tools

Firebase is an app hosting tool that you'll use to deploy your app on the Internet.

  1. Use npm to install the Firebase command line tools:

npm install -g firebase-tools

  1. To check that the Firebase tools installed correctly:

firebase --version

Set up app hosting with Firebase

  1. Click here to sign up for a Firebase account. If you have gmail, this is as simple as signing in to Firebase with your gmail address.
  2. Once you've signed in to Firebase, from the Firebase Console, click Create a project.
  3. Give your project a name, then click Create Project.
  4. Firebase assigns your project an ID and redirects you to an overview of your project. In the URL, you'll see the ID your project has been assigned. Mine is whose-flag, but Firebase may add some random numbers to yours in order to make it unique.

Take note of this project ID - you'll need it when you configure your app.

  1. From the root whose-flag folder, type:
firebase login
firebase init
  1. Firebase asks you which CLI features to set up. Make sure Firebase Hosting is selected. (Use the arrow keys to navigate the menu, and the Space bar to select or deselect an option.)

  1. Press Enter.
  2. Select the project ID of the project you created in the Firebase Console, and press Enter.
  3. Firebase asks you a set of questions about your app setup. Here's how to answer them:

Question

Answer

What file should be used for Database Rules?

database.rules.json

Do you want to install dependencies with npm now?

Y

What do you want to use as your public directory?

build/default

Configure as a single-page app (rewrite all urls to /index.html)?

N

File build/default/index.html already exists. Overwrite?

N

Done! Firebase has initialized a project for you. Let's look at the changes this command has made to your local app folder structure.

  1. In the /whose-flag/ folder, type ls -a (the -a flag shows hidden files).

What are these new files and folders?

File or folder

What's inside?

.firebaserc

Stores the name of your Firebase project.

database.rules.json

Stores the rules that define how Firebase should structure and control interaction with your app data.

firebase.json

Records some of the configuration decisions you just made. Importantly, this file stores the location of the built app (build/default) - the stuff that gets uploaded.

Deploy the build to your hosted Firebase project

Now, you need to deploy the build.

  1. From the /whose-flag/ folder, type firebase deploy.

  1. Visit the URL in the firebase deploy output. The URL will be based on the project ID that Firebase gave you in Step 4. For example, mine is this: https://whose-flag.firebaseapp.com