Problems with using the CLI tools on existing projects

[ruphin]

Description

These are some problems I ran into when using the CLI tools on an existing Polymer project. For reference, my project source can be found here: https://github.com/ruphin/overwebs/tree/polymer2.0 A recording of my process can be seen here: https://www.twitch.tv/videos/138879292?t=24m11s

Polymer Lint

I immediately ran into this issue: https://github.com/Polymer/polymer-analyzer/issues/584 Basically my folder naming scheme doesn't match what Polymer expects it to be, so the tool doesn't work. I tried for a few minutes to ignore the issue and work around it, but I very quickly gave up, the output was unusable in this state.

Polymer Build

This was the tool I was most interested in. I currently use a self-authored Gulp build pipeline. My application layout is rather simple: I have a folder for Elements, each Element consists of an HTML file for markup, a JS file for logic, and an SCSS file for styling. My current build pipeline works by processing these files to produce transpiled/minified output, and concatenating them when necessary. Aside from that there is just an index.html entrypoint, and some static assets.

I tried using this as a template for a gulp pipeline using the new tools: https://github.com/PolymerElements/generator-polymer-init-custom-build/blob/master/generators/app/gulpfile.js

The first problem I immediately ran into was an Error: File not found with a singular glob: /app/index.html. It would have saved me 10 minutes if the error message was a bit less cryptic, but I eventually figured out that it expected the entrypoint index.html to be in the app root. Easy enough to fix. It took me a little while after tha

It would have saved me 10 minutes if the error message was a bit less cryptic, but I eventually figured out that it expected the entrypoint index.html to be in the app root. Easy enough to fix. It took me a little while after that to fix my relative imports to match the new folder layout. Looking back at it, it is possible that I could have kept my old layout and configured the location of the entrypoint in polymer.json, but I haven't tried.

The next problem was that I couldn't get anything to work with my SCSS files. My current solution to SCSS is an adapted version of https://github.com/superjose/polymer-sass, which means my build pipeline processes the SCSS and inlines it into a 'style-module', which is imported by the main element. I modified the gulpfile above by passing the SCSS files through node-sass, and renaming the files in the pipe to the proper .css extension, double checked with gulp debug that all files in the pipe were correct, but I couldn't get past error: [cli.build.analyzer] In src/elements/overwebs-app/overwebs-app.html: [could-not-load] - Unable to load import: Not found: "/app/src/elements/overwebs-app/overwebs-app.css" I think I gave up after like 30 minutes.

I really love the new tools, I think they provide much needed help in managing frontend projects, and I would love to be able to use them, but issues like these make it really hard to. It feels like unless your project is built from the start with these tools in mind (use the correct folder layouts, naming schemes) and you use no other technologies or languages, they are prohibitively difficult to use. The problem is that you run into some error because your code isn't exactly like the tool expects, and it's effectively impossible to find anything on how to solve the issue. Even though my old handknitted build pipeline is pretty poor compared to the new tools, from a user's perspective it's still easier to write my own tools than to fix yours, which is a shame because I really want to use yours.

[FredKSchott]

@ruphin this is incredibly helpful feedback, thanks for sharing.

I'll try to give this a real read-through this later today and we can see if there are any actionable improvements/fixes we can break out of it.

[isochronous]

It feels like unless your project is built from the start with these tools in mind (use the correct folder layouts, naming schemes) and you use no other technologies or languages, they are prohibitively difficult to use.

This is EXACTLY my issue with the polymer CLI. I've been trying off and on for TWO MONTHS to figure out how to integrate polymer into a large existing web project that's a mix of asp.net webforms and .net MVC5. Our goal is to write all new pages using custom elements, and as we update old pages, to rewrite them in polymer.

The issue is that it seems like ALL of the polymer tooling is set up to support a single, very narrowly defined project structure. It's great (for green-fields projects) that everything is available as bower packages, and that polymer serve does its path aliasing thing to make everything a sibling, but...

1. Every IDE I use immediately starts screaming that the paths we're specifying don't actually exist
2. It makes it damn near impossible to use polymer serve during development, and a different server for production. That is, the paths that polymer serve accepts and expects aren't valid with ANY other server without extensive configuration.

I know the solution to point no. 2 there is to use polymer build, but that has issues as well. First and foremost for us, it doesn't seem to support anything but .html files for entry points. Even if we're trying to adopt polymer as much as possible, the backbone of our app is still .net MVC, which uses .cshtml files. Our idea was to use a single cshtml view as the entry point to the app, which would then load a polymer-built app shell that would then use routing to load different views... but even attempting to specify that cshtml file as the entrypoint throws a (completely misleading) exception - it says it can't find the file on disk, rather than saying it's not a valid file type. And we're not doing anything weird in it - indeed, it's pretty much just plain html pasted into a .cshtml file.

Basically, it just seems like all of the effort went into making it easy to create new projects, and not much thought went into making it easy to adopt polymer into existing applications. All of the requirements are so strict, and the amount of available configuration so limited, that I'm just spending my days banging my head on my desk trying to figure out how to make these tools work for me.

I apologize for the rant-like nature of this post - I know a ton of work has gone into both polymer and its associated tooling, but after weeks of frustration I feel no closer to a solution than when I started.

[kevinsimper]

I have this problem, I want to move my index.html into the src folder, but when I succeed with that it can't find the npm modules. I could move my npm modules inside the source folder, but it would be nice to have it stay in the root.

So going from default:

polymer build

to moving your index.html to not lie in the root does not seem that possible, if you want to resolve node_modules that are installed at the project root

polymer build --entrypoint src/index.html --root src/
# or
polymer build --entrypoint index.html --root src/ --npm --sources "**/*"

info:   Clearing build/ directory...

import { LitElement, html } from "lit-element";
                                 ~~~~~~~~~~~~~

file:///Users/kevinsimper/my-github-project/src/main.js(1,34) error [could-not-load] - Unable to load import: Not found: /Users/kevinsimper/my-github-project/src/node_modules/lit-element/lit-element.js

Here it simply tries to look up the node_modules in the wrong folder, even though the imports referes to straight strings with no paths.

So, the path rewrite is not working that well in the not normal example.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!