If I take the Polymer starter kit, it works well locally.
I can navigate to http://localhost:8080/ and all the links to the 3 views work fine.
Now, if I host this app on a web server (that is shared with other apps) on a URL such as http://myservername:8080/mywonderfulapp/, I am having trouble with the routing. Is there a way I can mention the app-route to take in the relative URL?
I tried making changes to the html files to have relative URLs
<link rel="import" href="./src/my-app.html">
<a name="view1" href="./view1">View One</a>
<base href="/mywonderfulapp/">
but I cant seem to fix the app-routing in a similar fashion.
All similar questions here on SO seem to be about a pre-1.0 version of Polymer, and mention page.js and hash-bang routing instead of the HTML5-history-friendly URLs and the app-route component.
I would prefer to make minimal code changes to ensure
the same code works locally as well as on the remote host
the app is not dependent on the base URL on which it is hosted - so, preferably I dont have to mention "mywonderfulapp" (from the URL above) anywhere in the code.
The closest I got with this so far, is to:
mention a placeholder for a URL prefix in the app-route pattern.
<app-route
route="{{route}}"
pattern="/:prefix/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
and then use that in the href attribute for the anchor
<a name="view1" href="/[[routeData.prefix]]/view1">View One</a>
<a name="view2" href="/[[routeData.prefix]]/view2">View Two</a>
<a name="view3" href="/[[routeData.prefix]]/view3">View Three</a>
The drawback with this approach is that I have to use the URL as http://localhost:8080/mywonderfulapp/ even when working locally, but at least I don't have to modify code anymore when deploying to my remote web server.
As stated in the comments, this was solved in a similar posting on stackoverflow.com/questions/39608956/polymer-error-on-reloading
Side note for firebase users - if you deploy this same version of starter kit to firebase and do a firebase serve at the CLI, this problem will even occur in the localhost, so you will need the above fix, even for there.
Related
I have a simple aspnet core web app that I run locally at my root http://localhost/ and I'm publishing it to my IIS server which is http://192.168.1.100/MyApp when I click on any links, I'm always brought to the root of the domain and not my sub-app.
I've tried relative urls like href='/home/index', href='home/index' but they work in one place and not another.
Is there a way to accomplish this with either vanilla html or some razor?
Toss a tilde (~) in front of any links you're creating with Razor, which will make the link relative to the app's root.
I'm using jykell to create a personal website. Check it out here chrisCPO.com general feedback is welcome. Still a wip.
UPDATE: looks like some of the site root vars are not being rendered on added pages. Home link code is:
<a href="{{ site.baseurl }}">
which works but is being overridden on the additional page?
If you visit the site notice click on experience on the sidebar.Then try to go to the home page.
Issue is if I add a page like the docs say to I get all of my added pages in-site links are broken. They are rendering as
<a class="sidebar-nav-item" href="">Home</a>
instead of
<a class="sidebar-nav-item" href="/">Home</a>
notice the href.
note: both of these issues are on production only, everything works fine locally.
What is the correct way to add an additional page so everything works?
using jekyll 3.0
You need to set your CSS paths in your layout relative to the root of the site, like this: /css/style.css (notice the first slash). Then the choice for folders or no folders becomes irrelevant. Permalinks can be managed globally in the config file. See the docs.
Newest progression:
It seems that I can exclude firebase from possible causes. Because I tested only with polymer deployment and got a bad result too.
My project uses Google Polymer and is deployed to firebase hosting. It needs to import some polymer html file from outside the firebase hosting.
So I changed the code from the following "local" to "outside". However "outside" does not work at all, where "local" means my local computer for testing or the firebase hosting.
Could you point out what is wrong in my code?
my-app.html has one of following links.
//"local: OK"
<link rel="import" href="some.html">
//"outside: not OK"
<link rel="import" href="https://outside.com/some.html">
And my-app.html uses the element, id="some", as
<template><some></some></template>
And "some.html" contains just one dom-module with the following simple template. Let me omitt writting other parts because they are minimum too.
<template><h1>test</h1></template>
In order for this to work, resources on other origins must be CORS-enabled (cross origin resource sharing) as this article states. The W3C draft on HTML imports also mentions it.
The link tag also has a crossorigin attribute, which may help here. E.g. <link rel="import" href="https://outside.com/some.html" crossorgin="anonymous">.
When I test my site on local host, the CSS and JavaScript are looking perfect. But when I push it to github repo I only see the HTML. No style. https://github.com/jaubut/website I've tried to change my URL to https://chanvrequebec.com in my config.yml. I've also try to change my href="/css/main.css" to href="css/main.css". BUT NOTHING happens at all. I don't know what to do. Please help. Thanks
your website is beautifully displayed at http://chanvrequebec.com/ - not https:// as described in your question!
If you have a SSL/TLS certificate for this domain, you'll need to change the url on _config.yml to the same protocol https://chanvrequebec.com
Things to be aware of:
1st. in you _config.yml you've set:
markdown: redcarpet
But from May 1st on, GitHub Pages will not support redcarpet anymore. So, I suggest you to change it to:
markdown: kramdown
2nd. Your website should be also completely accessible under http://jaubut.github.io/website, but it's not, due to mistaken configuration of GitHub Pages. You created a project website, so you'd need to set the baseurl to baseurl: '/website' to correct that. Or set the url to http://jaubut.github.io/website. But this not the best approach here, as all your internal links would redirect the pages to the github.io subdomain.
So, finally, to fix this properly, the best approach would be:
Create a new repository called jaubut.github.io (User website)
Transfer the content of your repo website into the master branch of the repo created on the previous step
Keep your _config.yml the way it is now
Your website will be accessible under http://jabot.github.io and also under http://chanvrequebec.com/
Delete website repository
If you have a SSL/TLS digital certificate for your domain chanvrequebec.com, don't forget to change the url on your _config.yml from url: "http://chanvrequebec.com" to url: "https://chanvrequebec.com"
Done!
I hope to have helped!
Your website is hosted in the subfolder 'website'. The correct link for the css is href="/website/css/main.css". The correct address seems to be: http://jaubut.github.io/website. If you want a custom domain, you should use a CNAME file, see: https://help.github.com/articles/setting-up-your-pages-site-repository/.
I am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.