README

Studio UI Bundle为Pimcore提供了后端UI。它基于React框架。

如何安装

• 安装

如何打开

• 通过经典后端UI登录
• 在 {your-domain}/pimcore-studio 下访问它

在不同的URL下运行UI

要更改URL，您可以添加以下配置

´´´yaml pimcore_studio_ui: url_path: '/my-backend' ´´´

现在可以通过 {your-domain}/my-backend 访问Studio。

开发

如何安装

1. 导航到插件目录。
2. 切换到资源目录 cd ./assets
3. 安装依赖项 npm install

如何构建

通过运行以下命令创建新的构建

npm run build

如何运行开发服务器（HMR/实时刷新）

Pimcore配置

在Pimcore配置文件（./config/config.yml）中启用本地域名以CSP（内容安全策略）的形式

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'  

如何运行和访问开发服务器

使用以下命令运行开发服务器

npm run dev-server

现在您的开发服务器应该正在运行。您可以通过正常的项目域名访问它

{your-domain}/admin/studio

Storybook

Pimcore studio使用Storybook用于react组件的文档。

命令

npm run storybook // run storybook with live reloading
npm run build-storybook // for building storybook for a static hosting

Docker环境

要在本地环境中使用storybook，请确保您已打开端口6006

node:
  ports: 
    - "6006:6006"
  ...

Nginx配置

您应该注意以下配置

server {
  location ^~ /storybook/ {
      proxy_pass http://node:6006/;
  }

  location ^~ /__webpack_hmr {
      proxy_pass http://node:6006/__webpack_hmr;
  }
}

现在确保通过 npm run storybook 运行storybook。最后，您可以通过 {your-domain/storybook} 访问它

文档概述

• 安装
• 开始您的第一个插件
• SDK概述