I'm trying to include external AddThis widget in Electron.
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxx"></script>
The issue is that
// in <script> tag is interpreted as file://.
And the app errors with
GET file://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxx net::ERR_FILE_NOT_FOUND
This can be easily fixed by adding http(s): before //. But huge mess happens if included js includes js'es starting with //. For example, addthis_widget.js includes 36 relative URLs starting with //
Such behavior takes place, because base URL in electron started with file: when application loaded: mainWindow.loadUrl('file:///index.html'). Then the relative URLs starting with // automatically resolved to file: and not http(s): But its not very clear how to revert things back.
Kindly help.
Adding js directly to the app is not an option, since AddThis modifying remote script(s) too often.
Related
I am currently involved in a project where I am using require js.
In my gruntfile I am using requirejs to produce a single optimised js file.
I want to create a single css file to go with that and I want to use grunt-usemin for this.
My problem is that usemin doesn't seem to want to transform javascript import statements in my index.html without attemting to transform the javascript as well.
<script src="bower_components/requirejs/require.js" data-main="app/main.js"></script>
I desperately want usemin to change this to:
<script src="main.js"></script>
,but not make any changes to the javascript.
Is this possible? Right now useminPrepare stop at my script import with the error "require.js blocks are no more supported."
I tried configuring an 'empty' flow for useminPrepare ('flow': {'html': {'steps': {'js': []}}}) but this sadly didn't work.
If these tasks are impossible to combine for usemin, than suggestions for other grunt plugins i could use instead (or in addition) would be appreciated.
I decided to avoid the problems with usemin and started using grunt-regex-replace to change the script import.
Gruntfile.coffee:
'regex-replace':
html:
src: ['<%= settings.tempDirectory %>/index.html']
actions:[
search: '<script src="bower_components/requirejs/require.js" data-main="app/main"></script>'
replace: '<script src="main"></script>'
]
I have created a web site using backbone + requirejs + bootstrap on client side and php REST on server side. The site contains a lot of .js file. I use requirejs to load the .js when it is needed (to implement asynchronous loading).
However, I have start using Node.js + Yeoman + grunt + bower recently. I use Yeoman webapp generator to create the basic structure of my web again. When I build my web, it concat all the .js files into 1 single .js file and put the tag on the index.html to refer it.
From my understand the pros is that the whole .js is cached in client's browser. which is slow at first time visit, but fast on re-visit. Since everything is concat to 1 file and it is loaded to the client's browser, so I guess the asynchronous loading is not work in this case. (correct me if I wrong).
* the web site is created for both mobile and desktop. (1 src for 2 version)
Should I concat all .js files in 1 single file
OR should I use requirejs to require the .js when I need it (Asynchronous loading)?
How to config requirejs in Node. I have tried it in normal way (include the data-main in index.html, when I compile using grunt build. it give me error "... is no more support".
Is browserify similar to requirejs in Node?
I have spent a week to figure it out already but still no luck. Hope someone can point me to the right direction. Thanks a lot.
The .js file structure is something like this:
-app
-vendor
-jquery.js
-backbone.js
-assets
-js
-model
-person.js
-collection
-people.js
-router.js
-controller.js
-dist
-js
-build.js
i had familiar issues. So lets start with strategy of file concatenation. There are three major ways to follow:
first - always concat all modules in one file, in this case you loose on first start and may win or next starts, but you can face another issue - you use less then half of modules from concatenated file at a time, but always load all modules.
second way is to build specific concatenated file with specific module set for each type of page - so you know how many page type you have and build file for each - following this you can decrease size of file, but its hardly to maintain and need manual sets correction in case of page changes.
third - build 1 concatenated file with libs and modules which in use nearly on all pages, all other stuff (additional modules, views, special models and collection) load on demand. This way is good in case of SPA pages.
Let me say a few words about grunt + r.js configauration.
Keep this link for first times .
Here is the sample of config:
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond",
out: "path/to/optimized.js"
}
}
}
Main point here mainConfigFile - it is a file then you keep require.config
Next step - configure r.js - keep this link its very helpfull as describe all possibilities of r.js.
Usually its quite enough to checkout these links.
Also you can checkout recommend file structure for multi page site to avoid issues in future.
Also here is a link to a similar post - you may find it usefull.
If you have any additional questions let me know.
And a few words about CSS - logic nearlly the same : you can build separate file for each page or create sinngle. The main point here is how large your site is. In my case i've choose second option, but to be honest first one is more scalable, especially in large projects
I can get the requirejs work with Backbone now. However, I cannot use Marionette with error something like "Backbone is undefined". I've install Marionette with this command "bower install marionette --save". I did some search on google, and someone said use the AMD version of Marionette should fix this issue and after replace Marionette with AMD version it is work.
But my question is how can I install the AMD version of Marionette using "bower install"?
My web use bootstrap. When I compile the web with "grunt build". it copy bootstrap's font from "app/bower_components/bootstrap/dist/fonts" to "dist/bower_components/bootstrap/dist/fonts" but the web is refer the font on "dist/fonts". How can I change it to refer to the right directory?
I use yo webapp (with bootstrap) to generate the structure of my web.
What is the search rule for static content when you link it within a heist template?
I get a few problems related to javascript files not being found.
So sticking my "myjavascript.js" and "jquery.js" into the root of "static" directory seems to be working when the URL supplied is, for instance, /index. If the URL is /something/index then it fails to locate my javascript files in the root of "static" directory. So putting them in "static/something" fixes it. Anyway, I ended up sprinkling copies of my javascript files all over the place so they can be found under different URL strings.
So, it is either I am using the wrong location or my links are incorrect within the template.
Given the link <script type="text/javascript" src="/js/jquery.js"> </script> where would it look for the file? What about src="jquery.js"?
I also get these type of errors from javascript console if I put the files under "static/js":
Resource interpreted as Script but transferred with MIME type text/html: "http://0.0.0.0:8000/js/jquery.js". new:6
Uncaught SyntaxError: Unexpected token < :8000/js/jquery.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://0.0.0.0:8000/js/base.js". new:6
Uncaught SyntaxError: Unexpected token <
Thanks.
This totally depends on how you define your routes. I usually put my javascript in static/js, resources/js, or resources/static/js, but any location is fine. The key is how you route that directory. You probably have a route something like this:
("static", serveDirectory "resources/static")
This means that if you have jquery.js in the resources/static directory, then it will be available at the url http://localhost:8000/static/jquery.js. This would mean that you would put src="/static/jquery.js" in your script tag. The first part of the routing tuple determines the URL path and the second part of the tuple determines the directory on the local filesystem.
I'm trying to include twitter-bootstrap in my project and glyphicons-halflings images work only in the same directory (assets/css/) and only in Chrome (not in Firefox and Opera). Including part (file 'app.less'):
#import 'twitter-bootstrap/bootstrap';
#iconSpritePath: "/img/glyphicons-halflings.png";
#iconWhiteSpritePath: "/img/glyphicons-halflings-white.png";
I tried to use a variety of options: /img.. , img/.. , /../img , /gly..., place in a public dir (I want to use it from images folder by the way), but it's not working. Perhaps I could set this option in connect-assets. This folders picture.
Including to project only app.less file != css('app')
In this case it works for Chrome.
UPDATE:
Now I see that in Chrome url is always http://localhost:3000/css/../img/glyphicons-halflings.png that transform to http://localhost:3000/img/glyphicons-halflings.png and in firefox it's always ../img/glyphicons-halflings.png (background-image: url("../img/glyphicons-halflings.png");) that unable to load. My defenition of #iconSpritePath doesn't work at all.
i'm using bootstrap(using the LESS files) with express. works in every browser. you have to install less-middleware and less moduel. here's my code:
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, '/public' )));
and my folder structure:
/public/img <-- the bootstrap img and the rest
/public/javascripts
/public/stylesheets
the only thing i did have to change was the includes in the bootstrap less files.
e.g. from:
// CSS Reset
#import "reset.less";
to
// CSS Reset
#import "/public/stylesheets/reset.less";
I took a look at your code, and simply copied the glyphicon files into the public/img folder tree and it's working for me.
I don't see any mention in https://github.com/TrevorBurnham/connect-assets about it being able to support images, so I assume this was the problem.
I had a similar problem but it was unrelated to paths in css files. I was just trying to reference an image in 'assets/images' but when i used assetPath('images/logo.png'), it said it couldn't find it. What connect-assets (or perhaps mincer) seems to do is strip the first directory from the assets. In order to reference your image, you need to specify it without the path e.g. assetPath('logo.png').
Is it possible to inject runtime information in to a require.js "data main" script and use to build paths? More explanation...
In my node.js app.js I dynamically find the path to the configured 'theme' like this:
var themePath = require('./conf/config.js').config.theme.full_path;
and later in the require.js data main script, I'd like to prepend this theme path when defining paths. So assuming I've set my requirejs data-main="xxx" and the following is the xxx file, I'd like to do something like the following:
require.config({
baseUrl: "/js/",
paths: {
"templates" : DYNAMIC_THEME_PATH + '/templates',
"views" : DYNAMIC_THEME_PATH + '/views'
}
});
I'm not sure 1. how I can "see" the themePath from within this require.js data main file, and 2. is this even possible?
EDIT - My solution
So the real challenge I was having was getting a runtime variable discovered on the server in to the require.js data main script. In node land, global doesn't correspond to the window on the client side (of course) because the javascript isn't in to the browser yet .. duh. So I don't see how you can get this discoverable in the client side script.
Ok, so what I WAS able to do was inject the discovered theme path in the ejs, then, dynamically load the data main script with that prepended like:
<script data-main="<%= theme_path %>/main" src="../js/libs/require-jquery.js"></script>
Of course this means I have to have the data main script in the theme directory which wasn't my initial plan; however, it does have the advantage that I can then use relative paths to load my path/to/templates path/to/views, etc. etc.
Lastly, I sort of hate when folks answer they're own questions .. so I'm going to leave this up in hopes that someone can either give me a better recommendation or better explain this and they can get the credit ;)