I have designed the UI for a desktop app using Polymer. However When I run the app locally it gives me the following error : "Imported resource from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access." As it is a desktop app I need no internet connectivity and no web server. Any solution to run this app locally ? Thanks
2
-
possible duplicate of HTML Import not working in Chromedeceze– deceze ♦2015-04-22 14:25:38 +00:00Commented Apr 22, 2015 at 14:25
-
In short: no, you need a web server, even if a local one.deceze– deceze ♦2015-04-22 14:25:50 +00:00Commented Apr 22, 2015 at 14:25
Add a comment
|
2 Answers
imports cannot work without a web server because it potentially violates some of browser's security policies and I am sure you know that.
Here are a few solutions:
- Use a local web-server with python or Node to serve the Custom-elements
- If you use
node-webkitto wrap yourHTML, it comes with a built-in server so no worries about any web-server
P.S. Using a web-server is always a safer choice.
2 Comments
Bassdrop Cumberwubwubwub
To run a local simple python server
python -m SimpleHTTPServer 8000
Metagrapher
Now one can use
polymer serve, as well, but just for local testing. For a desktop app written in polymer, you would definitely want to bundle the node-webkit server or some other modern variation.You can open in your browser a local HTML file which uses Polymer, and this without running a localhost server. But as Adi mentionned, you won't be able to import local HTML files. That's why you should declare your Polymer element in the same file as the body of your page.
Here's a simple Hello Polymer element in 1 file (importing Polymer library from the Poligit server, not local). You can save this file localy, and execute it in your browser, it should work without any executing local server.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Polymer 2 -->
<script src="https://polygit.org/webcomponentsjs+1.0.0-rc.5/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/polymer+2.0.0-rc.2/components/polymer/polymer-element.html">
</head>
<!-- Body -->
<body>
<!-- Hello element definition -->
<dom-module id="hello-element">
<template>
<span>Hello {{name}}!</span>
</template>
<script>
class HelloElement extends Polymer.Element {
static get is(){
return "hello-element";
}
static get properties() {
return {
name : {
type : String,
value : "world"
}
}
}
}
customElements.define(HelloElement.is, HelloElement);
</script>
</dom-module>
<!-- Element instance -->
<hello-element></hello-element>
<p/>
<hello-element name="Hammy"></hello-element>
</body>
</html>