Can someone please explain how static files in express js work? - node.js

I am new with nodejs and much more new with express module. I have a app setup like this;
The chart.js is my nodejs file. I am trying to make my js files and css file static by using app.use(express.static(-I didn't understand what i need to write here-)) in order to render my index.html properly but I don't know how to use and I did not understand the documentation. In the documentation they say coder able to use static like app.use(express.static('public')) but they don't mention about what is public, where it is in the project, what does it contain. Can someone please help mi about this situation? How does this express.static works and how can I make my files static?

NOTE: DO NOT PUT PRIVATE FILES INSIDE YOUR STATIC FOLDER.
app.use(express.static(__dirname + '/public'));
here you see inside of express.static() function is the path of your static folder that will be going to access directly from the browser and you don't need to write their routes because that folder will give all the access to the public. like css,js files. and those files you will be able to access as its directory.
in the above picture, you have html, css and js files in public folder which is located on root folder of the application. you need to access those public static files which are not related to nodejs so it should be defined as static on your server node js code as : app.use(express.static(__dirname + '/public'));. and it will get all the routes like:
http://localhost:3000/css/style.css
http://localhost:3000/javascript/script.js
http://localhost:3000/favicon.ico
http://localhost:3000/index.html
http://localhost:3000/robots.txt
you also can set prefix for those static routes. for that, you need to give prefix as: app.use('static_folder', express.static(__dirname + '/public')); then it will be looks like :
http://localhost:3000/static_folder/css/style.css
http://localhost:3000/static_folder/javascript/script.js
http://localhost:3000/static_folder/favicon.ico
http://localhost:3000/static_folder/index.html
http://localhost:3000/static_folder/robots.txt

Related

cannot reach a file on server though I exposed using express

In my project I need to store some text files dynamically and end user should be able to download them from browser. I know the best way is using object store like MINIO or S3 but unfortunately the only way I have is to use in memory storage. So what I am trying to do is: I made a public folder and I exposed it using the following code:
var express = require('express');
var app = express();
//setting middleware
app.use(express.static( 'public')); //Serves resources from public folder
var server = app.listen(5000);
it is as simple as that. Then for testing just to make sure I can download and reach a file I created a public folder with t.txt file in it and when I try:
http://localhost:5000/public/t.txt
I get
So why am I not getting it? Also is what I am trying to achieve will be a good match to scenario and is it doable at all?
When you're not specifying a path in app.use(), your app will serve the contents of the directory you're pointing to in express.static() on the root path. Try this:
http://localhost:5000/t.txt
That said, if you want it to be accessible at /public/t.txt, just specify the path:
app.use('/public', express.static('public'))
At first use the following line of code:
app.use(express.static(__dirname+'/public'));
This means that your home directory for static HTML pages is in the "public" folder. Note that the "__dirname" points to the directory of the current js file.
After that, call the following URL from the browser or POSTMAN:
http://localhost:5000/t.txt
As you can see, there is no need to write http://localhost:5000/public/t.txt referring to the "public" folder because you have already specified that in the app.use line.

Cant display static image in jade

I can't display image, image is in the same folder.
each user,i in users //users data loop
h2=user.name
.card
img(src='img_rr_01.jpg', alt='Avatar', style='width:100%') // Image
|
.container
h4
b=user.email
|
p=user.name
Make sure you are specifying your public assets folder by mentioning something like this -
app.use(express.static(path.join(__dirname, "/../public")));
Then your static file's paths should normally be starting with / and then follow the path as it is in your public folder. e.g. if your image is in public/images folder, then update your src to be /images/img_rr_01.jpg.
Please note that you need not mention public folder in your src.
Express is not going to serve anything that you don't give permission to. You have to give permission by using express.static middleware.
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express
For more details refer to https://expressjs.com/en/starter/static-files.html
If you have something like below in app.js you can directly specify the folder in which you have stored the images.
app.use(express.static(path.join(__dirname, 'public')));

How to include static html pages into my NodeJS project

I have a NodeJS project setup. I want to integrate my static html pages into it. Where can I do it ?
Thank you !
To expose static html, create a directory named "public" that lives next to your primary application file (app.js).
Assuming you are using the express framework, you can expose this directory by using the following code:
app.use(express.static(__dirname + "/public"));
where
var app = express();
Subsequently, any request to "/{something}" will attempt to resolve a route to a static file in your public directory, so if you had a file named {something} in that directory it would get served right up.

NodeJs / ExpressJs URLs

I need to parse parameters in the URL that come in this form:
localhost:8080/p/a=12345&b=acbd
After the variables are read, I load a HTML file that is in the public folder of my express server. That works ok. The problem is that my HTML file load several JS and CSS files and since the path is localhost:8080/p/ the files with relative paths can't be found.
What I need is something similar to the apache URL rewrite, where I can send the traffic to a specific file and change the URL to look in the way I want. I haven't found a node module that does that, any suggestions?
If you are using the static middleware to serve your static files, you can use
app.use('/p', express.static(__dirname + '/public'));
instead of
app.use(express.static(__dirname + '/public'));
You can see more details in the document of the Express

Using local js files withing an ejs template

So I've been trying to access a local js file within my ejs template but I can't figure out on how to do this.
I've tried creating a public folder and then add the files in there, and then this :
app.use(express.static(path.join(__dirname, 'public')))
But it keeps saying that the files are not found.
Can someone please explain me how to do this?
The template is nothing special and the rest is a simple express setup.
My scripts are in /views/scripts but it seems impossible to access those.
app.use(express.static(path.join(__dirname, 'public'))) //use the following code to serve images,CSS & JS files in a public folder.
so the folder structure for front-end will be like this...
public
---js
----javascript1.js
----javascript2.js
---css
----css1.js
----css2.js
---images
----img1.js
----img2.js
change the second script tag to :
<script type="text/javascript" src="/js/javascript1.js"></script>
For more details of express.js static-files

Resources