AppEngine Support

[Trupal00p]

It would be really awesome if this generator supported AppEngine out of the box. I would submit a pull request with how I did it below but I'm pretty new to the yeoman/gulp workflow so anything I write will probably be a mess.

Here's how I got it working manually:

1. Install generator-appengine
2. Install generator-polymer (this project)
3. cd to project folder
4. "Yo polymer"
5. cd into app folder
6. Yo appengine
7. Update app.yaml file to read:

application: polymer-test
version: default
runtime: python27
threadsafe: yes
api_version: 1

handlers:

 - url: /
   static_files: index.html
   upload: index.html

 - url: /bower_components/
   static_dir: ../bower_components

 - url: /elements/
   static_dir: elements

 - url: /images/
   static_dir: images

 - url: /scripts/
   static_dir: scripts

 - url: /styles/
   static_dir: styles

 - url: /.*
   static_files: 404.html
   upload: 404.html

Then update the gulp.js file to use gulp-replace to fix the bower_components path in app.yaml when the copy task is run:

  var app = gulp.src([
    'app/*',
    '!app/test',
    '!app/precache.json'
  ], {
    dot: true
  })
  .pipe(greplace('static_dir: ../bower_components','static_dir: bower_components'))
  .pipe(gulp.dest('dist'));

I used gulp-run to get the dev server started with the serve task and switched browsersync to use proxy mode:

(had to use a batch file to launch the dev server since gulp-run has issues with file paths that contain spaces on windows)

var run = require('gulp-run');

// Watch Files For Changes & Reload
gulp.task('serve', ['styles', 'elements', 'images'], function () {
  run('launch_gae_dev_server.bat').exec();
  browserSync({
    notify: false,
    snippetOptions: {
      rule: {
        match: '<span id="browser-sync-binding"></span>',
        fn: function (snippet) {
          return snippet;
        }
      }
    },
    // Run as an https by uncommenting 'https: true'
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    // server: {
    //   baseDir: ['.tmp', 'app'],
    //   routes: {
    //     '/bower_components': 'bower_components'
    //   }
    // }
    proxy: 'localhost:9080'
  });

batch file:

python "[PATH TO APPENGINE]\dev_appserver.py" --port=9080 [app name]

[robdodson]

Thanks for sending this over. @addyosmani and I have talked a bit in the past about improving the deployment experience. Having it be an optional last step in the generator could be interesting option. I'm not sure if it would be better to bake something like that into this generator or create a separate generator specific to polymer + app engine. I'm leaning toward a separate generator that maybe composes the Polymer generator, then does its platform specific magic so you could have one for app engine, one for heroku, another for nodejitsu, etc. But I'm interested in what others think is the best approach.

[arthurvr]

Aren't we able to reuse things from generator-mobile? It has quite a bit of deployment/hosting features.

[robdodson]

Probably. The structure of PSK and WSK are pretty similar. It looks like generator-mobile is the official generator for WSK and it includes this behavior so it seems like the PSK generator should do the same. We could explore copying the bits from generator-mobile that we need, or maybe there's a solution that abstracts those parts so we can stay in sync better, if that's desirable.

On Sat, Jul 4, 2015 at 12:27 PM, Arthur Verschaeve <notifications@github.com

wrote:

Aren't we able to reuse things from generator-mobile? It has quite a bit of deployment/hosting https://github.com/yeoman/generator-mobile#hosting-and-deployment-options features.

— Reply to this email directly or view it on GitHub https://github.com/yeoman/generator-polymer/issues/205#issuecomment-118544599 .

[arthurvr]

It's been a while since I seriously looked at how generator-mobile is structured, though, if possible I'd rather see us splitting it up and various smaller pieces or composable generators and try to reuse as much as possible here (and in other generators)

https://github.com/yeoman/generator-mobile/issues/84 is a good example of something we could just reuse everywhere, but I think we should be able to do even better.

Maybe @crhym3 has any thoughts on this?

[robdodson]

if possible I'd rather see us splitting it up and various smaller pieces or composable generators and try to reuse as much as possible here (and in other generators)

+1

[arthurvr]

@crhym3 it would be cool if you could tell us what you think about this.

[robdodson]

@arthurvr I spoke with @crhym3 about this, he said he's no longer working on generator-mobile. He had a few points worth thinking about.

1. He found it difficult to download the source and mutate it after the fact. He said it introduced a lot of complexity and thought it might have been easier if the generator had its own copy of the templates.
2. He agreed that the modules that actually download the source would be useful as universal abstractions that anyone could use. But I think it'd be up to the community to do that work.

[arthurvr]

He found it difficult to download the source and mutate it after the fact. He said it introduced a lot of complexity and thought it might have been easier if the generator had its own copy of the templates.

He agreed that the modules that actually download the source would be useful as universal abstractions that anyone could use. But I think it'd be up to the community to do that work.

Those are already available, generator-mobile just doesn't really use the optimal way (imho).

[robdodson]

@arthurvr should we try refactoring it to see if we can create a more composable structure and then apply that same thing over here?

[etale-cohomology]

I run into trouble when I try to modify the gulpfile.js.

When I include the following line

.pipe(greplace('static_dir: ../bower_components','static_dir: bower_components'))

in the gulpfile.js file and run the gulp command, I get the following error:

ReferenceError: greplace is not defined

Also, instead of having

.pipe(gulp.dest(dist()));

my file has

.pipe(gulp.dest('dist'));

but there's no error when I switch one with the other. Is this difference important?

[MeTaNoV]

/sub

[robdodson]

have you imported greplace in your file? The error you're seeing is because javascript can't find that function. dist() and 'dist' will produce the same thing in this case so there's no difference. I believe you can pass paths to the dist() function, so you could do dist('/foo/bar'), and it would produce dist/foo/bar. It's just there in case we decide to ever change the directory from 'dist' to something else, we don't have to go around manually updating all the paths

[etale-cohomology]

So by adding the following line (at the beginning of gulpfile.js, with the rest of the var foo = require('bar') ) it worked!

var greplace = require('gulp-replace');

I don't know the first thing about javascript or web development, but (some of) the Polymer instructions are so easy to follow that I could develop a 'responsive' 'web app' without having the least idea what I was doing. Deployment to the Google App Engine, though, has proved to be less... straightforward. (Firebase is cool, but expensive)

For those interested, following the instructions in this thread I can run the app folder using the Google App Engine Launcher (clicking 'Run', and then clicking 'Browse'), but 'Deploy' still shows only a white screen. I think this is some other error on my part, and unrelated to the instructions here, but I leave this for future reference.

(PS. I loved your Polycasts, Rob!)

[robdodson]

Glad you got it working :+1: