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

Express.js struggles to manage the GET route

I am struggling to handle a GET request that is of type 'text/html'. app.js ... const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(express.json()); //I also tried ...

Which is the correct choice: sequelize model, migration file, or foreign key?

When I first delved into studying sequelize, I was completely lost. I found myself simply copying and pasting code when it came to establishing relationships between two models. I struggled to understand whether I needed to insert foreign keys in both the ...

Transferring session data through AJAX in PHP

I'm currently developing an app using PhoneGap. However, PhoneGap only supports HTML, CSS, and JS, not PHP. This led me to the workaround of placing the PHP file on a remote server and using AJAX to call it via the server's URL. My issue now is ...

Disregard any unnecessary lines when it comes to linting and formatting in VSC using EsLint and Prettier

some.JS.Code; //ignore this line from linting etc. ##Software will do some stuff here, but for JS it's an Error## hereGoesJs(); Is there a way to prevent a specific line from being considered during linting and formatting in Visual Studio Code? I h ...

Downsides of executing pure SQL queries in Strongloop Loopback can result in a decrease

Are there any drawbacks to running a native SQL query using either {dataSource.connector.execute(sql, params, cb) or dataSource.connector.query(sql, params, cb)} instead of connected models? I recently conducted a test with sample data using both Native S ...

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...

Unusual error notification encountered in Node.js

Recently, I've been encountering a plethora of odd error messages, and now my app.js won't even start. I'm puzzled by the following error message - does anyone have any insight or solutions? node.js:201 throw e; // process.nextTick ...

No data found in the request body despite using a body parser

My issue is that both req.body and req.query are empty, even though I am using body parser. I have searched for similar questions but none of the solutions seem to work for me. Here is the HTML form code: <form id="signup" action='/users/signup& ...

ui-scroll - unable to return to the start of the list

How can I achieve a scroll downwards and then return to the beginning of the list? I've searched for examples on how to implement ui-scroll back and forth, but none seem to fit my needs. Please assist. You can find the fiddle here: http://jsfiddl ...

Preventing users from retaking the quiz

As I work on developing a quiz for a website using Express, Passport, Handlebars, and Mongoose/MongoDB, I'm facing an issue with preventing users from taking the same quiz more than once. This particular quiz is designed to be taken only once, so once ...

The express route continuously circles in the browser

As I work on creating a basic server and testing a dummy route response, I encountered an issue where the page continuously spins in the Chrome browser without loading. index.js const express = require('express'); const bodyParser = require(&ap ...

Transform nested entities into a single entity where any properties that are objects inherit from their parent as prototypes

Exploring a new concept. Consider an object like: T = { a: 2, b: 9, c: { a: 3, d: 6, e: { f: 12 } } } The goal is to modify it so that every value that is an object becomes the same object, with the parent object as prototy ...

Display the information in the second dropdown menu once the selection has been made in the first dropdown menu

I've successfully implemented a feature where selecting an option from the first drop-down list populates the second drop-down list accordingly. The HTML code snippet is as follows: <select size="1" id="BodyPart" title="" name="BodyPart"> ...

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

Triggering a JavaScript function upon the alteration of a Dojo auto-complete widget's value

I'm encountering an issue with calling a javascript function when the value of a Dojo auto completer changes. Despite trying to call the function through the "onChange" attribute, it doesn't work as expected. Within the javascript function, my ...

The functionality of jQuery's appendTo method seems to be malfunctioning

I am trying to display an image with a popup using jQuery mobile. In my loop, I have the code below: for( var i = 0; i < imageArray.length; i++ ) { counter ++; // Create a new Image element var img = $('<img data-rel="popup" class=" ...

Using arrays in the request body with Node.js Express framework

Trying to include an array in the request body for a POST call to MongoDB, aiming to insert a new document upon success. See my current code snippet below: app.post(`/api/add`, async (req, res) => { collection.create({ 'id': req.body.id, ...

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

Setting initial values for an object in JavaScript

I am currently seeking a method to store predefined values in a separate file for populating my function: Here is my function in index.js: const Modes = (array) => { return { name: array.name, funcionarioIncrease: array.funcio ...

CF component not able to accept arguments when invoked by JavaScript through cfajaxproxy

Ever since updating to ColdFusion 2016 Update 4, I've been experiencing a new issue. Here's the code snippet: <input type='button' name='btn' value='Click me' onclick='proxyFunc();'> Incorporating ...