Let's create a React File Manager Chapter XVIII: Link Api to React
Tags: react, typescript, mongez, javascript
Published: 2022-09-16 11:43:55

---
title: Let's create a React File Manager Chapter XVIII: Link Api to React
published: true
description: 
series: File Manager React Mongez
tags: react, typescript, mongez, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaxrogi0uf39gqllexjt.png
# Use a ratio of 100:42 for best results.
---

In our previous chapter we finished the list request, now let's implement it in our React project.

## Update Dot Env File

Open `.env` file in the root directory of your React project and update

```s
# Disable ESlint error
ESLINT_NO_DEV_ERRORS=true

# App Name
REACT_APP_NAME="file-manager"

# App Description
REACT_APP_DESCRIPTION=

# App Code Name
REACT_APP_CODE_NAME="fm"

# Branch Name
REACT_APP_BRANCH_NAME="main"

# App default locale code
REACT_APP_DEFAULT_LOCALE_CODE=en

# App Fallback locale code
REACT_APP_FALLBACK_LOCALE_CODE=en

# App default direction
REACT_APP_DEFAULT_DIRECTION=ltr

# App Primary Color
REACT_APP_PRIMARY_COLOR=#000

# App API URL
#  👇🏻 Put only the base url here
REACT_APP_API_URL=http://localhost:8001

# App API Key
REACT_APP_API_KEY=
```

> Please note that CRA does not reload the server on `.env` file changes, you need to restart the server manually.

Now let's start our react server and navigate to `file-manager-server.ts` file

```ts
// src/apps/front-office/file-manager/Kernel/file-manager-server.ts
👉🏻 import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string): Promise<any> {
    // 👇🏻 update the endpoint url
    // the params key will convert the request uri into query string
    // i.e /file-manager?path=/home
    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }
```

## The Bloody Cors

Now let's try it in our browser.

> Don't forget to run the server first in the backend `server` directory by running `yarn start`.

![Bloody Cors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsou8cr6tuamw4o2v8hv.png)

We won't get any thing because of the `bloody` CORS, let's fix it.

## Fix CORS

Let's install `cors` package and update it in our `src/index.ts` file

`yarn add cors`

Let's also add its types

`yarn add -D @types/cors`

Now let's import it in our index file `src/index.ts`

```ts
// imported express server
👉🏻 import cors from "cors";
import express, { Express } from "express";
import listRoutes from "./routes";

// port to run the server
const port = 8001;

// create express app
const app: Express = express();

// 👇🏻 allow cors
app.use(cors());

// list call our routes list
listRoutes(app);

// start the Express server
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});
```

Now let's try again, it should work now.

![Bloody Cors Fixed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4y3kcjkshgotbvg9buj.png)

## Small modification in progress bar

I really don't like that the progress bar is filled then return to zero value, so let's update the style and make its visibility hidden if progress value is zero.

```tsx
// LoadingProgressBar

  return (
    <Progress
      size="lg"
      value={progress}
      striped
      styles={{
        root: {            
          ❌ backgroundColor: progress === 0 ? "white" : undefined,
          ✅ visibility: progress === 0 ? "hidden" : undefined,
        },
      }}
      label={progress > 0 ? `${progress}%` : undefined}
      color={mapProgressColor()}
      animate
    />
  );
```

## Next Chapter

In the next chapter we'll start working in the toolbar so we can create some good actions, like adding `create directory` button.

## Article Repository

You can see chapter files in [Github Repository](https://github.com/hassanzohdy/file-manager-react/tree/18-link-api-to-react)

> Don't forget the `main` branch has the latest updated code.

## Tell me where you are now

If you're following up with me this series, tell me where are you now and what you're struggling with, i'll try to help you as much as i can.

Salam.