I've got a custom Polymer element polymer install element call it <x-custom-element> once created i'm unable to polymer serve until I change the links to reference the bower components in the elements folder.
When I publish the element to my git repository I need to change the references in the elements <links rel="import" href="bower_components/"> tohref="../` or what ever the link is to use the bower_components folder form the directory that install the element.
For example to be able to serve the file via polymer serve, with this file structure
bower.json
bower_components/
test/
temo/
x-custom-element.html
The links in x-custom-element.html need to refer to /bower_components/*
But to be able to be usable as a bower import I must change the references to ../*
Is there anyway to remedy this process? How should you approach this problem.
Create a script to change all the link back and forth?
What other options do I have?
Your example project directory is missing index.html in the root. This should be automatically generated by polymer-cli (i.e., polymer init element), and it should look like this:
<!doctype html>
<html>
<head>
<title>x-foo</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="x-foo.html"></iron-component-page>
</body>
</html>
I didn't have any problems viewing the site with polymer serve -o after generating the element project with polymer init element (polymer-cli v0.16.0, polyserve v0.13.0, macOS Sierra 10.12).
Related
I am trying to import a css file in the same directory as my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
I believe I am correct in using ./ to go through my directory. I have also tried using ../
However, in my dev tools in chrome, I am getting this error:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Any help would be appreciated. Thanks!
It is definitely the link that's the error.
You will need to check your file path, is this project just simply on your desktop? Is it a ASP.NET app?
Depending on where/what project it is, you should be safe to use .. to traverse up one folder
It really depends how your directory folder is structured, but if you have your HTML and CSS files in the same folder, you can just use <link rel="stylesheet" href="/styles.css"> (note that there's no dot), then your html file will look in the root folder of your project, also make sure the name styles.css is the same as your css file
Since you put the html file and the css file in the same folder, there is no need to use ./ or ../ because this step is written only if the css file is in another folder next to the html file
open-source public files work best. So instead, go to https://gist.github.com and sign up if you haven't already, name the file (with extension, e.g. style.css), and paste your CSS3 code, click 'create secret gist', and click raw. copy the link and that will be your external CSS file.
-Good luck!
I'm building a browser app in Angular 9 Typescript and am trying to implement the webdatarocks package so I can use pivot tables within a component of the app. I've installed webdatarocks and now have the following:
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<link href="/angular-app/node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-wbr-pivot #pivot1 [toolbar]="true">
Webdatarocks will appear here
</app-wbr-pivot>
</body>
</html>
Note this is NOT the index.html file. That file is separate and contains the styles etc. for the entire app, I'm trying to use webdatarocks within only one component of the app, so the above code is in the html file of a component. (Not sure if this is recommended as I'm pretty new to this, but I don't see why it shouldn't work?). When trying to run this, the styles are not applied because of the following error:
Refused to apply style from 'http://localhost:4200/angular-app/node_modules/webdatarocks/webdatarocks.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Now I understand this likely doesn't work because it's unable to match any routes to the url, so it's being read as an error page in html rather than a css file. My question is how to actually fix this? Do I have to somehow add this url to the routing module? Is there not a way to simply point to the needed library in node_modules? I tried adding
"./node_modules/webdatarocks/webdatarocks.min.css"
"./node_modules/webdatarocks/webdatarocks.toolbar.min.js",
"./node_modules/webdatarocks/webdatarocks.js"
to the styles and scripts in the angular.json file and it still doesn't work.
Thank you and please let me know if I can clarify anything!
Okay, I learned all I had to do is remove everything within the head tag and just add:
#import "webdatarocks/webdatarocks.min.css";
to the styles.css file and Angular took care of the rest.
Normally in production and development using webpack this works fine. But when I attach the react code to just a regular HTML it doesn't mount itself. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Sit</title>
</head>
<body>
<div id="modal-hook"></div>
<div id="backdrop-hook"></div>
<div id="root">444</div>
<script>
// Copy pasted React bundle here
</script>
</body>
</html>
A simple React app would load from html page. Check this example.
Whereas a full fledged app not only need just react bundle files. You should add all it's necessary dependencies like chunk/css/vendor files with all the required polyfills. And the main bundle file might be having relative file references with in that.
After all it's a set of JS files after bundling the code. If you add all it's necessary dependencies in the correct format, it will load without any issues.
I just installed this Create React Apps program from here https://github.com/facebookincubator/create-react-app and I have all the files downloaded and I am able to edit the App.js file, but I already have made some html files for a website, I want to know how to link the App.js file to my current files. The html on the given Index.html, shows no <script> element used. Here is the full html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Inside your project run
npm run build
This create the folder "/build" with the "index.html" file. Inside this you can see how all this magic is done. You can put your other/old stuff also there.
I'm not entirely sure what you are asking, but you can have normal html/css on the same page as React. React is rendering the App component in the div id="root" section of the page. Elsewhere, you can just paste your old html stuff and it should work.
I just started with Polymer and I'm using paper-icon-button to test this out. I think I set things up correctly because the button I used have ripple effect; when I set the src property, my intended picture showed up.
<!-- This works -->
<paper-icon-button src="http://placekitten.org/g/50/50"></paper-icon-button>
However, I failed to use default icon, for example:
<!-- This does not work. There is a blank icon.
However, ripple effect still works on click -->
<paper-icon-button icon="menu"></paper-icon-button>
I ran the polymer project on a Linux server. The demo doesn't work on my computer either. Here is what the demo should look like: https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/index.html
Here is the demo running on my polyserve:
I setup paper-icon-button using bower command instead of zip file so I would assume that all the dependencies are there. Not sure what is missing :s please help me out thanks!
You also need to import iron-icons. Look at this demo
and this example repository.
Proper way to initialize project on Windows:
Install yarn
open git bash
mkdir -p /c/projects/polymer && cd /c/projects/polymer
yarn add --dev bower
./node_modules/.bin/bower init
If you see: "bower ENOINT Register requires an interactive shell" run above command in cmd.exe. More.
./node_modules/.bin/bower install --save PolymerElements/iron-icons
./node_modules/.bin/bower install --save PolymerElements/paper-icon-button
Create index.html with content at the end of this post
yarn add --dev http-server
./node_modules/http-server
Open http://127.0.0.1:8080 in web browser
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
</head>
<body>
<paper-icon-button icon="favorite" title="heart"></paper-icon-button>
</body>
</html>