The Studio UI Bundle provides a Backend UI for Pimcore. It is based on the React framework.
Access it under {your-domain}/pimcore-studio
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.
- Navigate to the plugin directory.
- Change to the assets directory
cd ./assets - Install dependencies
npm install
Create a new build by running:
npm run build
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'
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
Pimcore studio is using Storybook for documentation of React components.
npm run storybook // run storybook with live reloading
npm run build-storybook // for building storybook for a static hosting
To use Storybook in your local environment ensure that you open up port 6006
node:
ports:
- "6006:6006"
...
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}