What is the best way to display multiple HTML files using node.js?

click here to see the image

Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localhost:8080. Specifically, I am having trouble moving to write.html, edit.html, and view.html after accessing list.html via localhost:8080. Can someone please provide guidance on how to accomplish this?

Despite conducting various searches on Google, I have been unable to find a solution that meets my requirements. My ultimate goal is to create a crud bulletin board, with my initial objective being the seamless navigation between different html forms. Any assistance in achieving this would be greatly appreciated.

htmlcssnode.jsexpressmariadb

Answer №1

Utilizing routing in your code allows you to intercept various routes and paths effectively. Discover more about routing here

app.get('/', (req, res) => {
 res.render('index.html')
})

app.get('/update', (req, res) => {
 res.render('update.html')
})

app.get('/browse', (req, res) => {
 res.render('browse.html')
})

Answer №2

By utilizing express.static('public'), you are allowing for the serving of all static assets, such as html files, from the public directory. To optimize your setup, consider relocating the files to the view folder, while moving the index.html file to the public directory.

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

Upload Unsuccessful: File Did Not Successfully Transfer

I recently started learning Node.js and am currently attempting a task that involves file upload. Despite setting up the module, middleware, and file path based on Multer documentation and Youtube videos, I'm facing issues with the file not uploading. ...

node.jsexpressmulter

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to fill in predetermined HTML with information using jQuery?

Currently, I am working with several ajax forms that allow me to add rows of data dynamically using ajax. While the form submission is functioning correctly, I am having trouble figuring out the best way to append the newly inserted data into the database. ...

jqueryhtmlajaxtemplates

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

Height and placeholder issue with ion-searchbar

Hey there, I hope everything is going well for you. I've encountered a problem with the Ionic 5 - Angular Searchbar feature. This is how I added the searchbar: <ion-searchbar [(ngModel)]="text" (ionChange)="sear ...

cssangularionic-frameworksearchbar

Struggling to generate a div using my JS/jQuery code

Currently working on a post-it web application to improve my skills in JavaScript and jQuery. I've encountered a few errors that have me stumped. Although I'm new to StackOverflow, I often use it as a helpful resource. You can find the code here ...

javascriptjquerycsshtml

Showcasing an image stored in an HTML file on a Vue.js webpage

I'm currently facing an issue with displaying a local image saved in an HTML file on my Vue.js page. I attempted to store the content of the HTML file into a variable using the code below: computed: { compiledHtml: function() { return this.a ...

javascriptpythonhtmlvue.js

Adding regional dependencies to Lambda deployment

I am working on a project with multiple "micro-services" deployed to AWS Lambda. Along with these services, I also have shared libraries that need to be included in the deployment. Here is how my directory structure looks: /micro-service-1 /dist ...

node.jsnpmgulpaws-lambda

How can CSS files be shared among multiple projects within Visual Studio 2012?

I am working on a Visual Studio Project Solution that includes 3 separate projects. To streamline the process and avoid duplication, I aim to have a shared CSS file for all 3 projects since they all follow the same CSS rules. Despite trying the Add As Lin ...

c#cssvisual-studio-2010

Fade or animate the opacity in jQuery to change the display type to something other than block

I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...

javascriptjqueryhtmlcss

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

cssreactjsmaterial-ui

I am facing an issue where the CSS style sheet is not connecting to my HTML file

I'm facing an issue with linking my CSS style sheet to my HTML file using the following code: <link ref="stylesheet" href="../landing/css/stylesheet.css" type="text/css"/> Even though I have checked the directory l ...

htmlcss

Trouble displaying images from JSON file in AngularJS using ng-src - need help with image loading

While utilizing AngularJS to extract image data from a JSON file, everything seems to work fine for other types of data except images. Why is the ng-src not retrieving any images? I am attempting to load all the images into the div and set the src, alt, a ...

htmlangularjsjson

"Using Node.js for proxying requests and implementing OAuth authentication

Having a small node.js application that relies heavily on oAuth, I encountered an issue: the server where I intend to install it is concealed behind a proxy. This necessitates rewriting a portion of the code to incorporate proxy usage. Here's my query ...

javascriptnode.jsoauthproxy

Looking to integrate Nestjs with additional Redis functionalities?

I recently set up a nestjs backend with redis for caching by following the instructions in the official documentation https://docs.nestjs.com/techniques/caching#in-memory-cache. To achieve this, I utilized the cache-manager-redis-store package and include ...

node.jsredisnestjsbackend

Is it necessary to always invoke next() in a GET or POST handler when using node express?

Up until this point, I have been creating my get and post handlers with only (req, res) as parameters. The assumption has always been that these handlers are placed at the end of the middleware chain, where all responses and error handling are taken care o ...

node.jsexpress

When using res.render to send results, redundant lines are displayed

I feel like I must be missing something really obvious, but for the life of me I cannot figure out what it is. All I want to do is list the documents in a MongoDB collection in a straightforward manner. I am working with nodejs, mongoose, and Jade (althoug ...

javascriptnode.jsexpresspug

The phrase 'tsc' is not identified as a valid cmdlet, function, script file, or executable program

Recently, I attempted to compile a TypeScript file into a JavaScript file by installing Node.js and Typescript using the command "npm install -g typescript". However, when I tried to compile the file using the command tsc app.ts, an error occurred: tsc : T ...

node.jstypescriptnpmcompiler-errors

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

Limiting the use of global variables or functions in Node.js

How can I restrict global variables and functions in Node.js? Similar to the 'require' method, I am looking to limit the use of the 'require' method. I do not want any Node applications to access "fs" in my custom Node framework buil ...

node.jsexpress