Different Path for Serving Static HTML files in Express - javascript

Just a quick question. Say I have 2 different static HTML files that I want to serve in Express, index.html and contact.html. I've been fiddling around and I currently use this barebone Express code to serve them:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static('public'))
app.get('/', function (req, res) {
res.sendFile('/index.html');
});
app.get('/contact', function (req, res) {
res.sendFile(__dirname + '/public/contact.html');
});
app.listen(3000, function () {
console.log('runnning on port 3000')
});
Question is, I tried to serve contact.html using
app.get('/contact', function (req, res) {
res.sendFile(__dirname + '/contact.html');
});
but it always resort to the root directory instead of the public directory. OTOH, I can server index.html just fine without having to explicitly adding /public in the response.
Can anybody point me what's the cause for that?
Thanks.

For the given file structure:
yourapp
|-- contact.html
|-- index.html
`-- server.js
The following code would work just fine:
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get('/contact', function (req, res) {
res.sendFile(__dirname + '/contact.html');
});
Assuming both index.html and contact.html have read access.
Remember, sendFile requires an absolute path and __dirname refers to your app directory. Make sure you give references according to your file location.

Related

Express in NodeJS: URL param breaks routing

I'm trying to use express to serve my index.html, its dependancies as well as handle url params. For some reason, adding a URL param seems to break the pathing.
My basic nodeJS webapp has the following folder structure:
|- server.js (nodeJS server code)
|- public (dir)
| - app.js (app logic dependancy)
| - index.html (base HTML file to be served from server.js)
index.html is importing app.js as follows:
<script type="text/javascript" src="app.js"></script>
My express routes are as follows:
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/:country', (req, res) => {
res.sendFile(__dirname + '/index.html', {country:req.params.country});
}
I want the app to be served even when the country param is used.
However, when I add the URL param route, the above route stops working because express looks for index.html in the folder root, resulting in a 404.
Eg: http://localhost:3000/usa
Error: ENOENT: no such file or directory, stat '/Users/john/Projects/TestApp/index.html'
However, when I add the URL param route, the above route stops working because express looks for index.html in the folder root, resulting in a 404. Eg: http://localhost:3000/usa
Error: ENOENT: no such file or directory, stat '/Users/john/Projects/TestApp/index.html'
You should add public to the directory path, then.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
Or, to work cross-platform:
const path = require("path")
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "public", "index.html"))
})

How to serve folder in 'public' with express

I am trying to serve the login page in my public folder in express, so far i have been unable to do so. I tried to work the path but I don't know why it does not work. What I want to have is that I can have more code in the callback but because of the way it is now I can do that, when I try to make the callback a full function it won't work either.
My folder structure
- root
- server
- server.js
- public
- login
- index.html
const express = require('express');
const app = express();
const path = require('path');
app.listen(4000);
console.log('server started\n');
app.get('/', () => app.use(express.static(__dirname + '/public/login')));
// what i want to have
app.get('/', () => {
// serve file
});
You should mount the static file serving directly when the server starts, not after the first request arrives so this line:
app.get('/', () => app.use(express.static(__dirname + '/public/login')));
has to be:
app.use(express.static(__dirname + '/../public/login'));
You also have to go up one folder as the code is started in the /server/ directory, which can be done with /../.
If you only want to server the index.html from public folder instead of all files in there, what you can do is
app.get('/', (req, res) => res.sendFile('index.html', { root: __dirname + '/../public/login'));

node server.js - Cannot GET /

I am currently working on a project which is a webpage using angular to dynamically change DOM elements. Within the project is a public folder which contains all HTML, CSS, JavaScript and JSON objects. The project must be distributed so I am using node to run from localhost. This is my server.js code:
var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req,res){
res.sendFile(path.join(__dirname + '/public'));
});
app.listen(8080, function(){
console.log((new Date()) + " Server is listening on port 8080");
});
When I head to localhost:8080 it just says Cannot GET /. Where am I going wrong?
The correct way to serve static files with express is as follows:
//Look for statics first
app.use(express.static(path.join(__dirname, 'public')));
//Return the index for any other GET request
app.get('/*', function (req, res) {
res.sendFile('index.html', {root: path.join(__dirname, 'public')});
});
Edit: on a side note this may be worthwhile to mention that app.get should be the last route declared in node so if you want API endpoints exposed declare them above (before) the final app.get.
You forgot to point to the actual html file you want to display. If you have a index.html in your public directory, just point tot '/public/index.html' . That works (tested it here).
Followed user Muli's answer and all files are now being served correctly. Code here:
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req,res){
res.sendFile('index.html', {root: path.join(__dirname, './public')})
});
app.listen(8080, function(){
console.log((new Date()) + " Server is listening on port 8080");
});

Scotch-io/node-todo app

How is the index.html (frontend Angular) getting called exactly?
In the tutorial, it was said that by having one of the following routes in route.js, frontend is getting called
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
});
----------or-------------------
app.get('*', function(req, res) {
res.sendfile('__dirname + '/public/index.html');
});
But even after removing that route, index.html is getting opened (or) If I rename index.html as index1.html at route and html file it is showing error.
Have you created a file index1.html in public folder? If yes, Use
res.sendfile('public/index1.html');
OR
var path = require('path');
res.sendFile(path.join(__dirname, '../public', 'index1.html'));
to render index1.html.
Note : sendfile is deprecated.

Issue Routing With Node.js - Cannot GET

I finally got everything working on a certain page, but the issue I'm facing now is when I create additional pages. I realize the issue must be with my routing, but I'm not sure how to change the server side code without effecting my app.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
// socket functions
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
I would like to serve html in a folder 'public' and have files like index.html and other.html in there.
Configure your express app to use a static directory.
app.use(express.static('public'));
All files located under public can now be accessed. So a file called index.html can now be reached via /index.html
Further documentation can be found here:
http://expressjs.com/starter/static-files.html
If your folder is called public then you could do something like
app.use(express.static('./public'))
.get('/', function(req, res) {
res.sendFile('index.html', {root: 'public/'});
})

Categories