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
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 am using VS code to make a website and it says Hello World! I am trying to use <link rel='stylesheet type='text/css' href='style.css'>. Except it is not linking correctly. In the css file I have h1{color:red;} but the h1 is not red. If I put the style tag inside the HTML file it does work. How would I link the css code externally?
<!DOCTYPE html>
<html>
<head>
<title>Testing VS Code</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h1 id='test'>Hello World!</h1>
</body>
</html>
//node.js server:
var http = require('http');
var fs = require('fs');
const PORT=8080;
fs.readFile('index.html', function (err, html) {
if (err) throw err;
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(PORT);
});
How could I link the css file properly?
you need to adjust your css file path if your style.css is in css folder in same directory you need to <link rel="stylesheet" href="./css/style.css"> if you're using windows you can simply click ctrl and hreflink, it'll show you if path exist in that directory
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.
I am using Polymer combined with a NodeJs/Express server which I am planning on hosting with Firebase functions.
My problem here is that besides the index.html none of the inner files can be found (404). With none of them I am revering to the first imports made inside my index file.(webcomponents-loader.js and the my-app.html)
I tried many different flavours. From absolute paths, with base tag and without and with a different directory structure.
I am clearly not an expert when it comes to node.js or express so I believe I am doing something fundamentally wrong.
Update
The links that can't be found have a different URL then the path that serves my index.html
404: http://localhost:5000/src/my-app.html
index: http://localhost:5000/nodefire-96b46/us-central1/serve
My directory:
fire_node
functions
node_modules
index.js
build
modern
bower_components
index.html
polymer.json
src
my-app
My server file
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/build/modern'));
app.get('/', (req, res) => {
res.sendFile("index.html", {root: '.'});
});
app.listen(2000, () => {
console.log('Server is listening on port 2000');
});
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<base href="/modern/">
<link rel="manifest" href="manifest.json">
<script>
window.Polymer = { rootPath: '/' };
</script>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:4000/fire_node/functions/build/modern/src/my-app.html">
</head>
<body>
<my-app></my-app>
<noscript>
Please enable JavaScript to view this website..
</noscript>
</body>
</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');
});