pimcore / studio-ui-bundle
Pimcore Studio Ui Bundle
Installs: 474
Dependents: 0
Suggesters: 0
Security: 0
Stars: 14
Watchers: 11
Forks: 4
Open Issues: 146
Language:TypeScript
Type:pimcore-bundle
Requires
- php: ~8.2.0 || ~8.3.0
- pimcore/pimcore: ^11.x-dev
- pimcore/studio-backend-bundle: 1.x-dev
Requires (Dev)
- codeception/codeception: ^5.0.10
- codeception/module-asserts: ^2
- codeception/module-symfony: ^3.1.1
- codeception/phpunit-wrapper: ^9
- fakerphp/faker: ^1.23
- nyholm/psr7: ^1
- phpstan/phpstan: ^1.10.5
- phpstan/phpstan-symfony: ^1.2.20
- phpunit/phpunit: 10.2.7
- symfony/phpunit-bridge: ^6
- 1.x-dev
- dev-data-object-widgets
- dev-readme-update
- dev-536-shared-component-tags
- dev-improve_file_upload
- dev-nightly
- dev-539-switch-shared-component
- dev-compact-component
- dev-refactor-to-accordion-shared-component
- dev-504-segmented-control
- dev-scheduler-improvements
- dev-fix-tests
- dev-71-context-menu
- dev-spacing-components
- dev-257-asset-upload-dnd
- dev-typography-components
- dev-436-example-widget
- dev-split-layout-resizing
- dev-api-cache-tagging
- dev-cell-types
- dev-improve-asset-draft
- dev-accordion-shared-component
- dev-dropdown
- dev-modified-cells
- dev-mercure-client-url
- dev-cleanup-asset-tabs
- dev-509-decouple-asset-api-from-custom-settings-api
- dev-split-layout
- dev-remove-workflow-css
- dev-unify-add-buttons
- dev-properties-improvements
- dev-properties-view
- dev-content-container
- dev-500-refactor-buttons-in-tabs
- dev-improve-cell-types
- dev-421-editable-properties-key
- dev-463-headline-shared-component
- dev-metadata-types
- dev-notes-improvements
- dev-latest-api-update
- dev-loading-indicators
- dev-video-sidebar
- dev-storybook
- dev-grid-tools
- dev-331-followup-property-needs-to-be-read-only
- dev-414-open-icon-for-assets
- dev-358-versions-clear-all-adjustments
- dev-grid-tags
- dev-api-update
- dev-display-user
- dev-dependabot/github_actions/cla-assistant/github-action-2.4.0
- dev-dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-7.8.0
- dev-dependabot/npm_and_yarn/multi-658d7c804e
- dev-198-improve-thumbnails-in-folder-preview
- dev-dependabot/npm_and_yarn/i18next-23.10.1
- dev-dependabot/npm_and_yarn/eslint-8.57.0
- dev-dependabot/npm_and_yarn/eslint-plugin-react-7.34.1
- dev-97-error-messages-and-quick-snackbar
- dev-inspire-demo
This package is auto-updated.
Last update: 2024-09-20 13:00:30 UTC
README
The Studio UI Bundle provides a Backend UI for Pimcore. It is based on the React framework.
How to install
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
- Navigate to the plugin directory.
- Change to the assets directory
cd ./assets
- 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 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}