# 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`,
        // ... statics options
      }
    ]
  }
})
export class Server {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
1
2
3
4
5

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`,
        // ... statics options
      }
    ]
  }
})
export class Server {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
1
2
3
4
5

# 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.

      Last Updated: 11/27/2020, 5:55:17 PM

      Other topics