Polymer / prpl-server

⚠️Maintenance mode⚠️ An HTTP server for Node designed to serve PRPL apps in production.
Other
425 stars 29 forks source link

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

Closed shipagency closed 6 years ago

shipagency commented 6 years ago

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:

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

Now... questions:

shipagency commented 6 years ago

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?

shipagency commented 6 years ago

...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...

shipagency commented 6 years ago

Sorry here is the link to the repo:

https://github.com/shipagency/sasit

gary9716 commented 6 years ago

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

shipagency commented 6 years ago

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...