How to include static html pages into my NodeJS project - node.js

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.

Related

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

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

Express static folder does not load properly

I'm having trouble with a Node APP that I am building.
App folder structure:
controllers // controllers
helpers // helpers
config // some config files
public // stores a built angular app
...
App URL 1: www.domain.com
App URL 2: www.another.com/myapps/app1
So this is how I set the static folder to load the assets:
app.use(express.static(__dirname + '/public'));
And this is how I would access the files in the static folder:
URL1: www.domain.com/assets/main.js
URL2: www.another.com/myapps/app1/assets/main.js
Now, the problem is that if I deploy the app on URL1 everything works perfectly. But deploying the app to URL2 gives me some issues.
The static files cannot be accessed on the app on URL2. I get 404 (Cannot GET ...).
www.another.com/myapps/app1/assets/main.js // returns 404
www.domain.com/assets/main.js // returns the JavaScript file.
There are multiple apps running on URL2 that is why I have used contexts to separate the apps.
My initial thoughts are that because of the additional contexts to the url on URL2, express is failing to set the static folder properly.
Could this be because the static folder is not being set properly?
express.static receives data from somewhere and applies this data to the root of your domain.
Actually you can get your files inside another folder by adding some structure.
In your case set app.use(express.static(__dirname + '/public')); and place assets inside app1 and then in myapps folders. All this should be inside public folder

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.

Where to place robots.txt - Nodejs express project

Can you please tell me where to place robots.txt and sitemap.xl in nodejs express project folder structure so that it will be available to search engines.
I placed it along with app.js and inside public folder,but i got "Cannot GET /sitemap.xml" error in both the case
Have you set the route for your public folder, the one that is shared or served to the public?
like for example:
app.use(express.static('public'))
All the content inside the folder: "public" like html,css or robots.txt will be served.

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

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().

Resources