Locally hosted Polymer project URL path customization - polymer

applications: http://localhost:8080
reusable components: http://localhost:8080/components/myapp/
These are the two paths that allow me to access my prooject after I run polymer serve
Using app-route element, I can change the myapp part. But I want to remove the components part.
So, what I want is http://localhost:8080/myapp/
How can I achieve this?

I think you are getting confused between urls represented by the server and the logical urls that "Normally" don't even get passed to the server. <app-route> (and its companion part <app-location>) rely on pushing state into the address bar of the browser but that doesn't normally mean a request to the server to fetch a file.
I say "Normally" because obviously the user could copy and paste the address bar into the browser (or just refresh the page when its displayed in the browser) and that causes that url to be sent to the server. Normally a server should automatically respond to those "Not real files" requests with "/index.html".
Polymer serve doesn't really try and address this sort of thing. Its mainly a quick server for your application testing. The first url it offers (http://localhost:8080) will be what you use if you have a full app. Your index.html file should sit at the root of the url (ie the directory you run polymer serve from) and it will then use html imports to load your components from which ever subdirectories they happen to be in. Your urls should reflect that. So if you main app is in the src/ subdirectory you should refer to it <link rel="import" href="/src/my-app.html"> NOTE IT IS IMPORTANT TO REFER TO IT VIA AN ABSOLUTE URL SO THAT WHEN A USER PASTES the url into the address bar and the server returns /index.html the elements it then requests are at the correct path and not somewhere like /application/logical/path/src/myapp.html
The second url it offers is basically you are building your own element that will ultimately go in someone elses bower_components but which for now your are developing in its own repository with its own bower_components directory at the same level as the element. Your element will want to import something like <link rel="import" href="../polymer/polymer.html" but in physical directory terms would be at bower_components/polymer/polymer.html. In this case polymer is mapping bower_components to http://localhost:8080/components and your root to http://localhost:8080/components/myapp. So when your refer to../as part of your relative its basically insidebower_components/` already and will therefore pickup the rest of the reference to your element OK.

Related

HTML file structure's affect on website URL

I currently have a simple website, hosted on github pages with a file structured in hierarchical directories as shown below:
/foobar.com
/css
/js
/images
/html
/news
/news_content
fizz.html
buzz.html
news.html
about.html
contact.html
index.html
However, when I am on the buzz webpage for example, this has resulted in the URL to become:
https://foobar.com/html/news/news_content/buzz.html
Is there a way to change this URL so that it doesn't show all the folder directories and instead, just the file itself i.e. https://foobar.com/buzz.html as I don't want to separate all the individual HTML files into separate folders?
Yes, you can change the URL to be more user-friendly by using server-side URL rewriting or client-side JavaScript.
For server-side URL rewriting, you'll need to use a web server such as Apache or Nginx and configure it to rewrite the URLs. You can find more information on how to do this for Apache or Nginx by searching for "URL rewriting" on their websites or forums.
For client-side URL rewriting, you can use JavaScript to manipulate the URL shown in the browser's address bar. However, this method may not be ideal for search engines or users who have JavaScript disabled.
If you are using GitHub Pages to host your website, you might be able to achieve URL rewriting by using Jekyll. Jekyll is a static site generator that supports URL rewriting and can be used in combination with GitHub Pages to host your website. You can find more information on how to do this by searching for "Jekyll URL rewriting."
How a URL is resolved to a resource depends on the HTTP server and/or the server side programming language you are using.
Github Pages provides no features that allow anything other than a direct reflection of the directory layout in the URL.
The closest you could come would be to write a program that transformed the input (the file structure you want to work with) into the file structure that Github Pages will express as the URLs you desire (and then run it as a build step that takes the pages out of your working branch and into your gh-pages branch; possibly you could use actions to do this).

What's the difference between http://domain/path and http://domain/path/ in a url

I served a react page under 127.0.0.1/react/ sub directary with my gateway. It can be viewed by explorer with 127.0.0.1/react/. But if I input 127.0.0.1/react it returns my vue page served under 127.0.0.1 which failed to match any routes.
There is another example https://www.curseforge.com/minecraft/mc-mods.
https://www.curseforge.com/minecraft/mc-mods is okay while https://www.curseforge.com/minecraft/mc-mods/ returns 404 not found. What's the difference?
Ordinary users might treat them as same url, they would expect both of them can access the page. So how should I make them both accessable?
The server can return whatever it wants for any path, and doesn't need to follow any particular standard conventions. However, most servers do follow some norms:
/react/ usually ends up fetching the index file (usually index.html unless configured otherwise) from the react folder under the web root. This is returned to the client transparent... the client isn't redirected.
/react This is a request for a file named react under the main root. However, in the absence of such file, and the presence of a folder, it's common to redirect the client to /react/.
How you do this depends entirely on your server configuration. You didn't tell us the server, so we can't point you in the right direction.

html post from subfolder - post url includes top level site in URL

I have a site:
example.com/index.html
There is a subfolder (subsite):
example.com/subsite/different_index.html
different_index.html contains a form:
<FORM action="different_index.html?action=edit">
However, when the submit input button on this form is clicked, the page attempts to redirect to:
example.com/subsite/subsite/different_index.html
I've tried making the form action the exact url needed:
<FORM action="example.com/subsite/different_index.html?action=edit"> <!-- target self -->
But I still get:
example.com/subsite/subsite/different_index.html
subsite is duplicated within the URL.
Any ideas how to correctly target this form?
The fact that you have a form is actually irrelevant. What you are really asking is about referencing resources and the rules are pretty simple:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working. Additionally, many servers are hosted on operating systems the have case-sensitive file systems, so always refer to files and folders in the same case that is actually used. Again, not doing this may work for you locally, while you develop (because you haven't moved the files to the remote server yet), but don't let that lull you into thinking that case doesn't matter.

How can I simply expose local .html files via web browser using an application server (Glassfish)?

Lets say I have a directory of .html files, accessible by the app server, and I want to display to users so they can access them with their browser:
/import/tps-reports/index.html
/import/tps-reports/report1.html
/import/tps-reports/report2.html
Is there a way I can expose the tps-reports directory to do this so that a user can access them via:
http://www.example.com/tps-reports/index.html
http://www.example.com/tps-reports/report1.html
Also, keep in mind that index.html may reference the other pages:
Report 1
So those links need to work as well.
Here is a possible answer:
http://docs.oracle.com/cd/E19776-01/820-4496/geqpl/index.html
You can set up an alternate doc root so that certain URI patterns point to different paths.
The examples are only really showing relative paths though...I wonder if its "ok" to use this to reference local file systems.

Do I need to specify a webpage's url?

I've uploaded several files to my server and it's really quite baffling. The home page is saved as index.html, and when I type in the URL of said page it miraculously, and quite successfully shows the right page. What about my other pages? I have linked to them from the home page with the following code:
About Us
How does my html file, presumably called about.html, supposed to know that its URL is "http://www.example.com/about/"? I am dubbing this "The Unanswered Question" because I have looked at numerous examples of metadata and there is nothing about specifying the URL of a page.
It depends on what type of server you are running.
Static web servers
If it is the simplest kind of static file server with no URL aliasing or rewriting then URLs will map directly to files:
If your "web root" was /home/youruser/www/, then that means:
http://www.example.com -> /home/youruser/www/
And any paths (everything after the domain name) translate directly to paths under that web root:
http://www.example.com/about.html -> /home/youruser/www/about.html
Usually web servers will look automatically for an "index.html" file if no file is specified (i.e. the URL ends in a /):
http://www.example.com/ -> /home/youruser/www/index.html
http://www.example.com/about/ -> /home/youruser/www/about/index.html
In Apache, the filename searched for is configurable with the DirectoryIndex directive:
DirectoryIndex index.html index.txt /cgi-bin/index.pl
That means that every request to a path that ends in a / (and to add yet another rule, under some common settings it will automatically append a / if the path is the name of a directory, for example 'about'):
http://www.example.com/ -> /home/youruser/www/index.html
-> or /home/youruser/www/index.txt
-> or /home/youruser/www/cgi-bin/index.pl
Web servers with path interpretation
There are too many different types of servers which perform this functionality to list them all, but the basic idea is that a request to the server is captured by a program and then the program decides what to output based on the path.
For example, a program might perform different routes for basic matching rules:
*.(gif|jpg|css|js) -> look for and return the file from /home/user/static
blog/* -> send to a "blog" program to generate the resulting page
using a combination of templates and database resources
Examples include:
Python
Java Servlets
Apache mod_rewrites (used by Wordpress, etc.)
Links in HTML pages
Finally, the links in the HTML pages just change the URL of the location bar. The behavior of an HTML link is the same regardless of what exists on the server. And the server, in turn, only responds to HTTP requests and only produces resources (HTML, images, CSS, JavaScript, etc.), which your browser consumes. The server only serves those resources and does not have any special behavioral link with them.
Absolute URLs are those that start with a scheme (such as http: as you have done). The whole content of the location bar will be replaced with this when the user clicks the link.
Domain relative URLs are those that start with a forward slash (/). Everything after the domain name will be replaced with the contents of this link.
Relative URLs are everything else. Everything after the last directory (/) in the URL will be replaced with the contents of this link.
Examples:
My page on "mydomain.com" can link to your site using the Example.com about just as you have done.
If I change my links to about then it will link to mydomain.com instead.
An answer your question
How does my html file, presumably called about.html, supposed to know that its URL is "http://www.example.com/about/"?
First, the file itself has no idea what its URL is. Unless:
the HTML was dynamically generated using a program. Most server-side languages provide a way to get this.
after the page is served, client-side scripts can also detect the current URL
Second, if the URL is /about and the file is actually about.html then you probably have some kind of rewriting going on. Remember that paths, in their simplest, are literal translations and /about is not the same as about.html.
Just use /about.html to link to the page
Theoretically, it's better for URLs in your documents to be relative, so that you don't have to change them in the event you change the domain or the files location.
For example, if you move it from localhost to your hosted server.
In your example, instead of www.example.com/about.html use /about.html.
Given the link above you would need a about page named index.html located in a directory named about for your example to work. That is however not common practice.
I'm a bit confused, but here is some information. Any file named "index" is the default display page for any directory(folder) when trying to view that directory.
All files in a folder are always relative to that directory. So if your link is in a file, within a different directory, then you must type in that directory along with the file. If it is the same directory, then there is no need to type in that directory, just the file name.
about.html doesn't know what it's URL is, its the index.html file that calls your about.html file.
When you're in any given directory, linking to other pages within that directory is done via a simple relative link:
About Us
Moving up a directory, assuming you're in a sub folder (users) perhaps you can use the .. operator to navigate up one directory:
About Us
In your case your about page is in the same directory as the page you're linking from so it just goes to the right page.
Additionally (and I think this may be what you're asking) if you have:
about.html
about.php
about.phtml
about.jpg
for example, and you visit http://www.yoursite.com/about it will automatically bring up the html page and the other pages should be referenced explicitly somewhere if you want them to be used.