Loading JavaScript and CSS files in an EJS file using Node.js

Here is the structure of my folder: server.js app --routes.js views --ace-builds-master --\src-noconflict --ace.js --index.ejs

The 'views' directory contains my ace editor components and my index.ejs file. I am trying to include ace.js in my index.ejs file. Should I create a route in my express routes like this:

app.get('/ace', function (req, res) {
  res.sendFile('\ace-builds-master\src-noconflict\ace.js');
});

And should I reference it in my ejs file like this:

<script src="/ace" type="text/javascript" charset="utf-8"> </script>

When I load it in the browser, I get a "GET http://localhost:8080/ace" error message.

Answer №1

In Ejs, the view file is rendered and can access your static folder. You can designate your ace folder as a static folder so it will be loaded when the view loads.

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// Load static files
app.use(express.static(path.join(__dirname, 'ace')));

Answer №2

simply replace

<script src="../editor" type="text/javascript" charset="utf-8"> </script>

with

<script src="/editor" type="text/javascript" charset="utf-8"> </script>

because the server creates a virtual folder inside the public directory when loading ejs, so going back one step is all you need to do.

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

A guide on creating a loop with JSON data in PHP using AJAX

Within my PHP script foreach ($qry_1 as $v) { $subcat = array('title' => $v['title'], 'cat_id' => $v['cat_id']); echo json_encode($subcat); } Inside my jQuery script $.ajax({ type: 'POST&a ...

multer.single does not save the input file to the req

I have a form with a file input where users need to upload an image. I am currently using Multer to handle the file uploads, but it doesn't seem to be working as expected. Here is my current Multer configuration: const multerStorage = multer.memorySto ...

Node.js is causing issues with the functionality of Bootstrap carousel controls

I'm currently working on a sailing website, and I've run into an issue with the left and right controls and indicators in the testimonials section. They don't seem to be responding properly. Could this be due to me not including or calling t ...

My webpage is displaying the background image, but it is appearing behind all the other elements on the page

I've run into an issue where my background is showing up, but it's appearing behind my divs instead of alongside the content as I want. I can't seem to get it to work properly. I believe this part of my CSS code is causing the problem: body ...

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

Secure your URL with password protection

I have a website that requires restricted access upon entry. Prior to loading the page, users must enter three fields: username, password (belonging to the client), and a specific password unique to that particular page. These credentials are stored in a d ...

Ng-outlet is unable to retrieve data from the parent $scope

When using Angular's standard route, I found that child controllers were able to access the parent $scope like this: <div ng-controller="ParentCtrl"> <ng-view></ng-view> </div> However, when switching to the Angular 1.5 C ...

Exploring the art of reading and writing to a file with JavaScript and NodeJS

I am currently working on creating a function that will scan a file and remove all content below a specific line before adding new lines to the file. So far, I have successfully read the file and identified the target line: function analyze() { lineRe ...

Using Symbol.iterator in Typescript: A step-by-step guide

I have decided to upgrade my old React JavaScript app to React Typescript. While trying to reuse some code that worked perfectly fine in the old app, I encountered errors in TS - this is also my first time using TS. The data type I am exporting is as foll ...

I'm having trouble with installing nx as it keeps showing the error message 'Platform Dependency for NX is Missing.'

I encountered an issue when running npm install: $ npm i npm WARN deprecated @babel/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5b475e4c4245065b59445b44584a470648474a5858065b59445b4e595f424e586b1c051a13051d">[email  ...

Unable to successfully create a dynamic anchor tag and open it in a new tab

I am receiving a PDF link in an AJAX response and I would like to manually trigger the download. Here is the code that I am currently using: var fileLink = document.createElement('a'); fileLink.href = responseData.PDF_LINK; fileLink.setAttribute ...

Large size causing alignment issues with Bootstrap Tooltip位置混乱

I've encountered an issue with the bootstrap tooltip while using fullcalendar.js. The problem isn't with the fullcalendar library itself, as I included it just to provide context. You can view the problem on this JSfiddle link. The tooltip keeps ...

struggling with implementing MongoDB 2.4 text search

Upon starting mongo db, the following message is displayed: $ ./mongo db MongoDB shell version: 2.4.2 connecting to: db Server has startup warnings: ** WARNING: soft rlimits too low. Number of files is 256, should be at least 1000 Mon Apr 22 19:25:54.938 ...

What is the process for configuring my CSS and JS files to send HTTP response headers?

During our security evaluation of a web application built in Laravel 4, we discovered that the Anti-MIME-Sniffing header X-Content-Type-Options was not properly configured to 'nosniff'. The following PHP code snippet sets the necessary HTTP heade ...

Update Jquery Dialog's Button After Making an Ajax Request

I am facing an issue with my dialog window that contains some confirmation elements following a form submission: $('#newUserDialog').dialog({ autoOpen: false, width: 600, modal: true, resizable: false, cl ...

Exploring Angular $resource with a playful twist

Is there a recommended method for mocking the $resource object? I've looked online, but all my attempts ended with KARMA testing. It's not what I'm looking for. I'm thinking of creating a fake object so that I can easily switch betwee ...

Is there a way to hide the tooltip displaying the most recent dates in Bootstrap?

After implementing a datepicker with bootstrap, I noticed that whenever I click on the field, it displays the last years I have selected. This behavior obstructs the calendar view and serves no real purpose. Below is an excerpt of my current script along ...

Tips for transferring and incorporating custom helper functions in JS/React

Task at Hand: Instead of constantly typing console, I want to import some shorthand. For example-- log('hi') should be the same as console.log('hi') Attempted Solution: This is what I have so far. I want to use shortcuts like l ...

When the MATERIAL UI MENU ITEM is clicked, an action is triggered automatically upon loading the

I added an onClick event listener to a Menu Item in material UI, MUI. Upon loading the page, the onclick function triggers automatically. How can I resolve this issue? const [anchorEl, setAnchorEl] = useState(null) const open = Boolean(anchorEl) const ...

Adjust the spacing between the inputRoot and input in Material UI Autocomplete

Recently, in one of my projects, I've been utilizing Material-UI's Autocomplete component. Despite its lack of flexibility with resizing, I managed to tweak certain width, height, and font size attributes successfully. However, I'm currently ...