Can anyone point me to a tutorial that uses Polymer 2 and polymer-build from Polymer CLI? When I use any example in the polymer-starter-kit and use polymer serve, it works fine; but when I use polymer build and serve the bundled or unbundled directory, I get 404 errors. I have even updated to the newest alpha version of polymer-cli.
Also, using https://github.com/tony19/generator-polymer-init-2-x-app generators have the same problem.
I also spent quit a bit of time to figure this one out. Please use the polymer-cli#next instead of polymer-cli
Plain polymer-cli doesn't seem to have the latest build and optimizations to support Polymer 2.0#Preview related functionality.
You can install polymer-cli#next. In Ubuntu, you can simply use npm install -g polymer-cli#next
Then on, the bundled and unbundled versions of the application generated through polymer build would just works fine.
Edit:
You can find my sample Polymer2.0#Preview version of the code at https://github.com/phani1kumar/phani1kumar.github.io branch is "devmaster".
the sw-precache-config.js is initial render-blocking. This will load all the resources that the main page needs to make the app available for offline use. src/lazy-resources.html loads resources for the next routes.
You would need to get a proper configuration based on your layout and main page in the following 3 files:
sw-precache-config.js, polymer.json, src/lazy-resources.html. This is a practice followed in the shop app from Polymer team, you may opt to a different mechanism for lazy loading. The bottom-line for lazy loading is to load the resources after Polymer.RenderStatus.afterNextRender.
You may also find the following article interesting: https://medium.com/#marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi
I noticed a bug in the generator in that the starter-kit subgenerator was missing a dependency on webcomponentsjs, which would cause an error with polymer-build. And as you discovered, polymer.json was also missing dependencies for the polyfill support of webcomponentsjs, which caused 404s on polyfilled browsers (such as Linux Chrome). That's all fixed now in v0.0.6.
You'll also need a version of polymer-build that does not try to uglify the JavaScript, which would fail due to its inability to recognize ES6. The new-build-flags branch of the polymer-cli repo replaces uglify with babili for ES6 minification (added in PR#525). You could check out that branch and build it yourself, or you could install it from here:
npm i -g tony19-contrib/polymer-cli#dist-new-build-flags
For convenience, this branch is added as a devDependency when generating the 2.0 starter kit with generator-polymer-init-2-x-app.
To build and serve a Polymer 2.0 Starter Kit project:
Generate a 2.0 Starter Kit (using generator-polymer-init-2-x-app, v0.0.6 or newer) by selecting 2-x-app - starter application template:
$ polymer init
? Which starter template would you like to use?
...
2-x-app - (2.0 preview) blank application template
2-x-app - (2.0 preview) blank element template
❯ 2-x-app - (2.0 preview) starter application template
After the project generator finishes, build the project with yarn build:
$ yarn build
info: Deleting build/ directory...
info: Generating build/ directory...
info: Build complete!
Note that the output is only build/, and no longer build/bundled/ and build/unbundled/.
Serve up the contents of the build directory, and automatically open a browser to it:
$ polymer serve build -o
You could also serve it with a different tool to verify that the build output would work outside of the context of any Polymer tools. Start a Python server in build/, and manually open a browser to it:
$ cd build
$ python -m SimpleHTTPServer
Related
I'm a newbie in Angular. I came across the files tsconfig.app.json, tsconfig.spec.json when angular app was installed using Angular-CLI and found the following point useful from this link.
Both tsconfig.*.json files are for TypeScript configuration.
tsconfig.app.json is used for compiling the code, while
tsconfig.spec.json for compiling the tests.
My doubt is, can we completely exclude tsconfig.spec.json file if we are not using any test environment? Or is tsconfig.spec.json mandatory?
If you don't use tests, feel free to remove tsconfig.spec.json.
Actually you can generate a new angular app without setting up test environment (karma, protractor and *.spec.ts files)
for #angular/cli version 7,8,9 the command is:
ng new --minimal=true --skipTests=true your-app-name
for #angular/cli version 6:
ng new --minimal --skip-tests your-app-name
This will remove unnecessary complexity from configuration files which is a nice thing if you just started learning angular.
Yes use when create your component or service using ng g c --skipTests=true
I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.
Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?
I wrote a step by step guide on how to achieve this with webpack:
blob.tomerweller.com/reagent-import-react-components-from-npm
The general concept is the same as #scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.
Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.
You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:
window.YouTube = require('react-youtube');
Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:
npm install -g browserify
browserify index.js --standalone window > bundle.js
Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube
Recently I deployed some projects like trntv/yii2-starter-kit and so on.but all applications are publishing assets on '#vendor/bower' instead of'#vendor/bower/bower-asset'. I have read the question Yii2 Composer manage package in bower and bower-vendor and solved it . but I still feel confused about the directory vendor/bower/bower-asset.
What's the part does bower/bower-asset play in php application? it is not a composer package but many theme store in there. Furthermore, bower is a dependency management for javascript just like Composer for PHP , but how does it solve dependency for js package by PHP on this occasion that I have not install node.js environment?
The idea of Composer Asset Plugin is to download Bower / NPM packages and manage their dependencies without having Node JS, Bower and NPM installed (through PHP / Composer). Also it adds possibility to add JavaScript dependencies for PHP packages that use JavaScript libraries.
See for example yii2-bootstrap Yii2 extension (PHP) has a dependency on Bootstrap (JS + CSS):
"bower-asset/bootstrap": "3.3.* | 3.2.* | 3.1.*"
When you run composer install or composer update, all JS dependencies will be installed to vendor/bower folder.
This is built into the core, but very ambiguous, receives a lot of criticism and there are plans to remove it in 2.1.0 (as far as I remember, it was included before release of 2.0 even it was unstable). Unfortunately this is required and there is no normal way to disable it.
You can read more info on the extension's Github page.
As for folder name, it should be named bower, not bower-asset, if you installed everything correctly.
It's named like so automatically, make sure you have the latest version of plugin:
composer global require "fxp/composer-asset-plugin:~1.1.1"
I'd recommend to even switch to:
composer global require "fxp/composer-asset-plugin:*"
If you have problems or errors, execute:
composer global remove "fxp/composer-asset-plugin"
Then reinstall it again, delete vendor and composer.lock in your application folder and run:
composer install
After downloading all all the components of Polymer, I can not install it via the command line. Can someone write all of the step by step procedures?. I have already visited the site to see how but this does not work.
I am using Windows 10 and the command line for installation.
You might want to start off with Polymer Starter Kit, which includes instructions for setup and build.
https://github.com/PolymerElements/polymer-starter-kit
I am currently creating a portable consolidation of my workflow using Node-Webkit which has node.js embedded. Now my problem is getting grunt/gulp inside the project itself as it depends on the cli somewhat(avoidable, granted), and also is confusing to me on the architecture. Is it possible to find just a .js with grunt in it to include much like Jquery/Handlebars?
Is this all I need to just include and run?
No before that make sure you environment is up, get the package.json, GruntFile.js file. In GruntFile.js you can specify what you want to pre-process. For example jade,Less,coffee. It looks very much like a node function, for sample you can refer to link
Now to make this work you also need to install various contrib plugins as per your requirement. Then register every single task in GruntFile.js. It really speeds up the development.
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('test', ['jade', 'less','coffee']);
So to process less,jade,coffee, we need to run the module installations such as
npm install grunt --save-dev
npm install grunt <module name> --save-dev
There are many more interesting configurations to learn and documentation is really nice, please refer to getting started guide
This adds the required Grunt and grunt plugins to package.json