Having some issues with my server setup. I have a server.js file running on node js. When I try to access the CSS and JS files linked in my index.html, I keep getting 404 errors even though the files are present in the specified path. I suspect there might be an issue with my server code.
Here's how my Directory structure looks like:
server.js
ui
|- bootstrap/css/bootstrap.min.css
|- files/css/myedited.min.css
|- files/css/skins/skin-blue.min.css
In my index.html, I have all the CSS/JS files being linked:
<!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'));
});
// Routes for serving CSS files
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 inspect the elements in the browser, I can see the response:
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've tried restarting the server but it's not resolving the issue. Any suggestions?