Here is the Topeka app as it's found on Google App Engine Appspot.
Here is the (purported) Github index.html file.
Note: the app's source code is minified.
Question
Where is the un-minified source code for the Topeka app?
If it's the Github repository, then where (for example) is the file that's imported by <link rel="import" href="components/topeka-elements/topeka-app.html"> and the others in in lines 46-51 of index.html? I don't see any /contents/ directory in the repository.
If the source code is not the Github repository, where is it?
What's the deal with this minified build.js file, etc.? That's different from the customary index.html file. I haven't seen Polymer apps use that before.
Notes:
#bpowers says on 9-14-2015 in Polymer Slack Site:
it looks like they updated the build files a month ago, but its still old 0.5. I was able to build it by opening up a terminal and doing:
git clone https://github.com/Polymer/topeka && cd topeka && npm install && bower install && ./node_modules/vulcanize/bin/vulcanize -o build.html index.html --strip --inline --csp -- clone it, move into the dir, install the deps, and then run vulcanize. The vulcanize command is from the deploy.sh script in the repo.
if I run a web server in that directory, the build.html runs
That Github repo is the web application. The topeka elements are listed as a dependency in the bower.json - "topeka-elements": "Polymer/topeka-elements#^0.5.0"
Find the source here
Looks like they've checked in the vulcanized build output from the deployment - see deploy.sh
Related
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
I want to view this demo of Polymerfire in my browser.
I expect to see the demo run in my browser. Instead, I see a blank page and the following console error.
console.log.error.message
GET http://localhost:8080/ 404 (Not Found)
Navigated to http://localhost:8080/
I used the following procedure:
I installed the Polymer-CLI multi-tool per the instructions found here.
I created a project using the Polymer Starter Kit (PSK).
I named the project my-app.
I installed the Github repo found here using the CLI:bower install ---save firebase/polymerfire
I opened the terminal and navigated to the app's root directory.
cd path/to/my-app
I ran the following Polymer-CLI command (per the instructions found here).polymer serve
What can I do to try and solve this so I can see the demo run in my browser?
The best way to run an elements demo is to check it out...
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
I have never tried to run the demos from a bower install'd folder but, the above method will work.
You also have to navigate to the correct localhost path:http://localhost:8080/components/polymerfire/demo/
So the complete procedure (from the command line) is:
First, install the polymer-cli per the instructions found here.
npm install -g bower
npm install -g polymer-cli
Then run the following.
shell.sh
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
open http://localhost:8080/components/polymerfire/demo/
I'm getting started with WebStorm 9. I created an HTML 5 Boilerplate project and I noticed a src and a dist folder.
Is there a standard command to compile the content of the src folder into the dist folder?
This is how my project looks like:
It looks like HTML5 Boilerplate comes with a gulpfile.js file, so it looks like it wants to use Gulp to build assets from src into dist.
If you have Gulp installed, you can run gulp build in your project directory.
If you don't have Gulp installed, you should install it with npm. HTML5 Boilerplate has a package.json file that includes Gulp, so install npm and then run npm install in your project directory, and that should install everything that HTML5 Boilerplate expects.
If you are using webStorm: just right click the package.json, you will find something like run npm install. It will do everything for you. After this right click the gulpfile.js file, and choose show Gulp tasks. Then you will find what you can do in Gulp window.
Generator: https://github.com/Swiip/generator-gulp-angular
On my recent projects I just pushed everything with git even the minified versions. But the dist/ folder is on the gitignore.
I read you shouldn't store minified etc. versions anyways in your git, because you don't need version tracking there.
This gulp plugin uses git: http://yeoman.io/learning/deployment.html
1) So do I push it via git and then build it again on my server with gulp build?
2) What is a good way to automate it? I would like to do s.th. like this:
gulp serve:dist Serve it on my localhost
gulp serve:server Push it to my server delete old version and build the new version there
No. What you should do is work locally with all your project and when you have to deploy the minified file, only run gulp build. The dist directory will be created and the only thing you have to do is to initialize git in here with git init and then add your server as remote.
You only have to re-run the build and push the content of your dist when you want to update it.
I don't think a simple thing as this is worth to optimize.
I'm creating a yeoman generator for my web projects.
But I wonder how I can try and test my changes before publishing it?
Since I have installed it once, it will not run my local development version, instead it runs my installed version.
Any suggestions on how can test-run my local development version?
I finally found some information on how to accomplish this:
if you wish to develop on the generators code base, and debug locally, a common way to do so is to rely on npm link
git clone the generators repo locally
cd into that repository and run npm link. It'll install required dependencies and install the package globally, using a symbolic link to your local version.
If you want to install sub generators, you need to do so in the context of a yeoman-generator package linked earlier. Cd into the sub generators package you have cloned locally and run npm link.
We now have everything linked and known on the system, we now need to link the sub-generator repo into the parent one, yeoman-generator cloned and linked in step 1 & 2.
https://github.com/yeoman/generator/wiki/Testing-generators
EDIT:
Updated link for info: https://yeoman.io/authoring/index.html
If by "running locally" you mean the ability to test your generator and its flow you can simply do this.
In your project directory folder run npm link. If this passes in flying colors, go to step 2.
Open a terminal and cd into the folder you wish to initiate a project.
Run yo generator-theNameOfYourGenerator. This will run your generator.