Serve static

Making the upload folder directly accessible.

In order for the Frontend to access the images, the upload folder needs to be readily accessible. No routes will be used to access the files, but simply the path to them, like in a file system. This can be achieved by serving static content inside the upload folder.

First, we should install the following package from Nest.

yarn add @nestjs/serve-static

Then, let's create a module just to encapsulate the configuration of the ServeStaticModule.

nest g mo static

Now here, we may configure it. Note the resolve() in order to get an absolute path.

ServeStaticModule.forRoot({
  rootPath: resolve(BASE_PATH),
  serveRoot: '/files',
}),

The rootPath option defines that everything inside the upload folder will be publicly accessible, simply by traversing its contents, like in a file explorer. The serveRoot option defines how the rootPath will be accessed, in this case it will be with the /files path (instead of /upload).

We may then see an image if we access, for instance:

localhost:3000/files/products/1/images/photo.jpg

With this, the main content of this module is concluded. We'll now see further improvements.

Commit - Serve static to access images