pimcore / studio-ui-bundle
Pimcore Studio Ui Bundle
Installs: 617
Dependents: 0
Suggesters: 0
Security: 0
Stars: 14
Watchers: 11
Forks: 6
Open Issues: 181
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-nightly
- dev-176-full-text-search-filter
- dev-data-object-types
- dev-workflow-actions
- dev-439-improve-formatdataunit-function
- dev-628-add-alert-modal
- dev-673-fix-column-selection-behavior
- dev-localized-fields
- dev-671-paste-element-respect-job-run-id
- dev-176-fix-id-filter-field
- dev-data-object-data-types
- dev-176-pql-filter
- dev-626-add-permission-system
- dev-block-component
- dev-176-field-filters
- dev-default-panel-view
- dev-data-object-edit
- dev-full-width-horizontal-scroll
- dev-wip-horizontal-scroll
- dev-630-fix-table-cell-aligned
- dev-workflow-tags
- dev-badge-tag
- dev-badge-tag-shared-component
- dev-175-grid-config
- dev-batch-edit-job-return
- dev-batch-edit-modal
- dev-550-wrapping-tag-shared-component
- dev-save-grid-config
- dev-544-improve-split-layout-resizer
- dev-539-switch-shared-component
- dev-536-shared-component-tags
- dev-refactor-to-accordion-shared-component
- dev-414-open-icon-for-assets
- dev-358-versions-clear-all-adjustments
- dev-grid-tags
- 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-11-08 00:23:55 UTC
README
The Studio UI Bundle provides a Backend UI for Pimcore. It is based on the React framework.
Admin UI: {your-domain}/pimcore-studio
Storybook: {your-domain/storybook}
How to install
How to open
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 (the dev server started on the same URL, but it’s using Webpack HMR).
You can access it under your normal project domain:
{your-domain}/pimcore-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}