localhost | wrong path to file | JS - javascript

A couple days ago I started learning Node JS and after couple hours I opened my localhost and it didn't have any css or JS, because of that the wrong path to files that I wrote. Could someone tell me what exactly I need to write in path, so the localhost won't give error like GET http://localhost:3000/index.js net::ERR_ABORTED 404 (Not Found)
// MY NODE JS CODE:
const express = require('express')
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
})
app.use('/static', express.static(__dirname + '/public'));
io.on('connection', function(socket) {
console.log('connected');
socket.on('disconnect', function() {
console.log('disconnected');
});
});
http.listen(3000, function() {
console.log('listening on localhost:3000');
});
<!-- MY INDEX HTML CODE: -->
<link href="styles.css"> <!-- 1 link -->
<script src="index.js"></script> <!-- 2 link -->
<div id="something"></div>

Just change
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
})
app.use('/static', express.static(__dirname + '/public'));
into
app.use(express.static(__dirname + '/public'));

Related

Creating routing for a static site using Express

I am creating a static site, (HTML, CSS, JS) using nodeJS and express for the server...
I am trying to create routes, so that the user sees /about, as opposed to about.html...
For the main, home page (home.html), it works fine. However, when trying to access the pages using the defined routes via app.get, I keep getting errors - any pointers...
Code is as follows - my styling and JS files ate in the public directory and the HTML files are in the views directory :
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname + '/public')));
app.use(express.static(path.join(__dirname + '/views')));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/views/home.html');
});
app.get('/about', (req, res) => {
res.sendFile(__dirname + '/views/about.html');
});
app.get('/contact', (req, res) => {
res.sendFile(__dirname + '/views/contact.html');
});
// app.use(express.static('public'));
// app.use(express.static('views'));
// console.log(__dirname);
module.exports = app;
The error I get is :
Cannot GET /views/contact.html
if your foldering is like the following photo you can do like this:
app.get('/about', (req, res) => {
res.sendFile(__dirname + '/views/about.html');
});
app.get('/contact', (req, res) => {
res.sendFile(__dirname + '/views/contact.html');
});
app.get('/', (req, res) => {
res.sendFile(__dirname + '/views/home.html');
});

Serve an HTML file in node.js

app.get('/',(req,res)=>{
res.send("index.html ");});
app.listen(3000);
console.log("Server Started");
whenever i enter my local host IP address it displays "index.html" text instead of opening index.html file
You are trying to serve an HTML file, so you have to res.sendFile().
var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000);

MIME type ('text/html') is not a supported

Here are some lines of code... I have another application running that is setup exactly the same and I am having no issues.
app.use('/app', express.static(__dirname + "/public"));
Here is the link tag
<link rel="stylesheet" type="text/css" href="/app/css/app.css">
It does the same with this img tag
<img src="/app/img/SCS-NewLogo_donl.svg" height="65px" width="350px" id="sc-logo">
I am not sure why, but it seems to be sending the file as HTML. Usually this means the file is not found on the server, but I checked myself and confirmed that it is.
Full file
const express = require('express');
const config = require('./lib/config');
const bodyParser = require('body-parser');
const URLS = require('./lib/URLS.js');
const PORT = process.env.PORT || 9005;
const ENV = config.ENV || 'TEST';
const SERVER = config.SERVER;
const app = express();
app.set('views', './views');
app.set('view engine', 'ejs');
app.use('/app', express.static(__dirname + "/public"));
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.all(/^\/apps$/, function (req, res) {
res.redirect('/apps/job-search');
});
app.get('/apps/job-search', (req, res) => {
res.render('pages/search');
});
app.post('/apps/job-search/send-input', (req, res) => {
// Send data to API server which will handle DB query...
axios.get(URLS.GatherSearchResults)
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err)
});
});
app.listen(PORT, () => {
console.log('App is listening on port ' + PORT + ' on server ' + SERVER + '...');
});
Directory Structure
Root
public
css
img
views
pages
search.ejs
partials
header.ejs
footer.ejs
app.js
I thinkk I see your issue. After declaring the route /app as static, you remap it to '/apps/job-search' several lines later.
Change the static line to app.use('/', express.static(__dirname + "/public")); and your links in the HTML file should start wit /css and /img etc.
Verify that by trying to open one of your existing links, and seeing what content you're currently serving (my guess - it'd be whatever is at '/apps/job-search').

express.static not working

I have the below code
var express = require('express');
var app = express();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
app.use(express.static(__dirname + '/public'));
http.listen(3000, function(){
console.log('listening on *:3000');
});
But when executing localhost:3000/Home.html where Home.html is the html file inside my public directory its saying Cannot GET /Home.html.
I dont know what mistake i did.
Please correct me.

ExpressJs is not serving index.html

I have an Angular client application that runs entirely in the browser. I am trying to use expressjs to host it. I modeled the server code after the server.js in John Papa's MEAN Hot Towel application that he uses in his Pluralsight Gulp course. This is my server code:
var express = require('express');
var app = express();
var port = process.env.PORT || 7203;
var environment = process.env.NODE_ENV;
console.log('About to crank up node');
console.log('PORT=' + port);
console.log('NODE_ENV=' + environment);
app.get('/ping', function(req, res) {
console.log(req.body);
res.send('pong');
});
console.log('** DEV **');
app.use(express.static('./src/app'));
app.use(express.static('./'));
app.use(express.static('./temp'));
app.use('/*', express.static('./src/index.html'));
app.listen(port, function() {
console.log('Express server listening on port ' + port);
console.log('env = ' + app.get('env') +
'\n__dirname = ' + __dirname +
'\nprocess.cwd = ' + process.cwd());
});
When I navigate to localhost:port/ping, I get pong back. When I navigate to localhost:port/ I get a 404 error. Can someone tell me what I am doing wrong here?
As #tommyd456 stated in the comments above, you need to declare a route for '/', like so:
app.get('/', function(req, res) {
res.send('Hello!');
});
From the express documentation, it seems that express.static targets a folder.
So, replacing app.use('/*', express.static('./src/index.html')); by app.use('/*', express.static('./src')); fix your problem and index.html will be served under 'localhost:port/'
So after many hours of fiddling and reading I replaced this code:
app.use(express.static('./src/app'));
app.use(express.static('./'));
app.use(express.static('./temp'));
app.use('/*', express.static('./src/index.html'));
with this:
app.use(express.static(__dirname));
app.use(express.static(process.cwd()));
app.route('/*')
.get(function(req, res) {
res.sendFile(__dirname + '/index.html');
});
and it appears to have solved the problem

Categories