Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pimcore/studio-ui-bundle
Studio UI bundle
https://github.com/pimcore/studio-ui-bundle
Last synced: 2 months ago
JSON representation
Studio UI bundle
- Host: GitHub
- URL: https://github.com/pimcore/studio-ui-bundle
- Owner: pimcore
- License: other
- Created: 2024-01-17T12:09:28.000Z (10 months ago)
- Default Branch: 1.x
- Last Pushed: 2024-05-22T07:11:45.000Z (6 months ago)
- Last Synced: 2024-05-22T10:43:49.258Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 10.6 MB
- Stars: 5
- Watchers: 9
- Forks: 1
- Open Issues: 126
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Studio Ui
The Studio UI Bundle provides a Backend UI for Pimcore. It is based on the [React](https://react.dev/) framework.
## How to install
- [Installation](./doc/01_Installation.md)
## How to open
- Login via the classic backend UI
- Access it under `{your-domain}/pimcore-studio`
#### Run the UI under a different URL
To change the URL you can add the following configuration:
´´´yaml
pimcore_studio_ui:
url_path: '/my-backend'
´´´
Studio will be now accessible under `{your-domain}/my-backend`.
## Development
### How to install
1. Navigate to the plugin directory.
2. Change to the assets directory `cd ./assets`
3. Install dependencies `npm install`
### How to build
Create a new build by running:
`npm run build`
### How to run the dev-server (HMR/Live reloading)
#### Pimcore config
Enable your local domains in terms of CSP (Content-Security-Policy) in the Pimcore config file (`./config/config.yml`)
```
pimcore_admin:
admin_csp_header:
enabled: true
additional_urls:
connect-src:
- 'ws://localhost:3030'
- 'ws://localhost:3031'
- 'http://localhost:3030'
- 'http://localhost:3031'
script-src:
- 'http://localhost:3030'
- 'http://localhost:3031'
font-src:
- 'http://localhost:3030'
- 'http://localhost:3031'
style-src:
- 'http://localhost:3030'
- 'http://localhost:3031'
```
#### How to run and access the dev-server
Use the following command to run the dev-server:
`npm run dev-server`
Now your dev-server should be running.
You can access it under your normal project domain:
`{your-domain}/admin/studio`
### Storybook
Pimcore studio is using [Storybook](https://storybook.js.org/) for documentation of react components.
#### Commands
```
npm run storybook // run storybook with live reloading
npm run build-storybook // for building storybook for a static hosting
```
#### Docker environment
To use storybook in your local environment ensure that you open up port `6006`
```
node:
ports:
- "6006:6006"
...
```
#### Nginx configuration
You should take care of the following configuration:
```
server {
location ^~ /storybook/ {
proxy_pass http://node:6006/;
}
location ^~ /__webpack_hmr {
proxy_pass http://node:6006/__webpack_hmr;
}
}
```
Now ensure that storybook is running via `npm run storybook`.
Finally you can access it under `{your-domain/storybook}`
## Documentation Overview
- [Installation](./doc/01_Installation.md)
- [Getting started with your first plugin](./doc/05_Plugins/README.md)
- [SDK Overview](./doc/07_SDK_Overview/README.md)