How to set baseUrl in Polymer Starter Kit?

Question

How to set baseUrl in Polymer Starter Kit(light version)?

(similar: Serving Polymer App to a /path not at root)

I want to run it in subfolder (dl and unzipped PSK there, server is xampp):

http://localhost/test/psk/app/

When I go to that URL, app is redirecting to:

http://localhost/

with this note:

Can't find: http://localhost/test/psk/app/#!/test/psk/app/. Redirected you to Home Page Ok

There are no console errors, app work fine except the URL problem.

Here are app.js:

// Sets app default base URL
  app.baseUrl = '/';

  if (window.location.port === '') {  // if production
    // Uncomment app.baseURL below and
    // set app.baseURL to '/your-pathname/' if running from folder in production
    // app.baseUrl = '/polymer-starter-kit/';


   // If this is baseURL:
   //app.baseUrl = 'http://localhost/test/psk/app/';
   //Then click on the menu -  reloads the page with 404 URL:
   //http://localhost/test/psk/app/users
  }
  ...

and routing.html

<script src="../bower_components/page/page.js"></script>
<script>
  window.addEventListener('WebComponentsReady', function() {

      console.log('routing.html');

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/

    // Removes end / from app.baseUrl which page.base requires for production
    if (window.location.port === '') {  // if production
      page.base(app.baseUrl.replace(/\/$/, ''));
       console.log("app.baseUrl");
       console.log(app.baseUrl);
    }

    // Middleware
    function scrollToTop(ctx, next) {
      app.scrollPageToTop();
      next();
    }

    function closeDrawer(ctx, next) {
      app.closeDrawer();
      next();
    }

    function setFocus(selected){
      document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
    }

    // Routes
    page('*', scrollToTop, closeDrawer, function(ctx, next) {
      next();
    });

    page('/', function() {
      app.route = 'home';
      setFocus(app.route);
    });

    page(app.baseUrl, function() {
      app.route = 'home';
      setFocus(app.route);
    });

    page('/users', function() {
      app.route = 'users';
      setFocus(app.route);
    });

    page('/users/:name', function(data) {
      app.route = 'user-info';
      app.params = data.params;
      setFocus(app.route);
    });

    page('/contact', function() {
      app.route = 'contact';
      setFocus(app.route);
    });

    // 404
    page('*', function() {
      app.$.toast.text = 'Can\'t find: ' + window.location.href  + '. Redirected you to Home Page';
      app.$.toast.show();
      page.redirect(app.baseUrl);
    });

    // add #! before urls
    page({
      hashbang: true
    });

  });
</script>

Answer 1

By no means I pretend to give definitive answer here.

I do not think running from sub-folder is currently working. I have tried several hacks (various combinations of setting app.baseUrl, hacking routes, using page.base() ) none have bear fruit and I gave in for the time being.

Polymer site https://elements.polymer-project.org/elements/app-route claims (at time of writing):

app-route 0.9.1

app-route is an element that enables declarative, self-describing routing for a web app.

n.b. app-route is still in beta. We expect it will need some changes. We're counting on your feedback!

so, what I have experienced so far (and wish to share) is: either you'll run your app directly from the file, from the root of web server or from root on non standard http port (to debug your app you can use python http module or some other small server meant for static files that would work in fashion http://localhost:port) Deployment would require the same constrains.

suggested run method: https://www.polymer-project.org/1.0/start/toolbox/set-up#serve-your-project

What I did not try is using .htaccess to rewrite URL base (that could work in theory, but it would be really slow, as app route calculation/reaction for this kind of app shall not happen at server side, but on client side, and would be only applicable to apache like servers, and most unwanted, you'll loose client context)

To be honest, I would rather, on this issue, be proven wrong. ;)

Answer 2

Set the app.baseUrl when not using a port number (i.e. in Production)

In app.js:

// Sets app default base URL
app.baseUrl = '/';
if (window.location.port === '') { // if production
    // Uncomment app.baseURL below and
    // set app.baseURL to '/your-pathname/' if running from folder in production
    app.baseUrl = '/base-url/you/want/to/use/';  // <- Set this here
}