how to structure a polymer project?

[Joern Turner]

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

- now i'd like to use these components and aggregate them in another app. So my take was to bower install them from their respective repo.

And here's the actual problem. Lets say my new app 'my-app' loads 'my-comp1' from external git. 'my-comp1' will have e.g. a html import pointing to 'bower_compoents/paper-input/paper-input.html. This resolves just fine when i use my-comp1 directly.

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.

Any help is highly appreciated.

Thanks Joern

[Daniel Llewellyn]

On 8 February 2018 at 15:58, Joern Turner <joern....@gmail.com> wrote:

And here's the actual problem. Lets say my new app 'my-app' loads 'my-comp1' from external git. 'my-comp1' will have e.g. a html import pointing to 'bower_compoents/paper-input/paper-input.html. This resolves just fine when i use my-comp1 directly.

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.

​Don't commit the bower_components directory to git in your projects. When bower installs your element it will parse the down-level `bower.json` file and install all the dependencies mentioned there in the top-level `bower_components` folder alongside your elements.

To access those dependencies, in your subordinate element use the path `../<foo>`. That way, when your super app installs your elements via bower your element will be able to access it's dependencies from the same `bower_components​` folder as it resides itself. This will mean you can't use your component as a standalone app directly, but to get around that you can create a minimal wrapper which just embeds your element and provides the correct location for the `bower_components` folder one-level up from your element.

--

Daniel Llewellyn

Bowl Hat

[Joern Turner]

Daniel,

thanks for the suggestion. I'll try that.

Joern