---
title: Lệnh Frontend
image: /images/user-guide/create-workspace/workspace-cover.png
---

<Frame>
  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
</Frame>

## Lệnh hữu ích

### Khởi động ứng dụng

```bash
npx nx start twenty-front
```

### Tạo lại lược đồ graphql dựa trên lược đồ API graphql

```bash
npx nx run twenty-front:graphql:generate --configuration=metadata
```

HOẶC

```bash
npx nx run twenty-front:graphql:generate
```

### Kiểm tra mã

```bash
npx nx run twenty-front:lint # pass --fix to fix lint errors
```

## Dịch thuật

```bash
npx nx run twenty-front:lingui:extract
npx nx run twenty-front:lingui:compile
```

### Kiểm tra

```bash
npx nx run twenty-front:test # run jest tests
npx nx run twenty-front:storybook:serve:dev # run storybook
npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve:dev to be running)
npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)
```

## Ngăn xếp Công nghệ

Dự án có ngăn xếp gọn gàng và đơn giản, với mã mẫu tối thiểu.

**Ứng dụng**

- [React](https://react.dev/)
- [Apollo](https://www.apollographql.com/docs/)
- [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
- [TypeScript](https://www.typescriptlang.org/)

**Kiểm tra**

- [Jest](https://jestjs.io/)
- [Storybook](https://storybook.js.org/)

**Công cụ**

- [Yarn](https://yarnpkg.com/)
- [Craco](https://craco.js.org/docs/)
- [ESLint](https://eslint.org/)

## Kiến trúc

### Điều hướng

[React Router](https://reactrouter.com/) xử lý điều hướng.

Để tránh các [tái tạo không cần thiết](/l/vi/developers/frontend-development/best-practices-front#managing-re-renders), tất cả logic điều hướng nằm trong `useEffect` trong `PageChangeEffect`.

### Quản lý Trạng thái

[Recoil](https://recoiljs.org/docs/introduction/core-concepts) xử lý quản lý trạng thái.

Xem [thực hành tốt nhất](/l/vi/developers/frontend-development/best-practices-front#state-management) để biết thêm thông tin về quản lý trạng thái.

## Kiểm tra

[Jest](https://jestjs.io/) phục vụ như công cụ cho kiểm tra đơn vị trong khi [Storybook](https://storybook.js.org/) là cho kiểm tra thành phần.

Jest chủ yếu dành cho kiểm tra hàm tiện ích, không phải là các thành phần.

Storybook dành cho kiểm tra hành vi của các thành phần cô lập, cũng như hiển thị hệ thống thiết kế.