Is there a way to present both Javascript and templates from parallel directories using express?

QUERY:

Is there a way to modify the server.js file so that the three.js script in index.html does not display an error message like

Cannot GET /node_modules/three/three.js
?

Code Snippet: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Title</title>
</head>
<body>
    <h1>Hello friends!</h1>
    <script src="../node_modules/three/three.js"></script>
</body>
</html>

JS Code: server.js

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

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

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

app.listen(3000, () => {
  console.log('VTEC JUST KICKED IN Y0');
});

Directory Structure:

https://i.stack.imgur.com/avbRm.png

Package.json Configuration:

{
  "name": "Morningharwood",
  "version": "1.0.0",
  "description": "",
  "main": "server/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/server.js",
    "dev": "nodemon server/server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/matthewharwood/MorningHarwood.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/matthewharwood/MorningHarwood/issues"
  },
  "homepage": "https://github.com/matthewharwood/MorningHarwood#readme",
  "dependencies": {
    "express": "^4.13.4",
    "jade": "^1.11.0",
    "three": "^0.73.2"
  },
  "devDependencies": {
    "nodemon": "^1.8.1"
  }
}

Answer №1

app.js

Insert the following code right after the line that initializes static content:

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


main.html

Replace

<script src="../vendors/threejs/three.min.js"></script>

with

<script src="/vendors/threejs/three.min.js"></script>

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

The toISOString() method is deducting a day from the specified value

One date format in question is as follows: Tue Oct 20 2020 00:00:00 GMT+0100 (Central European Standard Time) After using the method myValue.toISOString();, the resulting date is: 2020-10-19T23:00:00.000Z This output shows a subtraction of one day from ...

I encountered a console issue that I am struggling with. It is showing the error message "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'"

When running this code, I encountered an error in the console (TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'). Can someone help me identify where I made a mistake and provide guidance ...

The Implementation of Comet Programming

I'm interested in creating a web application similar to Google Docs where multiple users can edit and view changes in real-time. Would Comet Programming be the best approach for this? As a newcomer to Web Development, I'm currently learning Java ...

RxJS - Only emit if another source does not emit within a specified time frame

Imagine having two observables. Whenever the first one emits, there should be a 2-second pause to check if the other observable emits something within that timeframe. If it does, then no emission should occur. However, if it doesn't emit anything, the ...

Retrieving the value of a radio button using jQuery and Ajax

Looking for assistance with radio buttons... <input type="radio" id="flip" name="flip" value="Head" checked="checked" /> Head <input type="radio" id="flip" name="flip" value="Tail" /> Tail I'm attempting to process a form with ajax, try ...

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

iterating over a large multidimensional array in JavaScript

I am facing a challenge with handling a large JSON dataset (around 20k+ entries, totaling over 2mb) that I need to display on my web pages. Currently, I fetch this data using AJAX and parse it using JSON.parse in JavaScript, resulting in a complex multidi ...

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?

.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...

What is the method used by React or Next to prevent the <a> tag from refreshing the page while still loading content?

I'm currently diving into the world of NextJS and utilizing the Link component from the 'next/link' package. One thing that has been puzzling me is how the <Link> component ultimately renders an <a> tag with a href='/tosomew ...

Guide to running repetitive lengthy tasks in the background of a Node.js web server

Currently, I am in the process of developing a node.js web server using express.js that is designed to provide users with a dashboard for monitoring database servers. The overall structure of the system is rather straightforward: A gatherer is responsibl ...

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

"Sending an array in a POST request using Javascript and processing it on the server

I am trying to use ajax to send an array. Let's say the array looks like this: var anotherOne = 'anotherOneData'; var documents = ['banana', 'apple', 'monkey']; I successfully sent both a normal value and an a ...

Using jQuery UI datepicker - how to set a parameter based on a specific condition

New to the world of JavaScript, I am trying my hand at implementing the jQuery UI datepicker widget. My goal is to add an additional line to the widget parameters if the variable selectedDate has a value. However, my current approach seems to be ineffecti ...

Mastering MongoDB: The Art of Inserting Intricate Schemas

Currently, I am in the process of developing a "Test" system where each test consists of multiple questions with corresponding answers. To create the questions, I am receiving a JSON format from another server as follows: { requestType: 'Create ...

Tips for effectively using the JQuery animate function

Displayed below is my implementation of the jQuery animate method abstraction that works well. However, a challenge arises when trying to replace the hard-coded DOM element class in the function ani(){} with the 'this' keyword for versatility acr ...

Error encountered: CORS restriction preventing access when attempting to connect from local network

I am currently developing a web application where the backend retrieves data from a MongoDB and then the frontend displays it. Here is a simplified outline of the setup: Backend (ExpressJs) const app = express(); const port = process.env.PORT || 3001; a ...

Module TypeScript could not be located

Currently, I am in the process of converting my nodejs project from JavaScript to TypeScript. I have updated the file extensions from .js to .ts, but now I am encountering errors with require(). In an attempt to fix this issue, I have added the following c ...

Using Sinon with Ember to create a Mock Server

I am looking to test my controller by making an ajax call to my backend using Jasmine and Sinon. To fake my backend server with Sinon, I attempted the following approach: describe("fake server", function() { var server; beforeEach(function() { this ...

What is the best way to determine if a Google Apps user is not an administrator?

We have developed an app for Google Apps and incorporated the "Integrate with Google" button [https://developers.google.com/apps-marketplace/button]. One issue we're facing is that when a user clicks on this button, they must be an administrator. Howe ...

Fetching data from a server using React's axios library

I've been working on a personal project and ran into an issue. I'm trying to fetch all the car data from my database using Reactjs and Axios. While I can see all the data in the console, my page remains blank. It's worth mentioning that I&ap ...