Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node.

I attempted the following:

var express = require('express');
var app = express();
var port= 3000;

app.use(express.static('public'));
app.listen(port, function(){
console.log('Express app listening on port ' + port);
})

app.get('/hello', function(request, response){
response.sendFile('index.html')
})

In this server.Js file, I specified the HTML file that should load on the page. The page loads, but without any styling and it doesn't load the images within it...

What steps need to be taken to ensure my front-end files are accessible when called?

Answer №1

It appears that you forgot to include the CSS file link in your index.html document.

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

Assuming your directory structure is as follows:

main folder 
     ├── server.js
     ├── package.json 
     └── public   
       ├── css  
         └── style.css
       ├── index.html

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

Is it possible to rearrange the positions of 2 divs using solely CSS?

I have created a unique design. On iPad, I am assigning the class 'handHeld' to the <body>, which will trigger positional changes between optionsWrapper and #container using CSS classes I've defined below on jsfiddle.net. .handHeld d ...

Cross-Origin Resource Sharing problem within Nest JS

I am currently developing an application using Nest JS for the back-end and React for the front-end. In my main.ts file, I have configured CORS settings as follows: const whitelist = [ process.env.APP_WEBSITE_URL as string, process.env.APP_URL as stri ...

Issues with the alignment of card-footer in Bootstrap 5 card components

Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 1 ...

having trouble adjusting the width of the buefy modal

Currently, I am working with vuejs alongside bulma and buefy. Specifically, I am utilizing the buefy modal feature and attempting to customize the modal width by utilizing its 'width' property. Thus far, I have attempted specifying the width in t ...

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Imagine you have a DIV element in your document with the id "row". Now, if you add another DIV with the same id and change the display property of the first DIV to "none", does the id of the second DIV become unique? ...

What is the best way to format 100K to appear as 100,000?

function formatNumberWithCommas(num) { return num >= 1000 ? `${Number.parseFloat((num).toFixed(3))}` : num; } ...

Using a function parameter to restore the values of an array

Looking to clear an array using a function parameter. Below is my implementation: <script> fruitArray = ["apple", "banana", "orange", "pineapple"] function clearFruitArray(myArr){ myArr = []; ...

Combining objects using ES6 import/export with async/await functionality

I am facing a situation where I have two files named config.js and config.json and my goal is to combine them into one object and then export it: config.json { "c": 3 } config.js import fs from "fs"; import fse from "fs-extra& ...

The difference between using an event listener directly in HTML vs. using the add

Looking to customize the behavior of an HTML element using event listeners? There are two ways to accomplish this: <form class="my-form"> <input type="submit"/> </form> <script> document.querySelectorAll(&quo ...

neither the req.logout() function nor the req.session.destroy() method seems to be functioning as

Update: I've noticed an interesting behavior with my website's Facebook login integration. When I log out of Facebook and then click the "login" button on my site, it correctly redirects me to the Facebook login page. After logging in, I am brou ...

Update the value of input within a Struts2 iterator by utilizing JavaScript

As a junior programmer, I am trying to update the value of an input type text within a Struts2 iterator without refreshing the entire page. I believe using JSON could be a solution for this issue. Here is my JSP code: <input type="text" name="cantidad ...

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

The system alert stating, "File or directory not found: ENOENT"

My Node.js application is displaying the following error: ENOENT, no such file or directory '~/Desktop/MyApp/newversion/partials/navigation.jade' I am certain that the file exists because I can access it by directly pasting the path. Additiona ...

Importing JSON data from a URL to display in an HTML table

Looking to utilize the Untappd API for a beer menu project, I've encountered an issue. The goal is to showcase the JSON data received from the server and organize it into an HTML table. Despite successfully importing data from a local list.json file ...

Deliver acquired post information to HTML using the read file technique

I've been diving into the world of nodeJS, jquery-mobile, and HTML5. Below is a snippet of my code: Fetching post data from an html form: req.addListener("data", function(postDataChunk){ postData += postDataChunk; console.log("Received POST ...

Revamp the HTML page by automatically refreshing labels upon every Get request

My HTML webpage requires real-time updates for one or more labels. To achieve this, I have incorporated CSS and JS animations into the design. Currently, I am utilizing Flask to handle all the calls. I face a challenge where I need to consistently update ...

JavaScript: Accessing the selectedIndex of a dropdown list in RadGrid

Currently facing an issue with utilizing the RadGrid control from Telerik. I am attempting to access and manipulate the value of a GridDropDowncolumn within RadGrid using JavaScript (while in edit mode). Does anyone have any suggestions for the correct Ja ...

Create a file with jQuery and send it to PHP

Hello everyone, I am currently in the process of developing a website that has the ability to generate an MS Excel file using jQuery and allow users to download it. My question is, how can I pass this generated file to PHP so that it can be sent as an atta ...

When incorporating babel-plugin-styled-components, Nextjs may encounter a mismatch error with classnames

After transferring the content of _document.js from the following styled components example and implementing the babel plugin mentioned in the styled components documentation, I am still encountering an error. _document.js import Document from 'next/ ...

Retrieve the route from a specific node in the jstree structure

Looking to retrieve the paths of selected nodes in jstree? You'll need the complete path of the nodes. I have a php file that generates the JSON, structured like this: header("Content-Type: application/json; charset=utf8"); echo json_encode(dir_to_ ...