Getting a 404 for css in Express - javascript

My folder structure is something like this:
app
controller
routes
app.js
Within my controller folder, I have
controller
sites folder
index.html
style.css
controller.js
Here is my Controller.js
const express = require('express');
app = express();
app.use(express.static('../site'));
module.exports= {
index : (req, res, next)=>{
res.status(200);
res.sendFile(__dirname + '\\site\\index.html');
}
};
And here is my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
When I run the server and do a GET request, Express gives a 404 on the CSS file. Where am I going wrong?

Related

Can't load/find files on server with node.js, 404 error (not found)

I'm trying to load a script.js and a style.css file on the server. The index.html and index.js work fine, however, there seems to be an error when I try to load the style.css file and script.js file, which I use for backend.
GET http://localhost:4000/script.js net::ERR_ABORTED 404 (Not Found)
All my files are in the same directory, /public.
I already checked the CSS file, and it loads when I display the HTML file when it's not on the server.
This my index.js file:
const express = require('express');
const cors = require('cors');
const fs = require('fs')
const ytdl = require('ytdl-core');
const app = express();
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))
app.use(cors());
app.listen(4000, () => {
console.log('Server works at port 4000');
});
app.get('/', function(req,res){
res.sendFile(__dirname + '/index.html');
});
app.get('/download', (req,res) => {
var URL = req.query.URL;
res.json({url:URL});
})
The HTML file:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="/style.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<title>PyTube</title>
</head>
<body>
<h1>PyTube</h1>
<input type="url" name="yturl" class="URL-input" id="yturl" placeholder="https://www.youtube.com/watch?v=" required>
<button class="convert-button">Convert</button>
</body>
</html>
<script src="script.js"></script>
I've tried a bunch of things and trying things with __dirname and paths, but I can't find the issue or fix it.

Serve a web app using preact package with nodejs

I have an electron app where i use preact package to create components and serve them in an index.html and i want to turn it to a web app
my file structure is
-- src/
---- workers/
---- components/
---- index.js (rendering the div#root)
-- index.html (with div#root and script src='src/index.js')
the js files contain nodejs code
i tried to create a root file index.js with a server pointing to index.html but the js inside src/ doesn't work
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html>
src/index.js:
const { render, h } = require("preact");
const App = require("./components/App");
const rootEl = document.getElementById("root");
render(h(App, { rootEl }), rootEl);
i tried this:
const path = require("path");
const express = require("express");
const app = express();
app.use(express.static(__dirname));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(process.env.PORT || 4433, () => {});

Getting an express MIME error when I try to load css stylesheet

I keep getting the following MIME error while trying to lead in a stylesheet to my application:
I have followed the newest issues on this MIME error for hours now with no luck. I have told my Express development server to pull resource from a static file and still no luck. Here is my development hierarchy:
I will include my code below. Any help is appreciated.
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="subject" content="">
<meta name="author" content="">
<link rel="stylesheet" href="/public/styles/customStyles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Clone Application</title>
</head>
<body>
<div class="conatiner-fluid">
<nav class="nav-wrapper">
Hello Again
</nav>
Hello World
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
**Server.js**
const express = require('express');
const app = express();
const router = require("./router");
const path = require("path");
const PORT = 3000;
app.use(router, express.static('public'));
app.listen(PORT, () => {
console.log("Listening on port: " + PORT);
});
**router.js**
const express = require('express');
const router = express.Router();
const pages = "/public/pages/";
router.get('/home', (req, res) => {
res.sendFile(__dirname + "/public/pages/home/index.html")
})
module.exports = router;
Your HTML links to the stylesheet at /public/styles/customStyles.css
However, the correct URI is /styles/customStyles.css (or preferably without the first slash, styles/customStyles.css so it will continue to work if the page isn't in the root).
app.use(router, express.static('public')); tells express to serve static files under the 'public' folder, so adding 'public' to your CSS URI is incorrect.
You're getting an HTML MIME type due to the Express default error page ('Cannot GET..')

Not reading the CSS - Express ejs layouts

I am using the express ejs layouts but only the mainPage can read the css the other pages don't read it (the css, the html read it).
Another question, if I wanted to use another layout (ex: layout2.ejs) what would i do to act on a specific page.
Tree:
Project
- public
- js
- css
- style.css
- routes
- index.js
- users.js
- views
- layout.ejs
- mainPage.ejs
- login.ejs
...
- app.js
I am using particles.js if you need to know.
app.js
const express = require('express');
const expL = require('express-ejs-layouts');
const app = express(); //Create a Web Application
//EJS
app.use(expL);
app.set('view engine', 'ejs')
//Routes
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));
app.listen(3000, ()=> console.log('Listening at 3000'));
app.use(express.static('public'))
index.js
const express = require('express');
const router = express.Router();
router.get('/',(req, res) => {
res.render('mainPage',{title: 'Groupy'}); (THIS ONE WORK AND READ THE CSS)
});
module.exports = router;
users.js
const express = require('express');
const router = express.Router();
//Login Page
router.get('/login',function(req, res) {
res.render('login',{title: 'Groupy Login'}); (DON'T READ CSS)
});
//Register Page
router.get('/register',function(req, res) {
res.render('register',{title: 'Groupy Register'}); (DON'T READ CSS)
});
module.exports = router;
layout.ejs
<html>
<head>
<script type="text/javascript" src="code.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</script>
<title><%= title %></title>
</head>
<body>
<div id="particles-js"> </div>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<h2>teste</h2>
<%- body %>
</body>
mainPage.ejs
<h1 id="title">Groupy</h1>
<div id="firstBox">
<div id="SignIn">Register <div id="login">Login</div>
</div>
</div>
<br>
<div id="mainBox"></div>
login.ejs
<h1 id="title">Groupy Login</h1>
Reseult of login (without CSS):
teste
Groupy Login
Can you try the following app.use instead of app.use(express.static('public'))
app.use('/public', express.static(path.join(__dirname, 'public')));
Also you should import path module
const path = require('path');
The error was the path of css and javascript (particles.js)
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/particles.min.js"></script>
<script src="/js/app.js"></script>

Why GET response return 404 error with node server js?

I created a server.js with node js . Using Index.html i am linking css , js scripts . But after executing HTML file , I am getting 404 errors with respect to that files . But these script files is already present there in that path . I think my server code may be the problem .
This is that Directory structure :
ui ( folder ) - inside that - bootstrap , files ( folder )
server.js
ui --- bootstrap/css/bootstrap.min.css
--- files/css/myedited.min.css
--- files/css/skins/skin-blue.min.css
and inside index.html i am linking all css/js files .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Start</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="/ui/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/ui/files/css/myedited.min.css">
<link rel="stylesheet" href="/ui/files/css/skins/skin-blue.min.css">
</head>
This is my server code :
var express = require('express');
var morgan = require('morgan');
var path = require('path');
var app = express();
app.use(morgan('combined'));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'ui', 'index.html'));
});
app.get('/ui/bootstrap/css/bootstrap.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'ui/bootstrap/css', 'bootstrap.min.css'));
});
app.get('/ui/files/css/skins/skin-blue.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'ui/files/css/skins', 'skin-blue.min.css'));
});
app.get('/ui/files/css/myedited.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'ui/files/css', 'myedited.min.css'));
});
var port = 8080; // Use 8080 for local development because you might already have apache running on 80
app.listen(8080, function () {
console.log(`my app listening on port ${port}!`);
});
when i load my application , index.html is working fine . With the help of inspect element in browser , i can see response that
Cannot GET /ui/bootstrap/css/bootstrap.min.css
Cannot GET /ui/files/css/myedited.min.css
Cannot GET /ui/dist/files/skins/skin-blue.min.css
i also restarted server nothing is working . any idea ?
By placing a / at the start of your file paths, you are saying to look for them in the computer base dir, not the current one.
Just remove the /:
app.get('ui/bootstrap/css/bootstrap.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'ui/bootstrap/css', 'bootstrap.min.css'));
});
app.get('ui/files/css/skins/skin-blue.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'ui/files/css/skins', 'skin-blue.min.css'));
});
app.get('ui/files/css/myedited.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'ui/files/css', 'myedited.min.css'));
});

Categories

Resources