How to include a script for use in the html - javascript

I am trying to experiment with tinymce npm. I am following their guide and I am stuck here
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>.
Now inside my head in html, I put this code
<script src="node_modules/tinymce/tinymce.min.js"></script>.
however in the console, there is an error Failed to load resource: net::ERR_FILE_NOT_FOUND
I also find another stack overflow question related to my problem and came across this one
I also tried using the solution here and this is what I did but still the same error.
<script src="scripts/tinymce.min.js"></script>
here is a screenshot of my sample project.
I am trying to get tinymce.min.js to index.html which is inside views/blog folder
My question is, how can I make this work?

A simple fix for you would be to use a CDN instead of NPM.
Replace this: <script src="node_modules/tinymce/tinymce.min.js"></script>
With this: <script src="https://cdnjs.com/libraries/tinymce"></script>
Below I give my guess at the issue, but I can't be sure without inspecting your whole project:
I think you are neither building nor serving your project. In your sample project I don't see any webpack, gulp, grunt, or other build tool config file. I also don't see anything like Browserify or similar. Those tools would be able to read your script pointing to a local npm folder and replace it with the script from the npm folder. Without those tools, your browser will think the src= string is a web url and the resource will not be found.
As I mentioned, a CDN is a simple fix because that is a real website hosting the script you are asking for. A more complicated approach which is used in commercial development is to have a complete build process and then a server.

Related

How to use github javascript repositories on my webpage?

This has been bothering me for a long time, today I finally decided I need to get it solved. If this is off-topic, please kindly tell me where should I post this question.
I've been trying to use this javascript repository on github: https://github.com/jasondavies/d3-cloud. I know very little about github, node.js and npm, I just simply want to make a beautiful word cloud on my html page, but it seems everyone on github assume their readers are no newbies like me.
What I have tried:
I have downloaded the .zip file and extracted them into a project folder. Then under the folder I create a test.html file:
<head>
<script src="/project/build/d3.layout.cloud.js"></script>
</head>
<body>
<div id="test">
</div>
</body>
The DOC is very simple. Without any actual example, I don't know how to get started. I've tried
d3.layout.cloud('#test').start();
It doesn't work at all. The DOC does mention examples, there are only two files under the example folder. They are all node.js javascript files. So I can't directly use it because they use require. So I tried to install them on my linux server.
I create a project folder on my server, and then ran
git clone https://github.com/jasondavies/d3-cloud.git
Now there are two folders under folder project: d3-cloud and node_modules. Not knowing if I have successfully installed it, I went into folder d3-cloud and ran
npm i
Now the whole folder structure is like this:
I understand folder node_modules is dependencies but I am totally confused here.
When I first did git clone did I already install the package?
Is running npm i redundant? But it does create another node_modules folder and install a lot of things under it as the screenshot below shows:
Are these all dependencies of this javascript app? So many?
At this point, do I HAVE TO use some bundling tools such as webpack(I merely know the name upon some brief google search) in order to use the .js file on my webpage?

Electron NPM application cannot find file:///eel.js, but python can

I'm building a desktop application using Python, JS, HTML and CSS. I'm connecting python using eel. When I launch my desktop application through the python terminal, it works perfectly.
However, when I launch the app through electron via command line:
$npm start
The desktop application loads up, but it doesn't execute on any of the python backend, explained well by this error in the inspector:
Failed to load resource: net::ERR_FILE_NOT_FOUND eel.js:1
I'm not sure what is causing it, I have spent the last 8 hours testing things but to no avail.
I know you may need more information but I've been checking everything, from file structure i.e. the __.py outside web folder, to inserting <script type="text/javascript" src="/eel.js"></script>, so please comment below what specifically you require as including every possible cause would be a very huge question. I will include whatever is relevant in edits in this question alongside the final answer for anyone with similar issues in the future.
No need to run from npm. eel.js is just virtual javascript, dont bother with it.
Put this in your your_main.py file
import eel.browsers
asign your electron browser
eel.browsers.set_path('electron', 'node_modules/electron/dist/electron')
and then use it
eel.start('main.html', mode='electron')
to run, call from python:
python your_main.py

How can I locally store and statically serve the angularjs library?

I am going to be working on an angular project without internet access, so my links to the cdn will not function. I would like to save the angularjs library to a folder inside of my project. Here is what I have tried:
I went to the cdn link, copied all of the text, pasted it into a file, and saved that file as angular.min.js . I then commented out the script tag for the cdn in my index.html file, and put in a new script tag specifying the path to the new saved file. When I open my project, I get the error "Uncaught ReferenceError: angular is not defined."
Here are the relevant pieces of my project's file/folder structure:
project
|_core
| |_public
| |_app
| |_index.html
|_libraries
|_angular.min.js
And here is my script tag:
<script src="./../../../libraries/angular.min.js"></script>
And here is the link to the cdn from which I copied the text:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js
Are you using a local webserver of any kind? Angular and many scripts need to be loaded from http and not file://. For this, you could use python's SimpleHTTPServer: python -m SimpleHTTPServer 8080 -- will open an http server on http://localhost:8080, open the url in your browser and you should be good to go. Also note that the order in which you load the scripts in your HTML is important, and Angular needs to be loaded before all modules of code that use it.
<script src="../../../libraries/angular.min.js"></script>
How about this ?
Have you just tried this?
<script src="/libraries/angular.min.js"></script>
Maybe your server start website (localhost:80) from the root of your project
You can use Grunt task to minify and concatenate all files. You can read the docs of GruntJS. Very useful.
http://gruntjs.com/sample-gruntfile
see the concatenate section.
if you do that manually you have check the sequence of lib files. Angularjs lib need to be on top.
There are chances of errors.
yes just to include a file you don't need Grunt
check in chrome inspect developer tool in network tab if your file angular.min.js loaded properly. If not you can change the path and try but if it is loading and still you are getting same error so please create jsfiddle or plunker of your file so that we can look it in detail.

Firefox is not loading my scripts under Node.js

I started a project using generator-gulp-webapp and I ran bower install --save heatmap.js. After that I added the Google Maps API source files to index.html and added the following two lines to the html-file:
<script type="text/javascript" src="bower_components/heatmap.js/src/heatmap.js"></script>
<script type="text/javascript" src="bower_components/heatmap.js/src/heatmap-gmaps.js"></script>
My problem now is that when I run gulp serve, none of those files are actually loaded. I don't seem to be getting any 404 errors when I look through the network inspector either. They seem to load just fine when I open up the index.html-file manually, without going through gulp / visiting http://localhost:9000/.
What am I missing here? I'm sure it's something really simple. Here are all of the relevant files.
Okay, turns out that the answer is "have you tried disabling Adblock?".

platform is not defined in polymer files downloaded from website

I'm trying to make a web application but i keep getting the error:
Uncaught ReferenceError: Platform is not defined
In the polymer.js file I downloaded from the website. How do H fix this?
I tried to re-download it and redid the import, which got rid of the other errors but this one persists.
You need to also load platform.js (the polyfills). Make sure it is the first script loaded on your page and comes before any HTML imports:
<script src="bower_components/platform/platform.js"></script>
The basic setup is here: http://www.polymer-project.org/docs/start/usingelements.html#using
More info here: http://www.polymer-project.org/docs/start/getting-the-code.html
platform.js was replaced now for webcomponents.js
If you are sure that is all right with your section and even so the error remains, there is something wrong with your environment (maybe some incompatibility between different versions of components or scritps).
Clear and download all your components and scripts again from the sources. I recommend use of Bower for that. Just wipe your repository and make a fresh bower install.

Categories