# 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 {
}
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
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 {
}
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
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: 3/4/2021, 6:16:12 PM
Other topics
- Session & cookies
- Passport.js
- TypeORM
- Mongoose
- GraphQL
- Socket.io
- Swagger
- AJV
- Multer
- Serve static files
- Templating
- Throw HTTP Exceptions
- Customize 404
- AWS
- Seq
- OIDC
- Stripe
- Controllers
- Providers
- Model
- JsonMapper
- Middlewares
- Pipes
- Interceptors
- Authentication
- Hooks
- Exceptions
- Hooks
- Response Filter
- Injection scopes
- Custom providers
- Custom endpoint decorator
- Testing