CODEWITHSUNDEEP
bowerpolymer-2.x
Joern Turner
Joern Turner

Reputation: 99

how to structure a polymer 2 project?

Maybe the following is obvious to anybody but me and maybe it's not even a pure Polymer issue but i'm lost with this problem and would appreciate help a lot.

First of all: - working with Polymer 2 and bower

Problem:

i've created a couple of components. Some of these are complete apps in themselves so they have a set of dependencies loaded in via bower. Each of these compoents live in their own git repo. For far so good. That's working fine.

Each of the apps will have a structure like this:

bower_components/
my-comp1.html
my-comp2.html

When e.g. using a paper-input i would have an 

<link rel="import" href="bower_components/paper-input/paper-input.html">

Now i'd like to use these component 'my-comp1' and use it in another app. So my take was to bower install them from their respective repo.

I should say that i have a bower.json.ignores file listing all files that shouldn't be deployed when installed via bower which also lists 'bower_components' folder.

And here's the actual problem. Lets say my new app 'my-app' loads 'my-comp1' from external git.

But when i bower install it, it will land in the bower_components folder of 'my-app' and the pathes inside of 'my-comp1' will break as they don't resolve to

'my-app/bower_components/paper-input/paper-input.html'

but to

'my-app/bower_component/my-comp1/bower_components/paper-input/paper-input.html' which is not there.

I've searched the net for advice for hours both in the bower and the Polymer world but couldn't find an answer on how to organize a componentized project. Maybe i'm just overlooking the obvious but i'm really stuck on this.

Important: i'm not using the builtin Polymer server but run the code via my own server (jetty) which in my case is essential.

Any help is highly appreciated.

Thanks Joern

Upvotes: 1

Views: 79

Answers (1)

daKmoR
daKmoR

Reputation: 1864

This is a known "problem" as you will need to serve the component from its self-perspective and from an applications perspective. And that is exactly what polymer serve is addressing.

The solution is as follows - you will assume by default that the component is served in the application perspective. Therefore in your component you write

<link rel="import" href="../paper-input/paper-input.html">.

Structure:

my-app
├─ bower_components
│  └─ paper-input
│  └─ my-comp1
|  |  └─ my-comp1.html (import "../paper-input/paper-input.html" works)
|  └─ my-comp2
└─ my-app.html

However if you want to work on the component itself it's path will need to be changed.

Structure:

my-comp1
├─ bower_components
│  └─ paper-input
└─ my-comp1.html (import "../paper-input/paper-input.html" works)

polymer serve does solve this by having two ways of "serving":

  • For Components:

    http://localhost:8080/components/my-comp1/

    => every request that goes "outside" e.g. one extra ../ will be redirected to bower_components/

  • For Apps http://localhost:8080/

    => nothing special needed

How you can solve this without using polymer serve is up to your server solution. You could use symlinks, redirects, rewrites, ...

A simple workaround is also to just work inside your my-app and open http://localhost/bower_components/my-comp1/demo/.

Upvotes: 2

Related Questions