I just downloaded the new amCharts4 into my node.js app via npm to test it. Wenn installed I find the files chore.js and charts.js in MyNodejsApp/node_modules/#amcharts/amcharts4 :
MyNodejsApp
_node_modules
|_#amcharts
|_amcharts4
|_charts.js
|_core.js
|_amcharts4-geodata
_public
|_css
|_styles.css
|_js
|_main.js
_views
|_partials
|_scripts.ejs
|_dashboard.ejs
|_index.ejs
app.js
As you can see I placed my css and js files in folder public. I'm also using ejs and call the files via views/index.ejs and dashboard.ejs. I'm then loading my js files via script.ejs.
script.ejs
<script type="text/javascript" src="/js/main.js"></script>
# this worked
<script type="text/javascript" src="//www.amcharts.com/lib/4/core.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/4/charts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/4/themes/animated.js"></script>
# this did not work
<script type="text/javascript" src="/js/amcharts/core.js"></script>
<script type="text/javascript" src="/js/amcharts/charts.js"></script>
<script type="text/javascript" src="/js/amcharts/themes/animated.js"></script>
dashboard.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body>
<div id="chartdiv"></div>
<% include partials/script %>
</body>
</html>
Where and how do I exactly integrate and call the charts.js and core.js file? I'm assuming also in my script.ejs ? But do I copy & paste charts.js and core.js files in my public/js folder (which didn't work under folder public/js/amcharts)? or how do I integrate and access them?
https://www.amcharts.com/docs/v4/getting-started/basics/
I am new to grunt and tests and currently I have setup like this:
Grunt running tasks after which I have build folder where I have my compiled index.html and all his resources (css, js, images)
Now I want to run tests using grunt-mocha-phantomjs and it needs additions to my index.html like:
<link href="../node_modules/mocha/mocha.css" media="screen" rel="stylesheet" type="text/css" />
Inside head tag and:
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js" type="text/javascript" charset="utf-8"></script>
<script src="../node_modules/chai/chai.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mocha.ui('bdd');
expect = chai.expect;
</script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mocha.run();
</script>
Inside body tag.
I want to be able to open that modified index.html in web-browser too. (I have setup apache for it and example test works great both in grunt and web-browser)
So I am planning using task grunt-contrib-copy to copy all files from my build directory to test directory and add those lines to index.html and then launch mocha_phantomjs task.
Is this correct way to do it?
Which NpmTask can do it?
Not sure about "Is this correct way to do it?" part but I solved it.
I used grunt-html-build and its Removing parts feature.
Removing phantom's code for build folder, and keep it for testing folder.
It works great.
I have an HTML5 web app that I'm packaging up via Electron. I'm packaging via gulp-electron.
The issue I'm having is that when the app is built and I run it, none of the CSS or JS files that are referenced in the index.html file are being loaded.
I can see that the assets were included in the build, and are part of the .app bundle in the : myapp.app/Contents/Resources/app/ folder.
Matter of fact, if I cd to that directory and run a node webserver (httpster), the app runs fine in that manner.
Here's how my CSS/JS is referenced:
<!-- CSS -->
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="./styles/style.css" />
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">
<!-- Vendors -->
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">
<!-- Non-angular libraries -->
<script type="text/javascript" src="./js/nonangular/lodash.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
<!-- Angular external libraries for application -->
<script type="text/javascript" src="./node_modules/angular/angular.js"></script>
<script type="text/javascript" src="./node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="./node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="./node_modules/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-ui/build/angular-ui.min.js" type="text/javascript"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" type="text/javascript" charset="utf-8"></script>
<script src="./bower_components/angular-activity-monitor/activity-monitor.min.js" type="text/javascript"></script>
<!-- Angular components -->
<!-- build:appcomponents js/appcomponents.js -->
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./components/directives/main.nav.directive.js"></script>
<!-- Application sections -->
<!-- build:mainapp js/mainapp.js -->
<script type="text/javascript" src="./js/controller.js"></script>
<script src="./components/main/mainController.js" type="text/javascript" charset="utf-8"></script>
I've tried changing the path to not include the './' before the folders referenced to no effect.
My Gulpfile electron task looks like this:
gulp.task('electron', function() {
gulp.src("")
.pipe(electron({
src: './app',
packageJson: packageJson,
release: './release',
cache: './cache',
version: 'v0.36.10',
packaging: true,
platforms: ['win32-ia32', 'darwin-x64'],
platformResources: {
darwin: {
CFBundleDisplayName: packageJson.name,
CFBundleIdentifier: packageJson.name,
CFBundleName: packageJson.name,
CFBundleVersion: packageJson.version,
icon: './app/gulp-electron.icns'
},
win: {
"version-string": packageJson.version,
"file-version": packageJson.version,
"product-version": packageJson.version,
"icon": './app/gulp-electron.ico'
}
}
}))
.pipe(gulp.dest(""));
});
My app folder structure looks like this:
The frustrating this is I've used this exact setup on another project and the executable works fine, and is able to reach all the assets bundled in the .app bundle just fine.
Turns out there were a few issues with paths.
First the CSS was using relative paths to reference images. Switching this to absolute paths did the trick. This was the same issue for the directives. Switching out relative paths with absolute paths did the trick there.
Finally, the actual CSS and JS files not being loaded looks to be because in the main index.html there was this:
<base href="/">
Which was messing with things. Removing that allowed the CSS and JS to load correctly.
Electron approaches files through file:// protocol, so any base hrefs should start with '.'
To make it work, in index.html (in case '/' is your base href)
change
<base href="/">
into
<base href="./">
..and the path errors will disappear.
So with electron apps we always need to compile the angular dist using a base href starting with '.', when / is your base, compile as
ng buid --prod --base-href ./
I finaly understood what is wrong with including static files in Electron
<link rel="stylesheet" href="./app/css/app.css">
<link rel="stylesheet" href="./app/libs/mdl/material.min.css">
This is not working because they are included from my index.html which is NOT in the root folder.
It's in "app/html/index.html" so I had to tell Electron where is the root of my project !
Simply add <base href="../../"> at the top of your index.html file including the scripts
For me I had to go back 2 folders up to get to the root of the projet. In your case it might less (../ then) or more (../../../ then), etc
I found out that you need to insert the href beginning with "../" like:
<link rel="stylesheet" type="text/css" href="../src/css/index.css"/>
I have the right path under the root directory, all of my assets are 404 though. Also this is supposed to be the root.
Console:
https://ajax.googleapis.com/ajax/libs/angular/client/js/1.3.0/angular-animate.js
sheltered-beach-2553.herokuapp.com/:19 GET https://cdnjs.cloudflare.com/ajax//client/libs/animate.css/3.3.0/animate.min.css
sheltered-beach-2553.herokuapp.com/:63 GET https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4//client/js/bootstrap.js
sheltered-beach-2553.herokuapp.com/:68 GET https://sheltered-beach-2553.herokuapp.com/client/libs/angular-route/angular-route.min.js
sheltered-beach-2553.herokuapp.com/:20 GET https://sheltered-beach-2553.herokuapp.com/css/custom.css 404 (Not Found)
sheltered-beach-2553.herokuapp.com/:70 GET https://sheltered-beach-2553.herokuapp.com/client/libs/angular-bootstrap/ui-bootstrap-tpls.js
sheltered-beach-2553.herokuapp.com/:71 GET https://sheltered-beach-2553.herokuapp.com/client/libs/angular-socket-io/socket.js
sheltered-beach-2553.herokuapp.com/:69 GET https://sheltered-beach-2553.herokuapp.com/client/libs/angular-resource/angular-resource.js
JS:
As you can see I've used both ../ and as a prefix:
<script type="text/javascript" src="../client/js/app.js"></script>
<!--Main Controllers-->
<script type="text/javascript" src="client/js/controllers/homeController.js"></script>
<script type="text/javascript" src="client/js/controllers/navController.js"></script>
<script type="text/javascript" src="../client/js/controllers/aboutController.js"></script>
<script type="text/javascript" src="../client/js/controllers/projectsController.js"></script>
<!--Project Controllers-->
<script type="text/javascript" src="/client/js/controllers/projects/customerApiController.js"></script>
<script type="text/javascript" src="/client/js/controllers/projects/chatController.js"></script>
You can check out the whole output of my console over here:
https://sheltered-beach-2553.herokuapp.com/
NOTE: Everything works well today, I don't know the problem but Everything works fine now.
I started learning Meteor yesterday on Window 7. Everything worked well through multiple lessons.
When I started today on Linux Mint.
meteor create simple-todos
cd simple-todos
meteor
[[[[[ ~/simple-todos ]]]]]
=> Started proxy.
=> Started MongoDB.
=> Started your app.
=> App running at: http://localhost:3000/
Then go to the browser localhost:3000, it takes long time loading without response.
When I tried this in the terminal, It displays the returned HTML in the terminal.
curl http://localhost:3000
I've noticed that the returned output is without body content
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/20ae2c8d51b2507244e598844414ecdec2615ce3.css">
<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.1.0.2%22%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22comzm511li818nx5jr%22%2C%22autoupdateVersion%22%3A%229da5181b237af97fe169a3e1b0ddb7395c68caff%22%2C%22autoupdateVersionRefreshable%22%3A%228e75859990afc3d8c7dcef4ef49fc89515f1f106%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>
<script type="text/javascript" src="/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18"></script>
<script type="text/javascript" src="/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf"></script>
<script type="text/javascript" src="/packages/json.js?e22856eae714c681199eabc5c0710b904b125554"></script>
<script type="text/javascript" src="/packages/base64.js?1a63019243b73298e2964e6d4680f25bca657726"></script>
<script type="text/javascript" src="/packages/ejson.js?71047b64b5196348bdbe5fd5eea9ac97a5a9eb14"></script>
<script type="text/javascript" src="/packages/logging.js?07e201b648f16be8435a4f666156995eeda0c750"></script>
<script type="text/javascript" src="/packages/reload.js?da8974b7231dd8c0caccb5f322dcf97329d486d1"></script>
<script type="text/javascript" src="/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c"></script>
<script type="text/javascript" src="/packages/random.js?fe7b46080c91ce482acf6fc326afbc5b176f0502"></script>
<script type="text/javascript" src="/packages/retry.js?1f1dd2c35d300110fdaba51ce4473583bc3bf031"></script>
<script type="text/javascript" src="/packages/check.js?ac81167b8513b85b926c167bba423981b0c4cf9c"></script>
<script type="text/javascript" src="/packages/id-map.js?9ea6eaae8d74693ce2505a858d9a5e60cf191298"></script>
<script type="text/javascript" src="/packages/ordered-dict.js?bf8af2f26c8d96bf8b2e6b407d3ed69f23c2cd37"></script>
<script type="text/javascript" src="/packages/geojson-utils.js?81b79d5cf96d00b4b7a28987debcffb665c17526"></script>
<script type="text/javascript" src="/packages/minimongo.js?af9eb9d7447544ca9b839a3dcf7ed2da2209b56c"></script>
<script type="text/javascript" src="/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706"></script>
<script type="text/javascript" src="/packages/insecure.js?3dc9d4a2dad55999b5b15a447d57f3d5fb66b290"></script>
<script type="text/javascript" src="/packages/mongo.js?3cfe0c5981c197df33036a37574850f057e934a6"></script>
<script type="text/javascript" src="/packages/autoupdate.js?9a5ea03bf057815385bf569c7acc2c285c005491"></script>
<script type="text/javascript" src="/packages/meteor-platform.js?499a2f8522e25820b1153c69a92751ccaae507b3"></script>
<script type="text/javascript" src="/packages/autopublish.js?c3059a78bb200b171099fc4fa1a9345101790ddb"></script>
<script type="text/javascript" src="/packages/webapp.js?e1be090051b82f046484dccc2de7d747e50c7328"></script>
<script type="text/javascript" src="/packages/deps.js?504589e1e9585dec8f9f6094e5a87b22de3783a1"></script>
<script type="text/javascript" src="/packages/reactive-dict.js?1cb61826ceb23464171f17c2191c7e04a9b91508"></script>
<script type="text/javascript" src="/packages/session.js?daf192a7244079d45db32a6fc26ebc3881fc1aa3"></script>
<script type="text/javascript" src="/packages/livedata.js?718526445deb4d9baacb6d92c551adea1d36c1e1"></script>
<script type="text/javascript" src="/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a"></script>
<script type="text/javascript" src="/packages/htmljs.js?567eb96d5d22631c03d6aca6afa4c42f0d1295f2"></script>
<script type="text/javascript" src="/packages/observe-sequence.js?0532a9dd76dd78f543eb4d79a1e429df186d8bde"></script>
<script type="text/javascript" src="/packages/reactive-var.js?20335b7b37165980ddd9f23943b2e5b00aae1cc2"></script>
<script type="text/javascript" src="/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51"></script>
<script type="text/javascript" src="/packages/ui.js?5a663333fd30f8fd913f110e0ef779e84f67c4b8"></script>
<script type="text/javascript" src="/packages/templating.js?376767bb0d2463b3b2615a1b90e77f6b22d39d7b"></script>
<script type="text/javascript" src="/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f"></script>
<script type="text/javascript" src="/packages/launch-screen.js?495e58cf2465ba553324c68301cc62076b1fda1e"></script>
<script type="text/javascript" src="/packages/global-imports.js?ddfcd9be6cef3c8bb0263139937a05092e4a3fe9"></script>
<script type="text/javascript" src="/template.simple-todos.js?254c6b89dc5850fed9a9e89d00216fdc6b5eeb2e"></script>
<script type="text/javascript" src="/simple-todos.js?c2e184d448010d8345127ffbaf10ce04b6d355e3"></script>
<title>simple-todos</title>
</head>
<body>
</body>
</html>
I tried this on Firefox, SRWare Iron, and Google Chrome browsers in the normal and incognito mode.
When I do editing in html file, the server said this and the page gets not response.
=> Client modified -- refreshing
I did a new installation, and the same problem exists.
I tried this meteor --port 3030, still the same
I tried change from localhost to 127.0.0.1, http://127.0.0.1:3000
I have a MongoDB 3 installed, I stop mongod, and the problem still exists.
I tried this, and It display a blank page with title simple-todos
lynx http://localhost:3000
And when I cancel the server, the page is still loading.
Note: No errors appear in the output of the server
So what do you think the problem is?