What is the best way to integrate a bootstrap CSS stylesheet into my Express/Node.js project?

Currently, my approach involves using the following code to fetch my html file.

app.get("/", function (request, response) {
response.sendFile(__dirname + "/public_html/index.html");
})

The html file contains a form with method="post" and a submit button. I have included the necessary css code below.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

On the javascript side, I am using this code snippet to retrieve the values from the submitted html form.

app.post("/survey", function (request, response, next) {
let firstname = request.body.fname;
let surname = request.body.sname;
etc...

However, there seems to be an issue when it comes to including the css stylesheet in the output. How can I ensure that the css is applied to the displayed content?

I also attempted to create an in-memory sql database using sqlite3 to store the values, but I'm unsure about how to use that data to generate an html output.

Answer №1

There is an alternative approach You may consider using Handlebars or ejs.

Include this line in app.js file

app.set('view engine', 'hbs');

Then you can handle the request by :-

res.render('/filepath/index.hbs', {provide variables for the file in JSON format})

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

Can JSON encoding in a URL pose a risk of XSS attacks?

To ensure my application has URL-friendly capabilities, I am storing its context as a JSON within the URL. This results in something like: http://mysite.dev/myapppage/target#?context={%22attr1%22%3A{%22target_id-0%22%3A{%22value%22%3A%223%22%2C%22label%2 ...

Creating an interactive placeholder using React hooks

Would you like to create a dynamic placeholder for your input field? Here is an example of an array of filters: const filters = [ { id: "search", label: "Search", icon: <SearchIcon /> }, { id: "contains", ...

Unable to scroll to the top of the page with JavaScript

I tried the code below but it didn't quite do the trick. Can someone assist me with refreshing the page to the top every time it loads? window.addEventListener('load', function(){ window.scrollTo(0,0) }) window.onload = (event) => { ...

Tips on swapping out a nested npm sub-dependency with an entirely different package, not just a different version number?

Overview I am facing a challenge in addressing a ReDoS vulnerability that was highlighted by the results of an npm audit. The issue stems from a nested sub-dependency called ansi-html, which has been identified as vulnerable to attacks. Unfortunately, it ...

Is it possible to move the res.send() outside of the function in node.js?

I currently have the following code: var server = http.createServer(function(req,res){ res.writeHead(200,{'Content-Type': 'text/html; charset=utf-8'}); var oo = require('/test.js'); oo(connection, function (e, res ...

Converting an array into a string, transitioning from PHP to JavaScript

Hey everyone, I'm currently working on passing an array to a JavaScript file and encountering this error: An exception has been thrown during the rendering of a template ("Notice: Array to string conversion"). What I need is: data: ['2017/7&a ...

What is the best way to eliminate a particular element from an array produced using the .map() function in

I am experiencing an issue with my EventCell.tsx component. When a user clicks on the component, an event is created by adding an element to the components state. Subsequently, a list of Event.tsx components is rendered using the .map() method. The problem ...

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

Attempting to create a versatile function that can be used multiple times and then showcase the output in a designated

I have been working on a function that is proving to be quite challenging. My goal is simple - I want to extract the values of days, hours, minutes, and seconds and display them in the .overTime div. The twist is, I need to reuse this function multiple tim ...

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

The Angular Table row mysteriously vanishes once it has been edited

Utilizing ng-repeat within a table to dynamically generate content brings about the option to interact with and manage the table contents such as edit and delete. A challenge arises when editing and saving a row causes it to disappear. Attempts were made ...

Using jQuery to create a draggable element with a visual indicator that represents a link between two items

Utilizing the "parenting" tool in Adobe AfterEffects allows you to connect layers together. Simply click and hold the icon, then drag it to its destination. A line is drawn from the parent layer to your cursor as a visual guide. I have mastered draggable/ ...

Guidelines for creating a reference between schemas in Mongoose and inserting data using JSON

I am currently developing a node.js application where I am working with two mongoose schemas called Wallet and User. I am aiming to establish a relationship where Wallet is referenced in User and pass the appropriate JSON data using POSTMAN. This concep ...

Display an additional HTML page without altering the existing one

First of all, I would like to apologize for my poor English. Attending a French school didn't provide much opportunity to practice other languages. I have a header.html on my website that I am unable to modify because it is not owned by me. However, ...

What is the reason behind the malfunctioning of this navigation menu?

This is a responsive navigation bar created using bootstrap. The issue I am facing is that I want the navigation items to be displayed in a single row. Here is the fixed-top navbar: Below is the navigation menu code: https://i.sstatic.net/Zqrvm.png ...

When working with node.js, be cautious of using JSONP as it may lead to unexpected token errors if you

When working on my node.js function, I encountered an issue while using JSONP: this.send(JSON.stringify({ type: 'hello', username: this.data('username'), friends: friends })); The error reported was "unexpected token :", e ...

css absolute positioning and setting the height of a repeating background

I am facing a challenge with a container that contains a repeating image and I want it to fill 100% of the available height. However, some inner divs have their :after pseudo elements absolutely positioned to achieve the desired borders, which is causing a ...

Learn how to retrieve data utilizing App Routes in NextJS with Prismic. At the moment, I am only able to display uid fields

My current setup involves using Prismic and NextJS. Following their documentation on fetching data using the new App folder, I created a file called src/[uid]/page.jsx. import { createClient } from "@/prismicio"; export default async function Pa ...

Receiving a sleek black overlay with dynamic text upon hovering over an image

I have been searching extensively for a solution to my issue, but I haven't been able to make it work in my application. What I want is to create a black overlay over an image when it is hovered over, with text that resembles a button appearing on top ...

How can we utilize Javascript to add both days and years to the current date?

Is there a way to get the current date, add 1 day to it and then also add 1 year? If so, how can this be done? ...