so I'm trying to write a simple hello world page using Polymer. The problem I'm having is whenever I run the #polymer serve command and load up my webpage it can't find the webcomponents.min.js and the iron-component-page.html. Any reason as to why this is happening and how can I fix it?
index.html
<!doctype html>
<html>
<head>
<title>polymer-element</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="polymer-element.html"></iron-component-page>
</body>
</html>
I tried some of the answers given here but still can't get it to work.
I haven't quite figured it yet but polymer is using polyserve under the hood, and I think that tries to be clever with url to file directory mapping. I think it assumes a directory structure where you are developing a re-usable component so after complete when your element also sits in bower_components, you go ../web-component/web-component.html to find the import, but your development structure has bower_components within the directory you are actually developing your component in.
When dealing with an app, I just put "bower_components" at the route of my app directory, and my elements in the "src" directory as a subdirectory of that. Then I explicitly use /bower_components/web-component/web-component.html in my html imports.
Running polymer serve from the root of your app then serves that at localhost:8080/
Short answer: Assuming your working dir is "x" and components are in "x/components" , create a soft link thus:
$ ln -s components bower_components
Long answer:
polymer serve does not seem to read/honor .bowerrc.
My components directory is "components" under which all my polymer components are present.
.bowerrc --> { "directory":"components"}
Running "polymer serve" starts the server, but when I navigate to "http://localhost:8000/index.html", I get a blank page.
Upon inspecting the network traffic in the browser, all requests to webcomponentjs* are returning 404s.
So.. polymer serve is not honoring a non-default components directory. It is expecting bower-components dir.
Related
I have recently started using github pages and so far I am using the default index.html as my main page. How do I use another page as my default page? For example if in my gh-pages branch I have my html in a folder src/. How do I set ./src/index.html as my default instead of ./index.html?
Create dummy index.html and put this in the header
<meta http-equiv="refresh" content="0; url=http://mysite.github.io/folder/index.html" />
Change http://mysite.github.io/folder/index.html to your desired url.
I though Steven Penny's comment was good, but on Windows it was not super straightforward to create a symlink inside git. Only more recent versions of git-for-windows support symlinks.
If you enable support via the core.symlinks config variable you can mklink index.html src\file.html and gh-pages will show file.html as the landing page.
I am new to Spring and I am trying to make a beautiful Web Application, and so far I set up everything, and if I run my page on the browser it shows as it is supposed. But if I run it with tomcat on port 8080 (I am using Intelijj) it doesn't load css and js files not even pictures.
I have literally searched this problem and open all the StackOverflow similar questions, I tried to write a configuration file, but it doesn't do anything, and I am uncertain about this approach because I have seen examples of people that did not write any configuration, but still they managed to make all their static resources load, and so on. Is it some secret application properties that need to write? Or there is a config code that has to write?
My resources folder looks like this:
-resources
-static
-CSS
-things.css
-JS
-datepicker.js
-Images
-many pictures
-templates
-Home.html and other pages
And the code that I used to refer to static-CSS-things.css is like this:
link href="../static/CSS/things.css" th:href="#{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"
I thought this would make my css file to load, but it doesn't. Same for the js and the pictures. Thank you!
Ensure your css and js files are in the following structure:
src/main/resources/static/css/things.css
src/main/resources/static/js/things.js
Ensure you are calling your static resources from pages that are under the spring boot template folder, which is in src/main/resources/templates
Always refer to your resources using the thymeleaf tag, because this way no matter the port you are running your application, it will always load properly.
src/main/resources/templates/example.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- CSS -->
<link th:href="#{/css/things.css}" rel="stylesheet"></link>
<!-- JS -->
<script th:src="#{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>
If still not working, try to use the inspect from Google Chrome, go to Network tab and check what error is returning from your css and js files, then comment here.
Assuming you have css and js folder under static folder then use it like this -
<link href="css/custom.css" rel="stylesheet">
<script src="js/custom.js"></script>
you might wanna take a look at these too -
https://www.springboottutorial.com/spring-boot-with-static-content-css-and-javascript-js
https://www.baeldung.com/spring-mvc-static-resources
Worth noting, make sure you have thymeleaf dependency(ies) and tags appropriately.
I am relatively new to CSS and HTML, but I just had a tutorial on connecting HTML documents to CSS sheets. It didn't work, and I have searched everywhere for the answer. All the sites had feasible answers, but none worked for mine.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>FlyHighGames|Home</title>
<meta charset="utf-8" /> <!--Bro what does this even mean?-->
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Please help!
use folder name if you saving css in any folder
<link rel="stylesheet" href="foldername/stylesheet.css"/>
As others have said, you need to use the link element:
<link rel="stylesheet" href="pathToCSSFile">
FYI the: type="text/css" part is no longer needed in HTML5
But, to correctly indicate the path to the .css file, follow these
rules:
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.
NOTES:
If you feel that you've referenced the CSS file correctly, you may have a syntax error in that file which is preventing the CSS from being processed. You can run your CSS through a validator (https://jigsaw.w3.org/css-validator/) to see if it's valid.
You can also hit the F12 key with your web page open and click on the Network tab and refresh the page. This will show you all the network requests made by the current page. If you see the CSS file listed and then see a 404 message next to it, you know the file wasn't found.
The link tag is used to link to external style sheets. check your css file path try this code work fine
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
you need to attech style sheet beetween head tag.
As other said, use the link tag, but I sometimes get an error, if I add a slash at the end as required in XHTML as it automatically closes the tag and doesn't allow it to access other parts of the page.
Create a css stylesheet.css file and save in folder where HTML file exits
Provide complete path of your stylesheet file
example
<link href="Content/css/stylesheet.css" rel="stylesheet" />
I was under the impression that if I vulcanized my index.html, it would extract and concatenate my html imports. Here's a snippet from my index:
<!doctype html>
<html unresolved>
<head>
<base href="/">
<script src="/assets/traceur-runtime.js"></script>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/bower_components/core-icon/core-icon.html">
<link rel="import" href="/bower_components/core-item/core-item.html">
<link rel="import" href="/bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
and so forth. I am including just the polymer bits I need. I don't have any self-defined custom elements (I'm just assembling a UI from core- and paper- components).
I was under the impression that some combination of --inline and other flags would result in a very long index.html that no longer directly imported the bower_component files. I could be wrong about that, I suppose, but that's my goal. It's not that big of a deal; I am not even sure that the correct answer here is making my index.html huge in order to avoid 20 extra loads, especially with caching and all that. Still, there's no way to test this without having an inline version to test.
Edit:
I'm running vulcanize in the root of my built dist directory:
dist/
index.html
bower_components/
and it runs, I've tried with --inline and --csp and both, and it basically just spits index.html back out into vulcanized.html. If I do --strip, it strips whitespace, but that's it.
I have never tried to Vulcanize my Index.html, I always have an elements.html file which has all my imports and I finally import the elements.html in my Main file.
Whenever I try to Vulcanize my elements.html file it works as expected by concatenating all the Elements' definitions into one file for decreasing the number of http requests the browser has to make.
The problem might be that you are using the very latest version of Volcan which has been reworked on and the --csp feature has been moved to a standalone cli app by itself and the --strip has also be moved to the html-minifier app.
You might want to check that out.
https://github.com/PolymerLabs/crisper
https://github.com/kangax/html-minifier
Aha, I figured it out- I was using href="/bower_components/core-icon/core-icon.html" when I should have been using href="bower_components/core-icon/core-icon.html".
Note the lack of the leading slash. Now I just need to figure out how to wire it up so it can find bower_components properly.
I have Rails application with documentation which is static html pages in the /public folder.
The tree of my public folder:
-public
-docs
-intro
introduction.html
-css
some.css
index.html
Index.html file is:
<link rel="stylesheet" href="css/some.css" type="text/css" />
Some of the text
<li>href="intro/introduction.html"><em>Introduction</em></a></li>
When I open index page css isn't loaded, and when I try to click on link it says routing error. As I understood static pages don't know where to look for css and other html pages.
I just want static pages without any routes and controllers, nginx.
Any ideas?
All the public folder content is accessible via "/"
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
You can use high_voltage gem to generate static_pages
Its perfectly valid to serve static files (pages or not) via the public directory. As Kirka121 said rails is not really built for this purpose but can still work with it.
In development environment it should just work to serve whatever files you have in public, for production environment you might need to configure whatever server you use to serve them - but this should be covered by its normal setup anyway, if not its set up wrong.
So by default the rails public folder can directly by accessed at the root of the project.
As far as your code goes the relative links/urls seem to be the issue. Its generally better to use absolute paths for everything not to confuse anything, which leads to very hard to find bugs.
With your folder structure and example this would be:
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
Some of the text
<li><em>Introduction</em></li>