pimcore / studio-ui-bundle
Pimcore Studio Ui Bundle
Installs: 103
Dependents: 0
Suggesters: 0
Security: 0
Stars: 10
Watchers: 10
Forks: 2
Open Issues: 160
Language:TypeScript
Type:pimcore-bundle
Requires
- php: ~8.2.0
- pimcore/pimcore: ^11.0
- 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
- roave/security-advisories: dev-latest
- symfony/phpunit-bridge: ^6
- 1.x-dev
- dev-339-asset-save
- dev-333-properties-show-properties-tab-for-all-asset-types
- dev-357-versions-empty-versions-list
- dev-368-schedule-version-picker
- dev-366-schedule-fix-date-+-time-pickers
- dev-154-versions
- dev-369-schedule-group-by-upcoming-archive
- dev-app-config
- 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-06-25 19:39:42 UTC
README
Studio Ui
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}/admin/studio
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}