pimcore/studio-ui-bundle

Pimcore Studio Ui Bundle

1.x-dev 2025-04-03 17:06 UTC

Requires

• php: ~8.3.0 || ~8.4.0
• pimcore/pimcore: ^12.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

proprietary

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

• Installation

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

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 (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}

Documentation Overview

• Installation
• Getting started with your first plugin
• SDK Overview