Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/erda-project/erda-ui

Erda's frontend console UI, build with React, Typescript, webpack and vite.
https://github.com/erda-project/erda-ui

cube-state erda erda-platform erda-ui module-federation paas-frontend react typescript ui

Last synced: 5 days ago
JSON representation

Erda's frontend console UI, build with React, Typescript, webpack and vite.

Awesome Lists containing this project

README

        

# Frontend UI for Erda platform.


logo

[![codecov](https://codecov.io/gh/erda-project/erda-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/erda-project/erda-ui)
![ts](https://badgen.net/badge/-/TypeScript/blue?icon=typescript&label)
[![release](https://img.shields.io/github/release/erda-project/erda/all.svg)](https://github.com/erda-project/erda/releases)

## 📣 Introduction

Erda is an open-source platform created by [Terminus](https://www.terminus.io/) to ensure the development of microservice applications. It provides DevOps, microservice governance, and multi-cloud management capabilities. The multi-cloud architecture based on Kubernetes and application-centric DevOps and microservice governance can make the development, operation, monitoring, and problem diagnosis of complex business applications simpler and more efficient.

For Technology stack and development process, please see [here](./docs/introduction_en.md).

## ✨ Platforms

- DevOps platform
- Microservice Governance platform
- Multi-Cloud Management platform
- Edge computing platform
- Fast-Data platform

For a detailed introduction, please check the [official website](https://www.erda.cloud).

## 🖥 Environment Support

Modern browsers

| [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Edge](http://godban.github.io/browsers-support-badges/)
Edge |
| --- | --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |

## 🚀 Quick Start

### Usage

Welcome to use [Erda Cloud](https://erda.cloud)

## Installation

Please use the following installation documents to install Erda.

- English(Coming soon)
- [简体中文](https://docs.erda.cloud/latest/manual/install/helm-install/introduction.html)

### Run Erda-UI project

> This repository contains many Node.JS packages. Each package has its own set of commands, but the most common commands are available from the root `package.json` and can be accessed using the `npm run ...` command. Just follow the four steps below to start.

```bash
# Step1 Install erda-ui cli to global
npm i @erda-ui/cli -g

# Step2 Initialize the project of erda-ui
# Run the following command in the root directory of erda-ui
erda-ui init

# What does this command do?
# Generate initial config to the .env file. After successful running, the .env configuration file will be generated in the root directory of erda-ui.

# Step3 Start App
# Run the following command in the directory of shell
pnpm start

# What does this command do?
# Start the dev server, redirect /static/{module}/* to the corresponding module folder in public folder based on the .env file, and redirect /api/* to api server.
```

## [Architecture](./docs/introduction_en.md#Architecture)

Technology stack:

- UI library: Ant Design
- state management: cube-state
- i18n: i18next
- bundler: webpack(production) & vite(development)
- style: sass & tailwind

This project contain the following parts:

- cli: command line interface for erda-ui, help to quick setup develop environment and pack files to docker images.
- core: provide registration framework and core functions such as initialize cube-state and i18n etc.
- shell: provide layout, user and common components for business modules.
- scheduler: support module federation style development, register and navigate to multiple modules.
- modules: business modules, each of these can develop and publish standalone.

![architecture](./docs/files/architecture.jpg)


architecture of development mode

## 🔗 Links

- [Erda Cloud](https://erda.cloud)
- [Official Website](https://www.erda.cloud)
- [User Docs](https://docs.erda.cloud)
- [Erda backend project](https://github.com/erda-project/erda)

## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/erda-project/erda-ui/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/erda-project/erda-ui/pulls) or as [GitHub issues](https://github.com/erda-project/erda-ui/issues?template=bug-template). If you'd like to improve code, check out the [Development Instructions](https://github.com/erda-project/erda-ui/wiki/Development) and have a good time! :)

## Contact Us

If you have any questions, please feel free to contact us.

- Email: [email protected]
- Twitter: [@ErdaProject](https://twitter.com/ErdaProject)
- 知乎:[Erda 技术团队](https://www.zhihu.com/people/erda-project) (A Chinese knowledge community, similar to Quora.)
- 微信公众号(Wechat):


Wechat

- 钉钉用户群(Dingtalk):


Dingtalk

## License

Erda ui is under the AGPL 3.0 license. See the [LICENSE](/LICENSE) file for details.