I have a problem trying to deploy a polymer application to the server. I created the Application using Polymer-Cli. Also the routing is done using <app-route> element.
The server is IIS Server, and the issue comes because they want to deploy the application as a directory:
rapidsites.com/msa/...
I uploaded other websites to the root directory and I've never faced problems but in that case I had severals:
The application doesn't find my-app.html. (this one I solved by removing "/" from the begining in this way: <link rel="import" href="src/my-app.html">
The routing doesn't work all, the links miss the subdirectory and doesn't find anything.
This is the my-app element route:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<my-login name="login"></my-login>
<my-workpanel name="workpanel" route="{{subroute}}"></my-workpanel>
</iron-pages>
I solve this issue using the property use-hash-as-path in the app-location:
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
Related
If I take the Polymer starter kit, it works well locally.
I can navigate to http://localhost:8080/ and all the links to the 3 views work fine.
Now, if I host this app on a web server (that is shared with other apps) on a URL such as http://myservername:8080/mywonderfulapp/, I am having trouble with the routing. Is there a way I can mention the app-route to take in the relative URL?
I tried making changes to the html files to have relative URLs
<link rel="import" href="./src/my-app.html">
<a name="view1" href="./view1">View One</a>
<base href="/mywonderfulapp/">
but I cant seem to fix the app-routing in a similar fashion.
All similar questions here on SO seem to be about a pre-1.0 version of Polymer, and mention page.js and hash-bang routing instead of the HTML5-history-friendly URLs and the app-route component.
I would prefer to make minimal code changes to ensure
the same code works locally as well as on the remote host
the app is not dependent on the base URL on which it is hosted - so, preferably I dont have to mention "mywonderfulapp" (from the URL above) anywhere in the code.
The closest I got with this so far, is to:
mention a placeholder for a URL prefix in the app-route pattern.
<app-route
route="{{route}}"
pattern="/:prefix/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
and then use that in the href attribute for the anchor
<a name="view1" href="/[[routeData.prefix]]/view1">View One</a>
<a name="view2" href="/[[routeData.prefix]]/view2">View Two</a>
<a name="view3" href="/[[routeData.prefix]]/view3">View Three</a>
The drawback with this approach is that I have to use the URL as http://localhost:8080/mywonderfulapp/ even when working locally, but at least I don't have to modify code anymore when deploying to my remote web server.
As stated in the comments, this was solved in a similar posting on stackoverflow.com/questions/39608956/polymer-error-on-reloading
Side note for firebase users - if you deploy this same version of starter kit to firebase and do a firebase serve at the CLI, this problem will even occur in the localhost, so you will need the above fix, even for there.
Newest progression:
It seems that I can exclude firebase from possible causes. Because I tested only with polymer deployment and got a bad result too.
My project uses Google Polymer and is deployed to firebase hosting. It needs to import some polymer html file from outside the firebase hosting.
So I changed the code from the following "local" to "outside". However "outside" does not work at all, where "local" means my local computer for testing or the firebase hosting.
Could you point out what is wrong in my code?
my-app.html has one of following links.
//"local: OK"
<link rel="import" href="some.html">
//"outside: not OK"
<link rel="import" href="https://outside.com/some.html">
And my-app.html uses the element, id="some", as
<template><some></some></template>
And "some.html" contains just one dom-module with the following simple template. Let me omitt writting other parts because they are minimum too.
<template><h1>test</h1></template>
In order for this to work, resources on other origins must be CORS-enabled (cross origin resource sharing) as this article states. The W3C draft on HTML imports also mentions it.
The link tag also has a crossorigin attribute, which may help here. E.g. <link rel="import" href="https://outside.com/some.html" crossorgin="anonymous">.
How do i go from the auto-binding template to a 'my-app' structure and still keep the build structure, web sync, etc. working?
<body unresolved>
<my-app></my-app>
</body>
I'm having trouble getting polymer elements to show up on my parse app.
The file directory looks like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
index.html
in index.html I have the imports like this:
<!-- css -->
<link type='text/css' rel="stylesheet" href="../css/main.css">
<!-- polymer -->
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
and a paper button in the body:
<paper-button>PAPER BUTTON</paper-button>
However, when I deploy, the paper button doesn't show up. The css is applied correctly though, which is so weird, since if /public/index.html can access /css then why not /components??
To debug I moved the step-1 folder from the polymer tutorial into /public so that the file directory is like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
/step-1
index.html
index.html
I've verified that when I run the app on localhost and go to
http://localhost:8000/public/step-1/
The polymer elements show up correctly. I'm unable to access this on the deployed parse app though, and I'm not sure how to set up routing correctly.
btw, app.js contains the default routing configurations:
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine
app.use(express.bodyParser()); // Middleware for reading request body
I looked at the expressjs docs and tried adding
app.use(express.static(__dirname + '/bower_components'));
and installing polymer at the app's root directory and using corresponding imports, but it still doesn't work.
What am I missing?
LOL. Forgot the polymer js import and imported paper tabs instead of paper button.
Fixed:
<!-- polymer -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
I have a similar issue, The samples what polymer has given they run correctly on python http server.
I have created a core-scaffold based element in the Polymer Designer.
Using the Polymer Generator with Yeoman, I created a basic app and it displayed the page as expected. https://github.com/yeoman/generator-polymer/
I want to use the output from the designer in my app. I renamed designer.html (from gist) to dashboard.html, changed
<polymer-element name="my-element"> to
<polymer-element name="dashboard">
saved the designer output as: app/elements/dashboard/dashboard.html
changed all of the imports to the correct path, e.g.
<link rel="import" href="../core-scaffold/core-scaffold.html"> to
<link rel="import" href="../../bower_components/core-scaffold/core-scaffold.html">
when I add
<link rel="import" href="dashboard/dashboard.html">
to elements.html and the page reloads, it is now blank. This is without changing anything in index.html
Hints as to what else needs to be changed in the designer output for it to be imported to this app?
The problem is that all Polymer elements MUST be hyphenated.