Node.js server doesn't notice images and fonts-CodePudding

I'm working on a small web-dev project for school. I've followed these tutorials: Net Ninja | Node.js Crash Course for a simple blog website.

I'm using .ejs files instead of HTML to make HTML files dynamic, express.js and css to style the website. Any help would be great!

Here's the code and file managing:

index.ejs:

<!DOCTYPE html>
    <html lang='en'>
    
        <%- include('./partials/head.ejs')%>

    <body>

        <h1>Discuss your favorite<br>books online!</h1>
        <div >Click here to create a post:</div>
        <a href='/create'><img src='../Assets/addnew.jpg' id='add'></img></a>  //PROBLEMS 

        <%- include('./partials/nav.ejs')%>

        <div class='rightcorner'></div>
        <div><img src = '../Assets/laptop.png' id='laptop'></div>  //PROBLEMS
        <div><img src = '../Assets/book.png' id="book"></img></div>  //PROBLEMS

    </body>
</html>

head.ejs font importing code snippet:

<style>
@font-face{ /* Custom Fonts */
    font-family: 'circularBlack';
    src: url('../Assets/circularstd-black-webfont.woff2') format('woff2'),
         url('../Assets/circularstd-black-webfont.woff') format('woff');
    
    font-weight: normal;
    font-style: normal;
}
@font-face{ /* Custom Fonts */
    font-family: 'circularBold';
    src: url('.../Assets/circularstd-bold-webfont.woff2') format('woff2'),
         url('../Assets/circularstd-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{ /* Custom Fonts */
    font-family: 'circularMedium';
    /*src: url('Assets/circularstd-medium-webfont.woff2') format('woff2'),*/
    src: url('../Assets/circularstd-medium-webfont.woff2') format('woff2'),
         url('../Assets/circularstd-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>

app.js:

const { match } = require('assert');
const express = require('express'); //import express.js
const app = express();

//register view engine
app.set('view engine', 'ejs');  //looks only in 'views' folder!

//listen for requests
app.listen(3000);

//redirect to html pages
app.get('/', (req, res) =>{
    res.render('index', {title: 'Welcome'});
});

app.get('/discussion', (req, res) =>{

    const posts = [
        {post_title: 'Yoshi finds eggs', snippet: 'Lorem ipsum dolor sit amet consectetur'},
        {post_title: 'Mario finds stars', snippet: 'Lorem ipsum dolor sit amet consectetur'},
        {post_title: 'How to defeat bowser', snippet: 'Lorem ipsum dolor sit amet consectetur'},
    ];
    res.render('discussion', {title: 'Discussion', posts});
});

app.get('/create', (req, res) =>{
    res.render('create', {title: 'Create Post'});
});

app.get('/contact', (req, res) =>{
    res.render('contact', {title: 'Contact'});
});

//404 error page
app.use((req, res) =>{
    res.status(404).render('404', {title: 'Error 404'});
    //res.render('404', {title: 'Error 404'});
});

File managing system: Here's how the files are managed (images AND fonts are in "Assets" folder):

Everything has gone great so far but when I try to use images and fonts I get the Failed to load resource: the server responded with a status of 404 (Not Found) error, saying the server couldn't find the images and fonts I want to use. I think there is some problems with the way I'm "announcing" the files.

Thanks for any help at all, I'm really stuck here and would really appreciate any help! :) Feel free to ask any questions. Thanks!

CodePudding user response：

You don't need a head.ejs.

Add to your app.js this line:

app.use(express.static(__dirname   '/public'));

You will serve all your static files from the public directory.

Then in your public folder add the css, js and img folders if any.

Finally reference these files from your html file, for example if you have a styles.css file, add to the head tag of your html this:

<link href="/css/styles.css" rel="stylesheet" />