80 lines
1.9 KiB
Markdown
80 lines
1.9 KiB
Markdown
# Simply CPQ Buildtime Client
|
|
Dieser Ordner enthält alle relevanten Dateien und Informationen zum Simply CPQ Buildtime Client. Dieser dient der Pflege von Produktdaten, Regeln, Konditionen und Administration der Simply CPQ Anwendung.
|
|
|
|
## Genutzte Techologie
|
|
Der Client ist eine Web-Applikation, die auf der React-Library aufgebaut ist.
|
|
[React](https://react.dev/)
|
|
|
|
### Zusätzliche Open Source Bibliotheken:
|
|
|
|
#### Umgebung
|
|
Für die Entwicklung wird die Software Node.JS benötigt, hier zu finden:
|
|
https://nodejs.org/
|
|
|
|
Mit
|
|
```bash
|
|
npm create vite@latest logical-editor --template react
|
|
```
|
|
kann dann die Umgebung erzeugt werden.
|
|
|
|
Mit
|
|
```bash
|
|
npm run dev
|
|
```
|
|
kann die Entwicklungsumgebung gestartet werden.
|
|
|
|
Folgende Komponenten müssen noch installiert werden:
|
|
##### React Router
|
|
```bash
|
|
npm install react-router
|
|
```
|
|
|
|
#### Tree View Komponente (react-arborist)
|
|
Diese Komponente wird zur Anzeige von Bäumen auf der Oberfläche genutzt. Hier zu finden:
|
|
[jameskerr/react-arborist: The complete tree view component for React](https://github.com/jameskerr/react-arborist)
|
|
|
|
Zur Installation im Root-Verzeichnis des Client-Quellcodes
|
|
```bash
|
|
npm install react-arborist
|
|
```
|
|
aufrufen.
|
|
|
|
#### Icon-Library:
|
|
HeroIcon Lib mit der MIT Lizenz ([tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.](https://github.com/tailwindlabs/heroicons)
|
|
).
|
|
|
|
```bash
|
|
npm install @heroicons/react
|
|
```
|
|
|
|
#### CSS Helper Tailwind CSS
|
|
Zur schnellen Erstellung von Layout: [tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development.](https://github.com/tailwindlabs/tailwindcss)
|
|
|
|
```bash
|
|
npm install tailwindcss @tailwindcss/vite
|
|
```
|
|
Dann die Datei vite.config.ts editieren
|
|
|
|
```javascript
|
|
|
|
edit vite.config.ts
|
|
|
|
import { defineConfig } from 'vite'
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
tailwindcss(),
|
|
],
|
|
})
|
|
|
|
```
|
|
In der Scriptdatei:
|
|
```javascript
|
|
@import "tailwindcss";
|
|
```
|
|
|
|
Dokumentation :
|
|
|
|
|