I have a node js server when I run HTML page in local host i get the error Uncaught SyntaxError: Unexpected token < in the console because my local js and css files are not able to be loaded.
i have gone through - Node.js serve HTML, but can't load script files in served page
but it didn't worked
i have a file structure
enter image description here
my server code server.js
Node js:-
var express = require('express');
var http = require('http');
var fs = require('fs');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get('*', function(req, res) {
console.log("Global");
res.sendFile(__dirname + '/public/index.html');
});
var port = process.env.PORT || 7000;
http.createServer(app).listen(7000);
My HTML file index.html is
<!DOCTYPE html>
<html>
<head>
<title>sample spa app</title>
<link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
<li>home</li>
<li>about</li>
<div>
<h2>you are in index.html</h2>
</div>
<div id="app">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="public/js/app.js" type="text/javascript"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>sample spa app</title>
<link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
<li>home</li>
<li>about</li>
<div>
<h2>you are in index.html</h2>
</div>
<div id="app">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/app.js" type="text/javascript">
</script>
</body>
</html>
<link rel="stylesheet" type="text/html" href="css/style.css">
The static handler will try and find a file sampleProject/public/css/style.css
<script src="public/js/app.js" type="text/javascript"></script>
The static handler will try and find a file sampleProject/public/public/js/app.js (yes, I wrote public/public).
None of these exist, therefore the static handler lets the request pass to the next route. The next route forces sampleProject/public/index.html to be served, whatever the request is. Hence your error.
Option A: isolate statically-served files
app.use('/public', express.static(__dirname + '/public'));
(As a side note you should require('path') and declare express.static(path.join(__dirname, 'public')), which is safer and more portable than manually concatenating.)
This tells the application to use the static handler only if the route begins with /public.
Option B: always try to resolve files as static
Move your css folder to public/css, and change the path when calling your JS to:
<script src="/js/app.js" type="text/javascript"></script>
Read about the bases here.
Related
When launching my NodeJS server and typing localhost:8080, I get the previously mentioned error as it loads the page. Below is my head section in my index.html file, I'm not sure why this occurs, my index.html is in the same directory as script.js and style.css.
<head>
<meta charset="utf-8">
<title>Express & Node Test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>
Using the following snippet from my app.js file for ExpressJS routing.
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, "/web/index.html"));
});
I've had no success searching my problem so I have resorted to asking on StackOverflow, any help would be greatly appreciated.
You can set your code like this in order to serve files from the current directory, Instead of path.join you can use:
app.get('/', (req, res) => {
res.sendFile(__dirname + "/index.html"); });
I have a node.js app with a static css file. When I create a middleware and call the css file, it is geeting an error as follows:
Refused to apply style from 'http://localhost:3000/files/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Here is my app.js file
var express = require ('express');
var app = express();
app.set('view engine', 'ejs');
app.use('/files', express.static('/files'));
app.get('/', function(req, res){
res.render('index');
});
app.listen(3000);
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>New page</title>
<link rel="stylesheet" type="text/css" href="files/style.css">
</head>
<body>
<p>New style</p>
</body>
</html>
When I use URL : http://localhost:3000/files/style.css
Display "Cannot GET /files/style.css" and when checking in the console's network tab, it says styles.css not found. This happens when I add static javascript files too.
I also tried this with follows
app.use('/files', express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/files'));
app.use(express.static('files'));
and none of them has worked so far.
How can I solve this?
You try to get file from files/files/files/style.css
Try code below:
NodeJs:
app.use(express.static(path.join(__dirname, 'files')));
HTML:
<link rel="stylesheet" type="text/css" href="/style.css">
Hiii, I have written mocha tests for nodejs executing well in the terminal,I need to run the tests and display the results in browser, I did it as suggested in Mocha documentaion.I created a test runner file and include the template structure and included my test files. I properly configured the route in nodejs and now when I call the url in Postman. I just got the same html file as response,can any one help me out to run the tests in the browser
Here is my test runner file :
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></div>
<script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"> </script>
<script>mocha.setup('bdd')</script>
<script src="../test/notification_nodetest.js"></script>
<script src="../test/performance_check.js"></script>
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>
here is where I configure the url :
app.get('/notifications/test', notificator.test_results);
test_results: function(req, res) {
app.get('/index.htm', function (req, res) {
var path = require('path');
res.sendFile( path.resolve("test/index.html") );
})
I want to load client side javascript chat.jsand css style.css in my html file but i get a 404 error while loading them.
This is my server file:
// routing
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
This is my client html:
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="chat.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
How can I load them in my app?
All files are in the same root folder.
I tried this but it doesn't work:
app.get('/', function (req, res) {
res.sendFile(__dirname + '/chat.js');
});
Looks like you are using express web framework so in that case you should use the express static middleware for your purposes.
I did an example that is below.
here is the server server.js file:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(4040, function() {
console.log('server up and running');
});
Where you see that Express is serving the files that resides on public directory.
You see I didn't provide a route for / since the browser automatically is going to grab the index.html.
public/index.html:
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1>Hey</h1>
<script src="app.js"></script>
</body>
</html>
From the perspective of the browser he only knows the index.html, app.js, and style.css files since they were provided by express.
public/style.css:
body {
background: red;
}
public/app.js
document.addEventListener('DOMContentLoaded', function() {
alert('hello world');
});
I am building a web app using NodeJS, ExpressJS, AngularJS, Bootstrap, and a Postgres DB using Sequelize. I am having problems with loading all of my "asset" files when I load up my index.html page.
So here is my structure:
server.js
app
index.html
app.js
assets
css
styles.css
img
js
javascript files
Here is my server.js file:
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
var database = require('./config/database');
var path = require('path');
app.use(express.static(__dirname + '/app'));
require('./api/routes.js')(app);
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
app.listen(port, function() {
console.log("Node app is running at localhost:" + port);
});
Here is my index.html file:
<DOCTYPE html>
<html lang='en' ng-app="app">
<head>
<link src='assets/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<link src='assets/css/styles.css' rel='stylesheet' type='text/css' />
</head>
<body ng-controller="controller">
<nav class="navbar navbar-inverse navbar-fixed-top">
</nav>
<script src='assets/js/jquery-2.1.3.min.js'></script>
<script src='assets/js/angular.min.js'></script>
<script src='assets/js/angular-route.min.js'></script>
<script src='assets/js/angular-resource.min.js'></script>
<script src='assets/js/bootstrap.min.js'></script>
<script src='assets/js/modernizr.js'></script>
<script src='app.js'></script>
</body>
</html>
My problem is that, with my current setup, when I start up node and hit my localhost:5000 the index.html file loads along with all of my javascript files inside the assets/js folder. When I open up chrome dev tools I can actually see that folder being loaded in the sources pane. However, NONE of my CSS loads. Why is that? Any help would be greatly appreciated as I have basically exhausted all other options.
first post, so be generous. :)
you should actually use href to reference your css files.
<link href='assets/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<link href='assets/css/styles.css' rel='stylesheet' type='text/css' />
See here: http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import