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

Question

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?

typescript express

Answer 1

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);
});

Answer 2

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);
});

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

Answer №1

Similar questions

The function app.address is not supported in Node.js Express ES6

Cross-origin resource sharing problems: The 'Access-Control-Allow-Origin' header should not include more than one value

Trying to determine the specific key of an object based on its value in TypeScript?

Upon transitioning from typescript to javascript

Receiving encoded characters in the response

Ways to speed up the initial loading time in Angular 7 while utilizing custom font files

Error: Authorization requires both data and salt arguments

Navigate to the appropriate directory specified in the package.json file

Understanding Multiple Type Scenarios in React with Typescript

The Google Books API has reached its limit for requests

Setting up SSL/TLS certificates with Axios and Nest JS

The Express request parameter ID throws an error due to the index expression not being of type 'number', causing the element to implicitly have an 'any' type

"Exploring the process of extracting data from a JSON URL using NextJS, TypeScript, and presenting the

Tips for extracting data from an Angular object using the *ngFor directive

I am unable to access the environment variables on my ECS task

Creating a sidebar in Jupyter Lab for enhanced development features

Configuration of injected services in IONIC 2

The middleware in node.js passport is preventing successful logouts from occurring

Tips for developing a strongly-typed generic function that works seamlessly with redux slices and their corresponding actions

Using Angular: Binding Angular variables to HTML for display