Having trouble configuring a basic express server to host a static JavaScript file

Struggling to set up a basic Express server with accompanying HTML and JS files. Despite multiple attempts, I can't get the JS file to properly load.

index.js:

const express = require("express");
const app = express(); 
const path = require("path");

app.set('view engine', 'ejs')

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

app.listen(3000, () => {
  console.log("Running on port 3000");
});

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Express App</title>
  </head>
  <body>
   Homepage
   <script src="login.js" type="text/javascript"></script>
  </body>
</html>

login.js:

function login () {
    return (
       <>
       <p>hi</p>
       </>
    )
};

Unfortunately, every attempt leads to an error message such as Cannot GET, 404, or others.

Answer №1

One suggested solution is to store index.html and index.js within the public directory.

By designating public as the static file serving directory, accessing the following URL will display the html file. Additionally, the browser will successfully load login.js since it is now located in the same folder.

hostname:port/index.html

Unfortunately, this js file is a react component which may cause the browser to fail during interpretation.

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

Sending information between children components in VueORTransferring data between

So, I have a question regarding the Authentication section of my application. Within my application, I have various components and routes, including register and login. The register functionality is working properly with the API, storing both the usernam ...

When traversing across different child elements, the MouseEvent.offsetX/Y values get reset to 0

Check out this interactive example. The demonstration includes a main div with 3 child divs. A click event is triggered on the main div, but instead of displaying alerts with the mouse position relative to the parent div as expected, it shows the position ...

An element generated using a JavaScript loop is covering another element in the layout

I am facing an issue with positioning images within a div to a span. The problem arises as the images are overlapping each other and I am uncertain about how to properly place each image when it is added. Below is the code snippet: The CSS: <style ty ...

What is the best way to develop a JavaScript function that divides the total width by the number of table headers (`th`)?

I recently came across this amazing scrollable table on a website, but I'm facing an issue with resizing the headers equally. Due to my lack of knowledge in JavaScript, I'm uncertain about how to tackle this problem. My intuition tells me that a ...

Unfulfilled Peer Dependency in react

Encountering javascript issues with react. Chrome error message when rendering page: Uncaught TypeError: Super expression must either be null or a function, not undefined at _inherits (application.js:16301) at application.js:16310 at Object.232.prop-types ...

Tips for eliminating the domain name from the src URL attribute using Jquery

Is there a way to extract the img src attribute and retrieve only the image path without the domain name included? var imgurl = "http://nitseditor.dev/img/home/bg.jpg"; For instance, I would like to display img/home/bg.jpg instead of the full URL. Any id ...

Mastering the art of scrolling and selecting items concurrently using the mouse in Vue

Struggling with a fascinating challenge of scrolling while selecting items using mouse drag in both up and down directions. Here's a screenshot for reference: https://i.stack.imgur.com/giMwY.png Check out my code: https://codesandbox.io/s/select-i ...

Cross-Site Scripting: Building a JavaScript object with the help of PHP's json_encode

Is this code 100% secure against XSS attacks? If not, could you provide an example of a malicious string that could make it vulnerable? <html> <body> <script> <?php $bad = "malicious string. Please provide exampl ...

Extension for Chrome that switches between active and inactive modes

I have been attempting to create an extension that can toggle the functionality of another specific extension on and off. Despite numerous attempts, I have not been able to find a solution that works effectively. Essentially, my extension displays a popup ...

developing a loading animation with progress indicator in CSS3

I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...

Verify information and send messages using JavaScript validation

I need assistance with my HTML form and JavaScript code. I am trying to send a parameter from the form to JavaScript in order to check if the input matches any values in an array. If there is a match, I want an alert message to be sent. However, the issue ...

Stop the form submission until validation is complete

I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...

Emphasizing the text while making edits to an item within the dhtmlx tree

Whenever I need the user to rename an item on the tree, I trigger the editor for them: tree.editItem(tree.getSelectedItemId()); However, I want the text in the editor to be automatically selected (highlighted). Currently, the cursor is placed at the end ...

Arranging sequence of jQuery functions

I have implemented a loop using jQuery that iterates through specific elements on an HTML page. During each iteration, I switch over a variable and add HTML code to particular locations. The issue arises when one of the appends requires importing another ...

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

Hiding icons in a jquery datatable's table

I am currently developing an inline editing feature, and I would like to display a green checkmark in a column cell to indicate that the record has been updated. However, I need to hide it initially. This is how it looks at the moment: https://i.sstatic. ...

Boosted - Automated Observable with controlled Update alert

Is there a way to create a ComputedObservable in knockout that is computed from non-observable values and manually trigger the Notification? ...

Transmit the image created with node-gd to the recipient

UPDATE: here is the solution that worked for me res.set('Content-Type', 'image/png'); res.end(data, 'binary'). I have been experimenting with generating images dynamically using node-gd in my node.js/express application. Th ...

Server initialization error in Node.js

I'm having trouble understanding the issue at hand: a) some users are able to start their server even with the missing module, so what is the error exactly? b) How can I go about fixing this? What I've attempted so far: rm -rf node_modules npm ...

Updating a div using PHP elements

Currently, I'm using a webcam to capture images for a project related to learning. My goal is to showcase the recently taken photos. After taking a photo, it gets stored in a folder. To display all the collected photos within a <div>, I need to ...