Including JQuery in Client Side Node.js - javascript

I'm learning node.js using express and have come across a topic thats giving me some trouble. Basically, once the user requests a webpage and the backend sends them the HTML webpage, if I want to include a javascript file to make that HTML page interactive, how would I exactly do that?
My backend looks like this:
var app = require('express')();
var server = require('http').Server(app);
var express = require('express');
server.listen(8080);
app.use(express.static(__dirname + '/views'));
app.get('/', function(req, res){
res.render('index.html');
});
and the HTML it sends looks like this:
<html>
<head>
<meta charset="UTF-8">
<title>WebsiteMainPage</title>
</head>
<body>
<h1>index.html</h1>
</body>
</html>
Do I just add Jquery by linking up the source in the HTML to a public source like this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Or do I have to do something special? For that matter how would I add a general javascript file that I wrote, not a library such as Jquery.
Edit: My project structure looks like this:
Project
|
|_____ backend.js
|
|_____ views
| |
| |_______ index.html
|
|_____ static
|
|_______ libs
|
|________jquery-1.12.1.min

Using CDN servers will the best option so that browser will cache your library files. and that will help your clients to reduce their page loading time.
If you want to use your own copy downloaded from your server, create a directory structure for example "static/libs/" and copy the jquery library inside that directory then make it as a static directory by
app.use(express.static(__dirname + '/static'));
then you can refer the jquery from your html page by
<script src="/libs/jquery/1.12.0/jquery.min.js"></script>
You can also make the node_module directory as static then all the node_module will be available to public and you can able to refer the jquery file from client side.
in a comment I saw that you have mentioned about npm jquery.
When you do npm jquery, jquery will be installed as a node module and it will be available in node_module directory and using require('jquery') you can use jquery modules in the server side only. If you want to use the require('jquery') method in the client side you have to use requirejs or webpack etc .

Dear,
it's so simple just include the jquery file by using
<head><script src="/pathto/jquery.min.js"></script></head>
OR
add CDN in head tag of your index.html file
Create A folder named 'public' within root folder of your app.
Inside 'public' folder create 'js' name folder
Keep all js file within 'js folder'
Make changes in your app.js file like such
app.use(express.static(path.join(__dirname, 'public')));
Now just go to you index file and add CDN or your jquery file normally in HTML head tag.
Thanks & Cheers :)

Related

net::ERR_ABORTED when trying to use my javascript file inside my html

Whenever I call my index.html that is served by my node.js server along with my styles, images and script files I get this net::ERR_ABORTED error for my javascript file included in the html.
This is my code in my html file to include my js file:
<script src="../jsfiles/getData.js"></script>
and I'm using this code on my server side to include them:
app.use(express.static(path.join(__dirname, 'pages')));
app.use(express.static(path.join(__dirname, 'styles')));
app.use(express.static(path.join(__dirname, 'images')));
app.use(express.static(path.join(__dirname, 'jsfiles')));
My project structure looks like this:
PongWebServer
-- pages
-- images
-- styles
-- jsfiles
I would appreciate any help, I'm stuck for over an hour now. Thanks in advance.
i don't know in which directory your index file is.
but what i can assume is that your directory may look like,
PongWebServer
-- pages
-- images
-- styles
-- jsfiles
-index.html
If something like this then you have to call your javascript file as
<script src="/jsfiles/getData.js"></script>
While you are using .. will go back to one path and will find for your jsfiles and that will not be thare.

How can I serve external css/js files to html files displayed by a NodeJS app?

I would like to serve html files at given URLs using only NodeJS, or a very lightweight and flexible other way. I've been able to serve those html pages using Express but there are things I don't like (the fact we must use a public folder and all the dependencies), and the external css/js just don't load.
I use something in the server.js file like :
app.get('/', function() { app.sendFile('index.html')});
And in the index.html file :
<link rel="stylesheet" href="style.css">
All the files are in the same folder.
In express you could you static middleware.
In the example below you define public directory to store it.
app.use(express.static(__dirname + '/public'));
Now you can put your style.css to this folder and it will be served as a static content.
More about middleware: http://expressjs.com/en/guide/using-middleware.html

serving static content in code structure generated by yeoman for angular fullstack

I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.

Add a node_module as a javascript src in html

Seems crazy that this isn't as easy as it should be.
My file structure:
node_modules/
public/
-- css/
-- js/
-- index.html
In index.html, I try to load a file in a node_module, like so:
<script src="../node_modules/angular-ui-sortable/src/sortable.js"></script>
But, this doesn't work. My error:
SyntaxError: Unexpected Token '<'
I check the resources, and sortable.js is being loaded with the content of index.html. I've seen this issue when the designated javascript file can't be found.
Is this just some wonky issue with nodeJS? Is there some black magic needed to simply load a javascript file into html?
I suspect you're doing something like this:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public');
Which would produce the kind of result your seeing. Suggested fix:
add
app.use(express.static(__dirname + '/node_modules');
and change the url to
<script src="/node_modules/angular-ui-sortable/src/sortable.js"></script>
I tried it out and this fix worked for me:
in you app.js in node add this:
app.use('/node_modules',express.static(path.join(__dirname , 'node_modules')));
and in your index.html add this:
<script src="node_modules/<packagename>/<filename>.js"></script>
If you worry about importing unwanted packages from node_models folders you could specify the routing to a specific folder of the desired package. Hope this helps.

Include libraries or external stylesheets in Express

I am building a todo app using express framework on node server...I have an index.ejs file as the starting point for my application, In the same folder I put my jquery.min.js file, when I try to include the jquery file as
<script src="jquery.min.js" type="text/javascript"></script>
My app fails to load it, when I see the network in my chrome it looks for https://localhost:3000/jquery.min.js
How do I load the file ??
PS: I am accustomed to loading scripts via cloud.google.com by placing the url in the src tag , But I want my application to load faster by this approach
you should create a ./public folder for static files.
add this line to your app.js above all your routes:
app.use(express.static(path.join(__dirname, 'public')));
Then just use this in index.ejs:
<script src="/jquery.min.js"></script>

Categories

Resources