Encountering an issue with the router that is unable to correctly read the head.html and tail

As a student diving into Express, I have come across a slight issue that I need help with.

Within my routes/index.js file, the following code block exists:

router.post('/orders.html', function(req, res, next) {
    var fhead = __dirname+ "/../views/head.html";
    var head = fs.readFileSync(fhead, 'utf-8');

    var ftail = __dirname+ "/../views/tail.html";
    var tail = fs.readFileSync(ftail, 'utf-8'); 

    //Do I need to add this???
    //res.render('index', function (err, html) {
    //  if(err) throw err; }

    var item = req.body.item;
    var quantity = req.body.quanty;
    var name = req.body.name;

    var rep = item + " was ordered " + quantity + 
    " times by " + name;

    res.send(head + rep + tail);
});

I am facing an issue where the CSS is not displaying correctly when I open the post orders.html page. Everything seems fine except for the CSS styling. Surprisingly, the head.html and tail.html files work perfectly well!

head.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<link rel="stlesheet" style="text/css" href="bs/css/bootstrap.min.css">
<link rel="stylesheet" style="text/css" href="../public/css/style.css">
<script type="text/javascript" src="../javascript/popup.js"></script>
</head>
<body>
    <header>
        <a href="index.html" target="_self"> 
        <img src="../public/images/logo.png" alt="Logo"></a>
        <h1 id="titre">SHOP</h1>
        <nav class="navbar navbar-default">
            Nav bar
            <ul class="horizontalbar">
                <li onclick="popup()">Me</li>
                <li><a href="contact.html" target="_self">Contact</a></li>
                <li><a href="orders.html" target="_self">Orders</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <h1>Wellecome!</h1>
        <p1>babla</p1>

tail.html

<link rel="stylesheet" style="text/css" href="../public/css/tail.css">
<div class="foot">
  <span>textext</span>
  <a href = "mailto: mail@com">Me</a>
</div>
</div>
</body>
</html>

Could anyone please assist me in resolving why the CSS is failing to load?

I also have another question - should I include all HTML code or just the body section in my index, orders, contact HTML files? By including only the body, I can call head + THE PAGE + tail which reduces repeated code. Is this approach advisable, or is it better to write everything out every time?

Thank you in advance!

Answer №1

To resolve the issue of missing CSS rendering, you have two options: create an endpoint that serves the CSS file or utilize a static directory for hosting the file. By adding the following code to your app configuration, Express will serve the specified directory as static content:

app.use(express.static(path.join(__dirname, 'public')));

This line indicates that everything within the '/public' directory will be served as static content by Express. Consequently, any requests made will now properly render the missing CSS styling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Even after refreshing the page, Chrome stubbornly insists on showing the old data

I've been working on a single-page application where one page triggers server requests every time it loads. After making changes and deploying them, I noticed that the live version of the application was not reflecting the updates. Even though the cha ...

Is it possible to use Koajs without needing to include the --harmony tag?

Following the merge of iojs into Node, I assumed that I could run koajs without the need for the --harmony tag (as it would have support for generators from es6). Inside my server.js file, I have the following code: var koa = require('koa'); va ...

Even after utilizing box sizing, additional margins are still contributing to the overall width calculation

Having an issue where the margin of my elements is affecting their total width, even with the box-sizing: border-box property in place. There are 2 elements - a sidebar and main content div - that stack neatly until margins are added and the sidebar moves ...

What is the most effective method for integrating Bootstrap CSS into an Angular project?

When incorporating a Bootstrap CSS file into an Angular project that has already been added using yarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc3dcc3">[email protected]</a>, th ...

How to place the cursor inside a content-editable DIV using Javascript and jQuery

I've been exploring different methods for moving the cursor around, but I'm struggling to find an elegant and effective solution. Essentially, what I want is to be able to call a line of code that performs the following pseudo code: Calculate ...

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

Avoiding the occurrence of moiré patterns when using pixi.js

My goal is to create a zoomable canvas with rectangles arranged in a grid using pixi.js. Despite everything working smoothly, I'm facing heavy moire effects due to the grid. My understanding of pixi.js and webgl is limited, but I suspect that the anti ...

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...

Can parameters be effectively passed to the $.change() method in any way?

I created a function that is triggered when the text in an input textbox changes - In my HTML file - <input id="unique" type="text" data-ng-change="KeywordChange(filterKey)" ng-model="$parent.filterKey"> In the controller - $scope.KeywordChange ...

Is it possible to add a separator line between labels and data columns in an Ext JS form?

Is there a way to include a subtle gray line between the label and field columns in an Ext JS form without manually drawing it? Although I used a graphics program to add the line above, the actual form is generated using the following code: var form_cust ...

React component returns an empty object during server-side rendering

I've encountered a strange issue while trying to implement server-side rendering in a React app. ... Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likel ...

Issues with Tooltips and Popovers in Bootstrap 5

I recently built a small website using Bootstrap 5. On this site, I added 2 buttons at the bottom of the page with tooltips and popovers. However, they seem to be malfunctioning as nothing is being displayed. You can check out the site for yourself at th ...

Disabling a button based on the result of a database query

Is there a way to dynamically enable or disable a button based on the result of a database query in JavaScript? I have managed to display an error message (with id="error") depending on the result, but toggling the button (with id="generate") doesn't ...

Bootstrap tabs trigger a reconstruction of CSS pseudo elements

I've encountered an issue while trying to add a ::before pseudo element to list item elements within a Bootstrap Tab. The pseudo element comes with a CSS animation that can be triggered by toggling the class. Although everything seems to work, I not ...

Creating a string-based template that can be included in Django

I need to create a list of clickable links for my navigation bar with the URLs provided using the url-tag. To achieve this, I have a list of dictionaries containing all the necessary information for each link, and I am creating a template string with them ...

Simple method to retrieve the ID of an input field within a form using jQuery selectors

I have a form with each input field having a unique id, and I have attached a jQuery 'input' event to the form. I want to retrieve the id of the field on which the user changes some value using a jQuery function. There seems to be something missi ...

What is the best way to manage a batch of files in a response from an Ajax POST request?

Currently, I am utilizing the OGRE web client to convert GeoJSON text data into ESRI shapefiles by making a POST request with Ajax. var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coord ...

Spacing that separates elements vertically within a listing

I'm facing an issue with a list of elements arranged in a row that wraps onto a second line due to space constraints within the container. Is there a way for me to introduce additional spacing between the first and second line of these elements, bear ...

The image does not resize vertically to fit the browser window

How can I make a large background image stretch to the size of the browser window when a user first visits the site, similar to how it is done on ? The current code I am using stretches horizontally but won't stretch vertically past a certain min-heig ...

Expo Fetch failure: Network request did not succeed in React Native app

For my expo project, I set up a nodejs server on my local machine. The GET and POST requests are functioning as expected in both Chrome browser and Postman. However, there seems to be an issue only within the expo application where the fetch command is thr ...