Polymer/prpl-server

Polymer starter kit + polymer-cli + prpl-server-node (as library): help :D

shipagency opened this issue · 5 comments

Hi,

Thank you for the great server!
I know Polymer quite well, but -- believe it or not -- I managed to get away from "building" anything. At this point, I cannot avoid it anymore.

I have the express stock app. The tutorial says:

app.get('/*', prpl.makeHandler('.', {
  builds: [
    {name: 'modern', browserCapabilities: ['es2015', 'push']},
    {name: 'fallback'},
  ],
}));

Running the stock polymer build, I end up with a bunch of directories:

  • es5-bundled
  • es6-bundled
  • es6-unbundled

I understand that the possible detected capabilities are es2015, push, serviceworker, modules.

Now... questions:

  • does modern represent a directory name?
  • how do I make sure that there is a match between what's been built and the way it gets served? polymer build creates es5-bundled, es6-bundled and es6-unbundled -- surely I should tell node-prpl what they are and what they represent?
  • Do I need to play with basePathg to make this work? I've never used it, and I am not sure how it works...

So yes, they are directory names. I ran the server "as is" and got warnings:

so, I changed it onto:

app.get('/*', prpl.makeHandler('./public/build', {
  builds: [
    {name: 'es6-unbundled', browserCapabilities: ['es2015', 'push']},
    {name: 'es6-bundled', browserCapabilities: ['es2015']},
    {name: 'es5-bundled'},
  ],
}));

Is this a sane way to go?
Shouldn't the default built of polymer serve be compatible with the PSK out of the box?

...and it doesn't work!
Here is the repo. This is basically PSK2 + Pure express + extra lines to add PRPL handler to express.
I think getting this to work, AND a tutorial on how to get this very setup (once it works) would be immensely beneficial.
I am calling it a day, but I hope somebody in the US will enlighten me on this one...

Sorry here is the link to the repo:

https://github.com/shipagency/sasit

I originally encountered problems just like you. After setting autoBasePath to true in polymer.json, the problems are gone. Maybe you could try these

For posterity, this works:

  prplOpts = {
    forwardErrors: true,
    builds: [
      { name: 'es6-unbundled', browserCapabilities: ['es2015', 'push'] },
      { name: 'es6-bundled', browserCapabilities: ['es2015'] },
      { name: 'es5-bundled' }
    ]
  }
  prplPath = './public/build'

  app.get('/*', (req, res, next) => {
    prpl.makeHandler(prplPath, prplOpts)(req, res, next)
  })

This works effectively out of the box with polymer build.

If you want to differentiate development and production:

  // Work out prpl server option depending on environment
  var prplOpts = {}
  var prplPath = ''
  if (app.get('env') === 'development') {
    prplOpts = {
      forwardErrors: true,
      builds: [
        { name: 'all' }
      ]
    }
    prplPath = './public'
  } else {
    prplOpts = {
      forwardErrors: true,
      builds: [
        { name: 'es6-unbundled', browserCapabilities: ['es2015', 'push'] },
        { name: 'es6-bundled', browserCapabilities: ['es2015'] },
        { name: 'es5-bundled' }
      ]
    }
    prplPath = './public/build'
  }

  app.get('/*', (req, res, next) => {
    prpl.makeHandler(prplPath, prplOpts)(req, res, next)
  })

(Male sure there is a symlink called "all" that points to public...