Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/erda-project/erda-ui
- Owner: erda-project
- License: agpl-3.0
- Created: 2021-03-05T02:59:14.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-04T08:40:47.000Z (3 months ago)
- Last Synced: 2025-01-15T05:59:05.479Z (12 days ago)
- Topics: cube-state, erda, erda-platform, erda-ui, module-federation, paas-frontend, react, typescript, ui
- Language: TypeScript
- Homepage:
- Size: 30.1 MB
- Stars: 74
- Watchers: 14
- Forks: 64
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend UI for Erda platform.
[![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 platformFor a detailed introduction, please check the [official website](https://www.erda.cloud).
## 🖥 Environment Support
Modern browsers
| [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](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 & tailwindThis 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):
- 钉钉用户群(Dingtalk):
## License
Erda ui is under the AGPL 3.0 license. See the [LICENSE](/LICENSE) file for details.