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
Related
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
My routes are configured in app.js. The /users route works as expected except when rendering express layouts I cannot access the css files located at ./css/style.css
If I open a page using the /users route, I can see it's looking for /users/css/style.css but I thought setting the directory to static would override this?
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));
app.use(express.static('css'));
First of all, what app.use(express.static('css')); does is to serve statically the files starting from the given path, in this case css.
A good practice is to create a folder called public and use it to serve it's inner files statically. So your static folder should be like this:
-public
-css
-style.css
and your app.js should have app.use(express.static('./public'));
Now, another problem you may be having is the way you cast the paths (url) to load certain files.
Let's say you request http://localhost:PORT/users and the served HTML loads a stylesheet using <link rel="stylesheet" type="text/css" href="PATH">.
You could write the PATH in 2 ways.
css/style.css
/css/style.css
The difference is that the first method will search for the file relative to the path you're already in (e.g http://localhost:PORT/users/css/style.css). The other method will get such file using the 'domain' you are already in as a starting point (e.g http://localhost:PORT/css/style.css.
Hope this helps c:
I figured it out. Added this to my app.js file:
// GET /static/style.css etc.
app.use('/users', express.static(path.join(__dirname, 'public')))
More information here if needed: http://expressjs.com/en/api.html
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.
You can view my files in github at https://github.com/elmoreka/myTaskLIst.git.
It doesn't seem to be getting my index.html file in my views directory. I get an error on the localhost 3000, cannot get .
The index.html is not served because the path used for res.render() is incorrect.
In your file routes/index.js, the rendered path is:
res.render('views/index.html');
However, as the view root is defined as myTaskList/views, the above code would try to find file myTaskList/views/views/index.html, which does not exist. To fix this issue, the rendered path need to be as:
res.render('index.html');
As per Expressjs, index.html is a normal static file in your case, that needs to be sent from the server and rendered at the client(browser). Since you haven't used any template engine (ejs) for your index page then the correct expressjs API to be used is
res.sendFile('index.html');
and not
res.render('index.html'); // this is not ejs template file.
In server.js you are defining "client" as your static folder:
// Set Static folder
app.use(express.static(path.join(__dirname, 'client')));
If you want to serve a static file like your index.html you need to move it to your static folder "client". Then you can send it to the client with res.sendFile().
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