> For the complete documentation index, see [llms.txt](https://kinesis-school-of-programming.gitbook.io/nestjs-unleashed/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kinesis-school-of-programming.gitbook.io/nestjs-unleashed/extra-module-4-file-management/file-logic/serve-static.md).

# Serve static

Making the upload folder directly accessible.

In order for the frontend to access the images, the <mark style="color:purple;">upload</mark> folder needs to be readily accessible. No route 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 <mark style="color:purple;">upload</mark> folder.

First, we should install the following package from Nest.

```sh
yarn add @nestjs/serve-static
```

Then, let's create a module just to encapsulate the configuration of the <mark style="color:blue;">`ServeStaticModule`</mark>.

```sh
nest g mo static
```

Now here, we may configure it. Note the <mark style="color:blue;">`resolve()`</mark> in order to get an absolute path.

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

The <mark style="color:blue;">`rootPath`</mark> option defines that everything inside the <mark style="color:purple;">upload</mark> folder will be publicly accessible, simply by traversing its contents, like in a file explorer. The <mark style="color:blue;">`serveRoot`</mark> option defines how the <mark style="color:blue;">`rootPath`</mark> will be accessed. In this case, it will be through the <mark style="color:blue;">/files</mark> path.

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

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

<mark style="color:green;">**Commit**</mark> - Serve static to access images

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