I'm new to polymer. I've followed a couple of tutorials to learn the base of the library. However, I always encounter a problem after building the app.
Here is a summary how to reproduce my problem.
polymer --version //returns 1.6.0
mkdir poly-app
cd poly-app
polymer init // Select polymer-2-application
polymer serve --open // works fine
polymer build
polymer serve build/default --open // works fine
Now, I would like to export my code to my web server. I copy paste the content of /poly-app/build/default and I paste it on my web server. When I try to access it, it get errors such as:
Failed to load resource: the server responded with a status of 404 (Not Found)
I found that the problem comes from the following lines of code in /poly-app/build/default/index.html:
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/poly-app-app/poly-app-app.html">
In order to fix the problem, I need to remove the first / in the src and href attribute.
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="src/poly-app-app/poly-app-app.html">
Apparently I need to do this manually every time I build the app. Is there any other way to fix automatically?
Thanks a lot!
I believe you are trying to serve it from a non root path on your website?
In that case you should set the basePath property of the build configuration to the respective path and the generated code should populate the <base> tag with the needed information so the urls are working.
Related
I can deploy to the root of a server (e.g. http://localhost:8008) but I can't deploy to a subfolder (e.g. http://edkolis.com/pwaexperiment/wwwroot/index.html); I get errors loading various files when I try that. Files that are missing include app.css and blazor.webassembly.js:
<link href="css/app.css" rel="stylesheet" />
<script src="_framework/blazor.webassembly.js"></script>
I see there is a <base> tag in the index.html that specifies that all relative URLs should point to the server root:
<base href="/" />
however if I remove this tag I still get the same errors. How can I deploy my Blazor PWA to a subfolder and have it work, and yet also have it work at the root for local testing (i.e. I don't want to hardcode a server URL into the <base> tag)?
The base href must match the actual path you deploy to.
To avoid changing it build-time, update the launchsettings JSON with that folder name so local (dev) runs also use the"production" base path
I'm a complete beginner to web development and am trying to deploy my first site via Netlify. Despite my site working fine when being displayed from my local machine, I'm given the following error when navigating to my site's URL:
Page Not FoundLooks like you've followed a broken link or entered a URL that doesn't exist on this site.Back to our site
Since my page is functional on my local machine, I believe the error lies within my Github repo and/or my deploy settings. Here's my repo:
https://github.com/Cotton0419/TestSite
And my deploy settings:
Repository: github.com/Cotton0419/TestSite
Base directory: acme
Build command: Not set
Publish directory: acme/disp
Deploy log visibility: Logs are public
Any help would be greatly appreciated, I can supplement more information if need be.
The Base directory on Netlify is only used by the build environment for a reference to your code base (defaults to root of the repository if not given).
The Publish directory would be relative to the base directory. So in your case disp or acme/disp if using the default.
You are referencing assets in a location that does not exist in your published paths, so they would not exist in your deploy to the CDN.
<link rel="stylesheet" href="../css/style.css">
You should move your assets into your deploy disp folder and edit the correct paths into your code files.
Similar problem I encountered today. I decided to upload an old portfolio I had made a while back. Then for some reason after running the URL on Netlify, nothing happened. The only thing that showed up was a prompt similar to yours -
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
Back to our site
After revisiting the HTML and CSS files, I realized that I had set the title for my HTML file to porfolio.html instead of index.html which solved my problem!
For this kind of error please kindly check the HTML filename change it into index.html it worked for me!
Somehow i got trouble figuring out the correct path. See below for the hierarchy:
Found out that the browser sends a request to http://localhost:8080/assets/vendor/bootstrap/css/bootstrap.min.css, which does not work. Are the packages located correctly?
It also works fine if the index.html is located in the assets folder as well.
git repo: https://github.com/elps/elpsstackoverflowrepo
try these:
<link href="../static/assets/vendor/font-awsome/css/font-awsome.min.css" th:href="#{/assets/vendor/font-awsome/css/font-awsome.min.css}" rel="stylesheet" />
<link href="../static/assets/vendor/font-awsome/css/font-awsome.min.css" th:href="#{/assets/vendor/simple-line-icon/css/simple-line-icon.css}" rel="stylesheet" />
I assume that you are trying to deploy to a server.
For example, if you deploy a myapp.war file into a Tomcat server, your
application will probably be accessible as
http://localhost:8080/myapp, and myapp will be the context name.
Context-relative URLs start with /:
<a th:href="#{/order/list}">
If your app is installed at http://localhost:8080/myapp, this URL will output:
<a href="/myapp/order/list">
Therefore, you are missing static folder in your url. Pay attention to the deployment process of your application.
I have a working Polymer project when I have all my links pointing to the bower_components folder, however, when I change to node_modules I get the following message when I run
polymer serve
"Failed to load resource: the server responded with a status of 404 (Not Found)"
with the URL being:
http://127.0.0.1:8081/node_modules/#polymer/polymer/polymer.html
This is correct since the Polymer team changed polymer.html to polymer.js
However, where is this done and how can I use polymer using yarn (which saves in node_modules)?
Edit:
I think I found the culprit. When I tried to find iron-icons (mind the 's'), I could only find it on yarn which saves to node_modules. When I load the node module iron-icons I get the above-mentioned error message.
So I point to the bower_component iron-icon (mind you, no 's') but that doesn't provide the extensive library of icons I have with the yarn package:
on Yarn: https://yarnpkg.com/en/package/#polymer/iron-icons
but no such thing with Bower: https://bower.io/search/
Why?!
I have the following lines on my index.html file to include various dependencies
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
However, It keep getting the following error.
It seems like it is trying to retrieve angular and other dependencies from localhost.
How do I resolve this error?
Check your server's base filepath, its should be set to a directory level just above bower_components/
Example : if your directory structure is app/bower_components/xx/xx.js, set your server's static serve path to app/
Assuming that you are using node and express as your server, use this link for knowledge on setting static paths.
I don't see any other problem with this. As the error is 404 which means your files are not being located by the server.
check if file are already in the real path, if not, install them with: bower install