Let's create a React File Manager Chapter XV: Lets make server with typescript and express
Tags: express, typescript, mongez, javascript
Published: 2022-09-15 11:23:16

---
title: Let's create a React File Manager Chapter XV: Lets make server with typescript and express
published: true
description: 
series: File Manager React Mongez
tags: express, 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.
---

Today we're going to stop react for a little and create a quick simple [Express](https://expressjs.com/) server to serve our files.

The purpose of this is to serve our file manager only so we won't go deeper.

Express for those who are not familiar with it, is a simple Node.js framework that helps you create a server easily.

## Preparing our server

Let's create a new directory beside our react directory and name it `server` and rename our React js project to be `client` so we can easily distinguish between them.

## Installation

We're not going deeply into express installation, you can read the [official documentation](https://expressjs.com/en/starter/installing.html) for that.

Let's add the following packages

`yarn add @faker-js/faker @mongez/fs express`

Faker to generate our fake data and `@mongez/fs` to help us with our file system.

Now let's add dev dependencies.

`yarn add -D typescript ts-node tslib @types/express @types/node`

Typescript for of course to allow ts files, ts-node to run our ts files, tslib to help us with our typescript files and `@types/express` and `@types/node` to help us with our typescript files.

## Initializing Typescript

Simply run the following command.

`yarn tsc --init`

## Generating Directories and Files

We need to create two directories, `src` that will manage our server and generator and `data` to store files and directories inside it.

Let's create `src/generator.ts` file and add the following code:

```ts
import fs from "@mongez/fs";
import { faker } from "@faker-js/faker";

const dataDirectory = process.cwd() + "/data";
```

`process.cwd()` is the current working directory, which we can call it our `root` directory, so we're going to create our data directory inside it.

Here we simply imported our `@mongez/fs` package and `faker` to generate our fake data.

`dataDirectory` is the directory where we're going to store our files and directories.

```ts
import { faker } from "@faker-js/faker";
import fs from "@mongez/fs";

const dataDirectory = process.cwd() + "/data";

function start() {
  make(3, 3, dataDirectory);
}

start();
```

We created a function called `start` and called it at the end of the file.

Then we called another function called `make` and passed it 3 arguments, the first one is the number of directories we want to create, the second one is the number of files we want to create and the third one is the directory path that we need to create directories and files inside it.

```ts
import { faker } from "@faker-js/faker";
import fs from "@mongez/fs";

const dataDirectory = process.cwd() + "/data";

function start() {
  make(3, 3, dataDirectory);
}

start();

function makeFiles(maxFilesPerDirectory: number, path: string) {
  const filesList: string[] = [];

  while (filesList.length < maxFilesPerDirectory) {
    const file = faker.system.fileName();
    const filePath = path + "/" + file;
    if (!filesList.includes(filePath) && !fs.isFile(filePath)) {
      filesList.push(filePath);
      fs.put(filePath, faker.lorem.paragraphs());
    }
  }
}

function make(
  maxDirectories: number,
  maxFilesPerDirectory: number,
  path: string
) {
  const directoriesList: string[] = [];

  while (directoriesList.length < maxDirectories) {
    const directory = faker.system.directoryPath().split("/")[1];
    const directoryPath = path + "/" + directory;
    if (
      !directoriesList.includes(directoryPath) &&
      !fs.isDirectory(directoryPath)
    ) {
      directoriesList.push(directoryPath);
      fs.makeDirectory(directoryPath, 777);
      makeFiles(maxFilesPerDirectory, directoryPath);
      // 👇🏻  to make recursive directories and files, you'll need to stop the script after some time
      // 👇🏻  and run it again
      // 👉🏻  make(maxDirectories, maxFilesPerDirectory, directoryPath);
    }
  }
}
```

Here we created two functions, the first one is `makeFiles` and the second one is `make`.

`makeFiles` is responsible for creating files inside a directory, it takes two arguments, the first one is the number of files we want to create and the second one is the directory path that we need to create files inside it.

In `make` function we'll store the directories that we created in an array called `directoriesList` and we'll loop through it until we reach the number of directories we want to create.

Only directories that are really does not exist will count and stored in the `directoriesList` array.

Then we'll call `makeFiles` function to create files inside the directory.

After calling `makeFiles` i've added `make(maxDirectories, maxFilesPerDirectory, directoryPath);` and commented it.

This command will make recursive directories and files, but you'll need to stop the script after some time and run it again.

## Running The Generator

Open `package.json` file and add `scripts` object and add the following code:

```json
  "scripts": {
    "generate": "npx ts-node ./src/generator.ts",
    "start": "npx ts-node ./src/index.ts"
  },
```

We added `generate` script to run our generator and `start` script to run our server.

But we'll not use `start` script for now, we'll use it later.

Now let's run our generator.

`yarn generate`

After running and stopping the command multiple times, we'll have a directory called `data` that contains directories and files.

![Data directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qlyphqufyuegnwiut19.png)

## Initializing the server

Now let's make a simple server so we can send requests over it, create `src/index.ts` file and let's import `express`.

```ts
// src/index.ts
// imported express server
import express, { Express, Request, Response } from "express";

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

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

// define a route handler for the default home page
app.get("/", (req: Request, res: Response) => {
  res.send("Express + TypeScript Server");
});

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

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

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

// define a route handler for the default home page
app.get("/", (req: Request, res: Response) => {
  res.send("Welcome to File Manager");
});

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

The code is very simple, we created an express server and defined a route handler for the default home page which will display `Welcome to File Manager`.

Now let's run our server.

`yarn start`

You should see in the terminal `⚡️[server]: Server is running at http://localhost:${port}`

Now open the browser and navigate to `http://localhost:8001` and you should see `Welcome to File Manager` in the browser.

## In the next chapter

We'll create the following routes:

- GET `/file-manager` to get files and directories.
- POST `/file-manager` to create a new directory.
- DELETE `/file-manager` to delete a directory.
- PUT `/file-manager` to rename a directory.

## Article Repository

You can see chapter files in [Github Repository](https://github.com/hassanzohdy/file-manager-react/tree/15-lets-make-server-with-typescript-and-express)

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