Discover the files in the web directory using TypeScript

I am working on a TypeScript web application that has a specific folder structure. Here is how it looks:

- assets
 |- a.png
 |- b.png
 |- c.png
 |- d.png
 |- ...
- app.ts

My question is: In the app.ts file, how can I programmatically list all the files within the assets folder?

I attempted the code below, but unfortunately, it did not yield the results I was hoping for. Additionally, I realized that using fs to access the user's file system might not be the correct approach for my project.

const fs = require('fs');
const assets_folder = './assets/';
fs.readdirSync(assets_folder).forEach((file) => {
  console.log(file);
});

Answer №1

The problem arises from the file location issue that occurs when utilizing TypeScript and compiling it. After compilation, the files are moved to the dist/build directory which causes a lookup error.

Resolution: To resolve this issue, programmatically copy the files/directories from src to dist/build.

Project structure

src
  assets
    images
  app.ts

After compilation

dist
  //<Missing assets>
  app.js

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

What is the process for implementing a title search filter in Vue.js?

Hey there, hoping you're having a good night! I've been trying to set up a bookstore using Vue.js with code retrieved from a Json api. However, I'm encountering some issues with the "computed" property. Here's the code snippet: new Vue ...

What is the best way to choose the value immediately following or preceding the selected option in a dropdown list?

I am working with a dropdown menu that contains time slots in 30-minute increments, and I need to automatically select the next available option after the currently selected one. For example, if the current selection is 7:30 PM, I want the script to change ...

Issues with jQuery Ajax sending Post data to PHP script

I've been attempting to transfer variables from my JavaScript to a PHP file using AJAX, but for some reason, it's not functioning as expected. Despite researching numerous similar queries, I have yet to come across a solution. Here is an excerpt ...

What is the proper way to request confirmation before making updates or deletions to data?

my current situation is as follows: I am utilizing an el-table component to display data fetched from an API. I have organized this data into a computed property so that I can easily sort, filter, and paginate the table. Additionally, I have incorporated ...

What steps should I take to resolve this issue? ERROR TypeError: Unable to access property 'user' of null object

Is there a way to resolve the error I'm encountering in my project? The error message is: ERROR TypeError: null is not an object (evaluating 'userdata.user'). Using React Native Expo, I am facing this issue after logging into my app and navi ...

Tips and techniques for implementing push notifications in front-end applications without the need for a page refresh

I am working on a Python program that inserts data into a XAMPP database. I am looking for a way to continuously monitor the database for any changes and automatically send updates to the frontend without relying on click events. Is there a method simila ...

CSRF validation did not pass

I am currently working on a project in Django where I am trying to send an image file using XMLHttpRequest(). Below is the script I am using: $('#edit_user_image').change(function(){ var client = new XMLHttpRequest(); var file = document ...

Outputting double columns with Typescript Sequelize associations

I am currently in the process of constructing table models using sequelize along with typescript. Here is an example of one of my models: 'use strict'; import { Model, InferAttributes, InferCreationAttributes, CreationOptional } from 'seque ...

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

I have a VueJS-based app that features a multistep form with a next button. You can check out the functioning of the app here: My current challenge is ensuring that once the user clicks the next button, the top of the following question becomes visible. I ...

Enforcing automatic spell check on dynamically generated content

After some experimentation, I have discovered that the spell check feature in most browsers is only activated when the user moves to the next word after inputting text. Another interesting finding is that it is possible to "query" the spellchecker by simpl ...

Creating a worldwide directive using AngularJS

I'm currently working on implementing a directive that will manage user interaction with the navigation system on my website. The directive includes an element.click event listener in the link function, which is responsible for toggling the display of ...

What is the best method for creating table column text within a Bootstrap Modal through JSON data?

I am currently working on creating a table by using key value pairs from a JSON object. The keys will represent column-1 and the values will correspond to column-2. The desired output can be viewed at this link. I am wondering if there is a standard method ...

Using JavaScript to toggle the visibility of an HTML div element

I'm looking to enhance the functionality of this show/hide HTML div using JavaScript. HTML <a href="#" class="clickme">Menu 1</a> <div class="box"> <span><span class="labelText"><span></span>Number 1</ ...

Unable to access structuredClone on the global object within a Node.js application

structuredClone is causing issues in my NodeJS application. Whenever I try to utilize it, I encounter the error: structuredClone is not defined nodejs. To troubleshoot, I created a simple file and executed the following: console.log({ globals: Object. ...

Creating crawlable AMP versions of Angular websites

Having an Angular website where I dynamically load object properties, I am creating separate AMP sites for each of these objects. Typically, I would link to the AMP site from the canonical site. However, the issue arises because the crawler cannot find the ...

Creating a custom header in React for making AJAX requests

Need help setting header in Ajax Request using axios import React, { Component, PropTypes } from 'react' import { Link, browserHistory } from 'react-router' import { connect } from 'react-redux' import axios from 'axios& ...

What is the reason behind Jest v24 mocking classes that have a need for private methods

Currently, I am facing a challenge in creating mock implementations of my Typescript classes using Jest v24+. Specifically, I am trying to create a mock class that will be injected into a constructor and mock the functions to return specific responses. My ...

Checking to see if there are a minimum of two checkboxes selected before inputting the data into the database

I am currently using a combination of HTML, PHP, JavaScript, MySQL, and Wampserver. In my project, I have implemented 3 checkboxes where the user can choose a maximum of two options. Once selected, these choices are then inserted into the database. Initi ...

How can I display an array of data with a changing name using a FlatList in React Native?

How can I render a list of array data with a dynamic name in a FlatList using React Native? Below is the list of data that I would like to display in the FlatList: const movies = [ { '4W2JJ0CLbvfLJzBUHORVaz6sAGv2': [ { name: ...

Sending an array and an object simultaneously through a single ajax request

I previously inquired about passing an object to an ajax request for my rest service. Now I am wondering if it's possible to pass both an array and an object within a single ajax request. Any insights on this matter would be greatly valued. ...