I'm learning node.js using express and have e 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=".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
I'm learning node.js using express and have e 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./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
2 Answers
Reset to default 7Using 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 ment 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 :)