CODEWITHSUNDEEP
javascriptnode.jsexpressroutesejs
prax
prax

Reputation: 286

Getting Static files in express js

I am creating a blog website in express .The app.js and router for post are below:

app.js:

var homeRouter = require('./routes/homeRouter');
var postRouter=require('./routes/postRouter');
var aboutRouter=require('./routes/aboutRouter');

//Importing model
var Blogs=require('./models/blog');
const Blog = require('./models/blog');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(expressLayouts);

const url='mongodb://localhost:27017/testblog';

mongoose.connect(url, { useNewUrlParser: true,useUnifiedTopology: true })
    .then((db) => {
        console.log("connected to server");
 
    })
    .catch((err) => {
        console.log(err + "cant connect");
    });

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', homeRouter);
app.use('/post',postRouter);
app.use('/about',aboutRouter);

postRouter.js:

var express=require('express')
router=express.Router();
const Blog = require('../models/blog');

router.route('/:BlogId')
.get((req,res,next)=>{
    console.log(req.params.BlogId)
    Blog.findById(req.params.BlogId)
    .then((blog)=>{
      res.render('post.ejs',{
        blog:blog,
        comments:blog.comments

      })
      .catch((err)=>{
        next(err)
      })
    
    })
})
module.exports=router;

My home page links to the post : <a href="post/<%=blog._id%>">

The problem is that when the post page is loaded none of the static files are found , i have all my static files in public folder and link to the files in the post.ejs file are also correct.What i have notices is that the app is trying to access the static files from public/post folder THE NOT FOUND MESSAGE IS BELOW: GET /post/js/clean-blog.min.js 404 3.025 ms - 4266 why it is trying to get files from post/js intsted of js/.

file strucutre

blog.ejs file

Upvotes: 0

Views: 286

Answers (1)

jfriend00
jfriend00

Reputation: 707218

Your links to static resources such as:

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

Need to have a leading / on them such as:

<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

If you don't have a leading /, then they are "path-relative" links and the browser will take the path from the URL of the current web page and pre-pend it to the URL you have in your href and request the combined URL from your server. This makes it so that your links ONLY work when there's no path on the URL (when it's a top level page) and as soon as the host page is not a top level URL, then they stop working.

So, if this:

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

is in a page with a URL of /about.html, then the browser will request:

/vendor/fontawesome-free/css/all.min.css

But, if that same link is in a page such as /trips/france.html, then the browser will take the /trips path from the URL and combine it and will request this from your server:

/trips/vendor/fontawesome-free/css/all.min.css

Which will not work with your server since that's not what it's expecting for a static resource.

When you put the leading / on your path, that tells the browser to NOT use the path from the current page's URL (to just use the domain) which is what you want so that you have a constant URL requests for the same static resource.

Upvotes: 2

Related Questions