how to deploy polymer-starter-kit on tomcat

Question

I have installed all required packages for polymer.

I downloaded polymer-starter-kit and build it.

If I start polymer serve, I can get the page similar like following:

However, if I copy the folder /build/bundled under my polymer app directory, to the place /path/to/tomcat/webapps, the page I get is only grep background, nothing more.

I would like to know how to properly deploy a polymer app on tomcat.

If I just build a very very simple polymer with only one element instead of the polymer-starter-kit, after copying the /build/bundled into /path/to/tomcat/webapps, the page can be shown properly.

score 2 · Answer 1 · answered Jan 03 '17 at 19:37

As for the Polymer Issues

Configuring Polymer to work properly on these Java Servlet based web servers can sometimes be kind of tricky. For starters open up dev tools to see what kind of errors you are receiving, likely you'll see some failed imports that shouldn't be overly difficult to resolve.

This is a drawback of using a servlet container to manage a non-servlet based application. Don't be discouraged it can be done, we have several apps in production on Tomcat servers.

You will likely have to throw polymer serve out the window for this project and setup a local Tomcat server to do your development on. As these behave completely differently.

Things to Keep in Mind

Not sure what your overall goal for the project is or how much availability you have to make adjustments to the Tomcat environment (which I assume would be a production goal.) You will want to use hash based routing straight from the beginning. These servlet containers are going to be looking for Java classes to handle URL(s).

How to open up dev tool? Dev tool of what? Tomcat? – fluency03 Jan 03 '17 at 21:00 — fluency03, Jan 03 '17 at 21:00

score 2 · Answer 2 · edited Jan 04 '17 at 02:06

2

I was able to deploy the polymer starter-kit app to Tomcat under ROOT context so that all dependencies can be resolved against it successfully.

Just run polymer build and copy the contents of \build\bundled folder under %TOMCAT_HOME%\webapps\ROOT, then start Tomcat and it should work.

edited Jan 04 '17 at 02:06

Michael Lihs

7,460
17
52
85

answered Jan 03 '17 at 23:14

ynov

21
2

Why this is working? Is there any workaround so that poly can be deployed under non-ROOT app? – fluency03 Jan 03 '17 at 23:25
The app tries to resolve it's dependencies relative to root context, so you need to change them appropriately if you want to use a non-ROOT one. – ynov Jan 04 '17 at 00:38
What do you mean by dependencies? I think a polymer app has all dependencies (all bower components) it needs right? – fluency03 Jan 04 '17 at 07:48

score 2 · Accepted Answer · edited May 23 '17 at 12:07

Thanks for ynov's answer. It helps and works. But it is not so elegant.

Another workaround is stated here regarding Deploying my application at the root in Tomcat: configure the context root in conf/server.xml to use your app:

<Context path="" docBase="polymer" debug="0" reloadable="true"></Context>

However, as stated in the Apache Tomcat 7 Configuration Reference - The Context Container:

It is NOT recommended to place elements directly in the server.xml file. This is because it makes modifying the Context configuration more invasive since the main conf/server.xml file cannot be reloaded without restarting Tomcat.

The actual problem of polymer-starter-kit cannot be properly deployed as a webapp on Tomcat is remained in the polymer-starter-kit source code. The website is not shown properly is because the resources (htmls, images, components, etc...) are not refered correctly.

In the originall code of polymer-starter-kit/index.html, the resources are linked like the following:

...

<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">

...

However, if you deploy the webapp in a sub directory $TOMCAT/webapps/ like $TOMCAT/webapps/polymer, the link reference like href="/images/manifest/icon-48x48.png" won't work, because it refers to the root directory. This is why the previous workarounds (i.e., put the webapp at $TOMCAT/webapps/ROOT) work. So, the trick is change the link to href="images/manifest/icon-48x48.png" (or any other proper path suitable to the correct path of the resources you want ot use.).

For example, in polymer-starter-kit/index.html:

...

<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="images/manifest/icon-192x192.png">

...

because images/ and index.html are under same directory.

how to deploy polymer-starter-kit on tomcat

3 Answers3