Include libraries or external stylesheets in Express - javascript

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>

Related

index.html is not accessing app.js nor data.js after it is relocated to a subfolder 'templates'

I have a working static web page where the index.html successfully reads the style from css/style.css, the data from js/data.js and the logic from js/app.js. Here are the exact code inside index.html:
for the style: link href="static/css/style.css
for the data: script src="static/js/data.js
for the logic: script src="static/js/app.js
The problem is that when I run a Flask python app to simply load the index.html, I had to move the index.html inside a new folder call 'templates'. When I do that the web page loads, and even the style is loaded, even though I did not change the route for the css/style.css. However, the index.html does not access the data.js nor the app.js. I know I have to modify the routes' syntax in the codes I shared above, but I cannot determine what the route is. I have tried starting with 'frontend3/...' but it did not work.
frontend2 file/folder structure where index.html fetched data.js and app.js. There is no app.py flask application. The index.html reads data.js and app.js.
frontend3 file/folder structure where index.html does not fetch data.js and app.js. There is a flask app (app.py), which the convention requires me to place index.html inside 'templates' folder.
I know I missing something simple. Please help. Thank you.
Those links are relative, and need to be absolute. The simple way to do that is to prefix the paths with '/'. E.g.,
href="/static/css/style.css"
The Flask way is to use url_for in your templates
href="{{ url_for('static', filename='css/style.css') }}"
Either will work.

Including JQuery in Client Side Node.js

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 :)

Importing javascript files on WaveMaker

We have been using WaveMaker and wanted to know how we can go about importing an external javascript file using the platform ?
The external JS file should be imported into a folder in resources
The file path has to be given in login.html of the Web-App
The file path should be of the form "/projectname/foldername/filename.js/"
The functions in the external JS file can be accessed in the login page through its script and the function invoked here is from a sample js file.
The following works if using WaveMaker 6. This probably doesn't work with newer versions of WaveMaker.
Instead of having to add it to each project, try editing index.html in the webapproot directory and add you external js file:
<!-- Boot Wavemaker -->
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="/<path to javascript file>/sha512.js"></script>
Then, in order to have this work correctly in your development environment, add a context tag to server.xml just above the projects directory:
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context docBase="c:/<Path To Javascript Filet" path="<path to javascript file matching whats in index.html>" reloadable="true"/>
</Host>
In the above Context tag, docBase is the local folder with js and path should match the path placed in index.html.
Doing this you can use the javascript file across all projects without having to add it to resources in the project.

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.

Categories

Resources