Serve files

To serve static files such as images, CSS files, and JavaScript files, Ts.ED uses express.static and koa-send for Express and Koa respectively.

Configuration

Ts.ED allows you to configure several directories to be exposed to your consumer.

So for each endpoint, specify a root path to expose files under this root directory:

import {Configuration} from "@tsed/common";
const rootDir = __dirname;

@Configuration({
  statics: {
    "/": [
      {
        root: `${rootDir}/public`,
        // Optional
        hook: "$beforeRoutesInit" // Load statics on the expected hook. Default: $afterRoutesInit 
        // ... statics options
      }
    ]
  }
})
export class Server {
}

Now, you can load the files that are in the public directory:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by Ts.ED, specify a mount path for the static directory, as shown below:

import {Configuration} from "@tsed/common";
const rootDir = __dirname;

@Configuration({
  statics: {
    "/statics": [
      {
        root: `${rootDir}/public`, 
        // Optional
        hook: "$beforeRoutesInit" // Load statics on the expected hook. Default: $afterRoutesInit 
        // ... statics options
      }
    ]
  }
})
export class Server {
}

Now, you can load the files that are in the public directory from the /statics path prefix.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

Load statics before controllers v6.74.0+

Since v6.74.0, it's possible to load statics before controllers instead of loading statics after controllers.

Just use the options hook to change the default behavior:

@Configuration({
  statics: {
    "/before": [
      {
        root: `${rootDir}/public`, 
        hook: "$beforeRoutesInit"
        // ... statics options
      }
    ],
    "/after": [
      {
        root: `${rootDir}/public`, 
        hook: "$afterRoutesInit"
        // ... statics options
      }
    ]
  }
})

Statics options

Statics options depend on which platform you work (Express, Koa, etc...).

Expose a webapp

Exposing a webapp (React, Vue.js, Angular) with Ts.ED is quite possible. The configuration can be a bit complicated because you have to add the right headers and redirection rule so that all queries are redirected to your webapp when the urls are managed by your front-end application.

Here is a small example to configure statics directory with the right headers and redirection rules.