What is the best way to transfer my static files to the desired output directory in a TypeScript Express application?

I am attempting to transfer my static files from the input directory to the output directory using Express. I found guidance in this tutorial, which utilized shell.js for copying static files.

The code responsible for this operation is located in CopyAssets.ts:

import * as shell from "shelljs";

shell.cp( "-R", "src/views", "dist/" );

In addition, the script that triggers the command can be found in my package.json:

 "scripts": {
    "clean": "rimraf dist/*",
    "copy-assets": "ts-node tools/CopyAssets",
    "lint": "tslint -c tslint.json -p tsconfig.json --fix",
    "tsc": "tsc",
    "build": "npm-run-all clean lint tsc copy-assets",
    "dev:start": "npm-run-all build",
    "dev": "nodemon --watch src -e ts,hbs --exec npm run ",
    "start": "node .",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

Despite setting up an npm run dev command, my scripts are not being copied over. Any ideas why this might be happening?

typescriptexpress

Answer №1

While working in development mode, I recommend using ts-node. It allows you to run TypeScript code without the need for transpiling.

I personally utilize npx to execute locally installed dependencies.

Take a look at my package.json scripts below:

"scripts": {
    "clean": "npx rimraf ./build/ && npx rimraf ./log/",
    "prebuild": "npm run clean",
    "build": "npx tsc",
    "postbuild": "npx ts-node ./tools/build",
    "prod": "node ./app.js",
    "dev": "npx nodemon",
    "test": "npx jest --findRelatedTests"
}

To generate a build folder containing all your compiled .ts files and assets, simply type:

npm run build

!!! Utilizing the npm script flavor:

Before initiating the build process, npm executes prebuild, which carries out a cleanse operation.

After completing the build, npm triggers postbuild, responsible for copying all assets and files into the ./build directory.

Here is the snippet from build.ts that handles the copying of assets and files:

import shell from 'shelljs';

const buildFolder = './build/';

const files = new Set(['.env', 'LICENSE', 'README.md', 'package.json', 'package-lock.json']);
const folders = new Set(['./src/views', './src/public']);

// Copy Files
files.forEach((file) => {
  shell.cp('-R', file, buildFolder);
});

// Copy Folders
folders.forEach((folder) => {
  shell.cp('-R', folder, buildFolder);
});

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

Cross-Origin Resource Sharing problem within Nest JS

I am currently developing an application using Nest JS for the back-end and React for the front-end. In my main.ts file, I have configured CORS settings as follows: const whitelist = [ process.env.APP_WEBSITE_URL as string, process.env.APP_URL as stri ...

expresscorsnestjs

Angular 6's Select feature is failing to properly update user information

We are currently facing an issue with our user profile edit form. When users try to update their information by changing simple input fields, the changes are reflected successfully. However, when they make selections in dropdown menus, the values do not ge ...

angulartypescriptangular6

Encountering a CORS issue while attempting to forward from http://localhost:3000 to https://api.twitter.com in a Next.js application with next-connect

Trying to implement redirect functionality, but encountering a persistent error in the console: The CORS policy is blocking access to fetch at 'https://api.twitter.com/oauth/authenticate?oauth_token=' (redirected from 'http://localhost:300 ...

node.jsexpressnext.jscorsnext-connect

When a TypeScript merged declaration composition is used with an extended target class, it fails to work properly

I have a TypeScript problem where I need to combine a class that has been extended with a few others. While searching for solutions, I came across an article outlining a pattern that I thought could be helpful: https://www.typescriptlang.org/docs/handbook ...

node.jstypescriptmixinscompositiones6-class

Tips for Invoking an Overloaded Function within a Generic Environment

Imagine having two interfaces that share some fields and another interface that serves as a superclass: interface IFirst { common: "A" | "B"; private_0: string; } interface ISecond { common: "C" | "D"; private_1: string; } interface ICommo ...

typescripttypescript-generics

Reactive Programming: Transforming an earlier value as it moves down the pipeline

In a recent project, I encountered an interesting scenario involving the execution of multiple requests in a pipe chain. This specific case revolves around the display of images within the quill text editor. The backend returns the content in the followin ...

angulartypescriptrxjsangular-pipeswitchmap

Exploring the MEAN stack: Is there a distinction between housing my views in the public directory versus the server views directory?

During frontend development, I typically store all my HTML files in the public/app/views directory. However, I've observed that some developers also have a separate views folder for server-side files, such as .ejs files. Is this practice primarily to ...

angularjsnode.jsexpressmean-stack

Decomposing Node database queries

Everyday, I find myself working on a typical Node express www page with session management, pug templating, and other usual features. My database calls are handled by a script called myHappyMysqlScript var db = require('./scripts/myHappyMysqlScript&ap ...

mysqlnode.jsexpressnested

Is it possible to continuously re-render a React Functional Component with Axios and useState/useEffect?

Seeking assistance with creating a React Functional Component using Typescript to fetch data from an API and pass it to another component. However, encountering the error message "Error: Too many re-renders. React limits the number of renders to prevent an ...

javascriptreactjstypescriptuse-effectuse-state

Ways to identify modifications from a BehaviorSubject and automatically trigger a response according to the updated value

I am currently implementing a BehaviorSubject for managing languages in my Angular project. I am also utilizing Angular Datatables and trying to dynamically change the language displayed in the data table based on the value returned from the subscription. ...

angulartypescriptrxjsangular-datatablesbehaviorsubject

Creating a type declaration for an object by merging an Array of objects using Typescript

I am facing a challenge with merging objects in an array. Here is an example of what I am working with: const objectArray = { defaults: { size: { foo: 12, bar: { default: 12, active: 12 } }, color: {} } } ...

typescripttypesmapped-types

Issue with clob formatting in an Express app causing printing errors

I'm facing a challenge with extracting and printing out a CLOB column from a table in my database using the oracledb driver in my express app. Below is the code snippet that I have implemented: router.get('/:task_name', function (req,res) { ...

node.jsexpressoracle11gnode-oracledb

What is the reason behind the lack of exported interfaces in the redux-form typings?

I've been exploring how to create custom input fields for redux-form. My journey began by examining the Material UI example found in the documentation here. const renderTextField = ({input, label, meta: { touched, error }, ...custom }) => < ...

typescriptredux-form

What is the best way to maintain a socket.io ID while navigating through dynamic HTML files?

Utilizing express and node for server hosting, socket io is employed to track users by saving their unique socket.id. There are two pages in the webapp - a login page and a content page. app.get("/", function(req, res) { res.sendFile(__dirname + "/log ...

htmlnode.jsexpresssocket.io

Sending various data from dialog box in Angular 8

I have implemented a Material Design dialog using Angular. The initial example had only one field connected to a single parameter in the parent view. I am now trying to create a more complex dialog that collects multiple parameters and sends them back to t ...

javascriptangulartypescriptangular-material

Sequelize table does not have an associated BelongToMany relationship

I have been working on linking 2 tables together through a new table that I created in mySql. This is to retrieve necessary data from an API. The tables I am trying to connect with the new one are 'user' and 'country'. A user can visit ...

mysqlnode.jsapiexpresssequelize.js

Centering on request, Google Maps adjusts its view to focus on

When I select a row, I want to set the map center to the provided coordinates in Primeng. The issue is that while this.options works fine in ngOnInit, it doesn't work when called in the showCords() function. Below is my code: gmap.component.ts im ...

angulartypescriptgoogle-mapsprimeng

Is it necessary to sanitize input fields manually in Angular 6?

Is it necessary for me to manually sanitize all user inputs, or does Angular handle this process automatically? In my login form, the data is sent to the server upon submission. Do I need to explicitly sanitize the data, or does Angular take care of sanit ...

javascriptangulartypescriptangular6sanitization

Utilizing express.js alongside the native MongoDB driver: A comprehensive guide

I'm facing difficulties when attempting a simple mongoDB query from my express app: app.js var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = re ...

javascriptmongodbexpress

How to show specific images by clicking on particular items in Ionic 3 on a separate page

Can someone assist me with displaying specific images from a slider gallery? I am struggling to figure out how to show only the January edition when clicking on it in eighteen.html, while hiding the February and March editions. It has been 2 days of unsucc ...

htmltypescriptionic-framework