Multiple self-content pages

Question

I am trying to migrate Polymer 1 application to Polymer 2. My application comprises one "main" page index.html and one static file "multiple.html".

"index.html" is the first page delivered to client. After users successfully log in to server via index.html , "index.html" creates the following tags inside itself:

<a href="/m/1" target="_blank">menu item 1</a>
<a href="/m/2" target="_blank">menu item 2</a>
<a href="/m/3" target="_blank">menu item 3</a>

After users click on menu item N , server sends over the same file multiple.html . Browser than calls function document.URL to get 1 , 2 , or 3 as request parameters for data from server to build pages of different contents from the same static file "multiple.html". As such, the browser might now opens one main page and several "instances" of pages spawned from static file multiple.html .

Here is my problem: Polymer 2 allows only one "main" page, which is supposed to be specified in file bower.json . How do I restructure my application so that I can run command

polymer build --js-minifiy --html-minify

and produce the correct compressed files, index.html and multiple.html in particular, in directory build/default ?

Edit Please note that because files index.html and multiple.html share many files of custom elements, it is not a good idea to split this one application into two applications.

Edit 2 Many thanks for your inputs! I did not make my question specific enough. I will follow the design pattern illustrated by Polymer Shop and try using Polymer element app-route .

Answer 1

You should provide a polymer.json file in the root of your app.

In there you can define multiple files.

{
  "entrypoint": "index.html",
  "fragments": [
    "multiple.html",
  ]
}

for more details see https://www.polymer-project.org/2.0/docs/tools/polymer-json

eg you can also provide the js minification and html minification there so you don't have to provide it on command line.