I have a file (index.html) in my app/ folder in a project. It contains a <base href="/"> tag as well as some imports from app/bower_components/. As part of my distribution process, I use Gulp to move the code from app/ to dist/, and then run vulcanize on it via polybuild. index.html makes it into the dist/ directory, as does bower_components/, but when vulcanize gets it, it tries to open the first import:
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
Instead of looking in dist/bower_components/… (or just bower_components/…, relative to the dist/index.html file), however, it looks for /.index.html/bower_components/…. How do I stop it from using this and use the relative URL as written in the original code? Commenting out the <base> tag solves the issue.
Gulp Task (from Polymer Starter Kit):
gulp.task('vulcanize', function () {
return gulp.src('dist/index.html')
.pipe(polybuild({maximumCrush: true}))
.pipe(gulp.dest('dist/'));
});
Related
I'm trying to create an electron app with polymer. I tried to import a custom element using
<link rel="import" href="src/lux-app.html">
but it dosen't work. Console says:
GET file:///D:/src/lux-app.html net::ERR_FILE_NOT_FOUND
It does not use the correct path. I researched and found that imports only work when they are on a server (e.g. localhost). Is there a way to run localhost in electron or something like that?
Thank you
Edit:
Here is the file structure
lux-app
|── bower_components
|── images
|── lib
└── artnet.js
|── lux-app.html
|── .gitignore
|── bower.json
|── ...
node_modules
└── node stuff
main.js
index.html
polymer.json
package.json
README.json
renderer.js
Imports work without "localhost", as i see in "Electron Api demos". In the index.html file, there are some imports like these:
<link rel="import" href="sections/about.html">
<link rel="import" href="sections/windows/windows.html">
<link rel="import" href="sections/windows/crash-hang.html">
<link rel="import" href="sections/menus/menus.html">
So i think your problem is that the path variable in the main renderer (main.js) don't work properly, or if you haven't declared that variable, you need to with const path = require('path') and use the path as in the main.js file in the Electron Api demos.
(I'm not an expert with electron, but i think I can get you oriented to the solution looking inside the files in electron api repo)
Most of the time I encountered sap.ui.demo.wt as default namespace which I replaced with the name of my project(Test) and everything worked fine but lately I found this: sap.ui.demo.navi when I was trying to implement navigation between Views...should I replace sap.ui.demo.navi with Test too or it should be something else? Please help me....and thank you for your time:)
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
return Controller.extend("sap.ui.demo.nav.controller.Home", {
}
});
it depends on what's the set namespace for the resource root in the bootstrap in the index.html of the application. the data-sap-ui-resourceroots attribute in the bootstrap tells the sapui5 core where the resources in the defined namespace are located in the folder structure of the application relative to the index.html of the application.
i.e. in the code sample the resources of the application are located in the same folder as the index.html. because of the "./". when the application comes across the namespace "sap.ui.demo.wt" it starts to look for any resource in the folder of the index.html.
e.g. sap.ui.demo.wt.File means that the application looks for a File in the same folder as the index.html located.
e.g. sap.ui.demo.wt.view.File means that the application looks for a File in the folder view which is located one folder up from the index.html folder, i.e. ./view1/File. whereby again "./" the folder is where the index.html is located.
i.e. it's neccessary to replace "sap.ui.demo.nav" with "Test" if "sap.ui.demo.nav" is the namespace set in the bootstrap of the index.html. should e.g. "sap.ui.demo" be the namespace and "nav" just a folder in the folder structure of the applicaton then it's neccessary to replace "sap.ui.demo" without "nav".
from the structure of "sap.ui.demo.nav.controller.Home" i guess that "sap.ui.demo.nav" is the namespace, "controller" the controller folder in the application's folder structure and "Home" a controller. that would mean it's neccessary to replace "sap.ui.demo.nav" with "Test".
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./" // tell here the app where the resources are located
}'>
</script>
I'm having issues loading the original stylesheet (CSS file) into my style guide. The gulp plugin is gulp-livingcss and everything is working fine except the options.
I'm calling style-guide via a gulp-watch and the output is an index.html file that renders as expected (except the original CSS file is not being referenced). I'm not getting any errors when I run the script either.
Here's my gulp snippet:
gulp.task('style-guide', function () {
gulp.src('./app/temp/styles/styles.css')
.pipe(livingcss({
loadcss: true
}))
.pipe(gulp.dest('./app/style-guide'))
});
And here's the documentation from this page:
https://github.com/straker/livingcss#options
This is the gulp-livingcss page
https://github.com/straker/gulp-livingcss
loadcss - If the style guide should load the css files that were used to generate it. The style guide will not move the styles to the output directory but will merely link to the styles in their current directory (so relative paths from the styles still work). Defaults to true.
Thanks in advance
I use PhpStorm 9 and I have project structure similar to this:
src/
elements/
element-alfa/
element-alfa.html
element-alfa.scss
templates/
application.html
index.html
I use Polymer so I have to import the elements when I use them. I also use AngularJS, which direct the app after load to application.html, but in fact paths are like from the index.html file.
<link rel="import" href="elements/element-alfa/element-alfa.html">
I have set the src/ directory as RESOURCES ROOT so it does not tinged the background color under href path but if I use auto hint (CTRL + 2x SPACE), it returns the path relative to the file application.html, not relative to the index.html (or my resources root) as I wanted to.
How to achieve it?
Currently, the only way to do it is to type/autocomplete each folder one by one sequentially: first elements, then element-alfa, and then autocomplete filename. I created a feature request about this: https://youtrack.jetbrains.com/issue/WEB-30888
I'm having trouble getting polymer elements to show up on my parse app.
The file directory looks like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
index.html
in index.html I have the imports like this:
<!-- css -->
<link type='text/css' rel="stylesheet" href="../css/main.css">
<!-- polymer -->
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
and a paper button in the body:
<paper-button>PAPER BUTTON</paper-button>
However, when I deploy, the paper button doesn't show up. The css is applied correctly though, which is so weird, since if /public/index.html can access /css then why not /components??
To debug I moved the step-1 folder from the polymer tutorial into /public so that the file directory is like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
/step-1
index.html
index.html
I've verified that when I run the app on localhost and go to
http://localhost:8000/public/step-1/
The polymer elements show up correctly. I'm unable to access this on the deployed parse app though, and I'm not sure how to set up routing correctly.
btw, app.js contains the default routing configurations:
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine
app.use(express.bodyParser()); // Middleware for reading request body
I looked at the expressjs docs and tried adding
app.use(express.static(__dirname + '/bower_components'));
and installing polymer at the app's root directory and using corresponding imports, but it still doesn't work.
What am I missing?
LOL. Forgot the polymer js import and imported paper tabs instead of paper button.
Fixed:
<!-- polymer -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
I have a similar issue, The samples what polymer has given they run correctly on python http server.