Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #849

Open
wants to merge 2 commits into
base: 1.x
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 20 additions & 23 deletions doc/05_Plugins/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@ Plugins can add new features, modify existing functionality, or integrate with e

## Getting started

Since there’s no npm package available yet, follow the local development guide to install the Pimcore Studio UI as one of your frontend dependencies. To do this, change to the Pimcore Studio path (vendor/pimcore/studio-ui-bundle) and run these commands:

```
npm install
npm run build
npm pack --pack-destination ~
```

This will create a installable tar file in our home directory.

Switch back to your bundle directory. We can now install the package directly in our Bundle via:

```
npm install ~/package-name.tgz
```

To begin, ensure you have a basic [Pimcore Bundle](https://pimcore.com/docs/platform/Pimcore/Extending_Pimcore/Bundle_Developers_Guide/). For this guide, let’s call our plugin `PimcoreStudioUiDemoPluginBundle`.

Since there’s no npm package available yet, follow the local development guide to install the Pimcore Studio UI as one of your frontend dependencies.

With our dependency in place we should now setup our bundling process. we recommend using [Symfony Encore](https://symfony.com/doc/current/frontend/encore/installation.html). Later on, you’ll need a generated manifest from it.

Expand Down Expand Up @@ -88,10 +103,12 @@ Encore

// Important! Reference this vendor-manifest in your build.
// It will take care of injecting Ant-Design, React, etc. without the need to bundle it in your plugin.
.addPlugin(new webpack.DllReferencePlugin({
// Note: This is currently not even possible, since the build dir changes with every build (uidv4) and even if you
// use the right folder, it fails... is it really needed?
/*.addPlugin(new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.join(__dirname, 'node_modules', 'pimcore-studio-ui', 'dist', 'vendor', 'vendor-manifest.json')
}))
}))*/
;

if (!Encore.isDevServer()) {
Expand Down Expand Up @@ -175,12 +192,6 @@ use Pimcore\Extension\Bundle\AbstractPimcoreBundle;

class PimcoreStudioUiDemoPluginBundle extends AbstractPimcoreBundle implements PimcoreBundleStudioUiInterface
{

public function getPath(): string
{
return \dirname(__DIR__);
}

public function getWebpackEntryPointsJsonLocations(): array
{
return [$this->getPath() . '/public/build/entrypoints.json'];
Expand All @@ -200,18 +211,4 @@ Now just ensure that our bundle is installed. And finally we should see our `con
- [How to add a custom icon](./02_Adding_custom_icons.md)
- [How to add your first widget](03_Add_your_first_widget.md)

## Local development

For local development we have to create a local package of the Pimcore Studio UI first. For that we simply have to navigate to our package.json and run the following commands:

```
npm install
npm run build
npm pack --pack-destination ~
```

This will create a installable tar file in our home directory. We can now install the package directly in our Bundle via:

```
npm install ~/package-name.tgz
```

This file was deleted.

This file was deleted.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions public/build/6ba5c1c1-e81f-445c-a1a6-e8a329222030/entrypoints.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"entrypoints": {
"core-dll": {
"css": [
"/bundles/pimcorestudioui/build/6ba5c1c1-e81f-445c-a1a6-e8a329222030/core-dll.css"
],
"js": [
"/bundles/pimcorestudioui/build/6ba5c1c1-e81f-445c-a1a6-e8a329222030/core-dll.js"
]
}
}
}

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"entrypoints": {
"main": {
"js": [
"/bundles/pimcorestudioui/build/74e4f63f-5ab3-4be4-9d2d-1b1b202736ec/main.js"
]
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"bundles/pimcorestudioui/build/74e4f63f-5ab3-4be4-9d2d-1b1b202736ec/main.js": "/bundles/pimcorestudioui/build/74e4f63f-5ab3-4be4-9d2d-1b1b202736ec/main.js"
}
12 changes: 0 additions & 12 deletions public/build/de8d8e44-8901-45e4-aa7f-ae5f4ddf6635/entrypoints.json

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"entrypoints": {
"vendor": {
"js": [
"/bundles/pimcorestudioui/build/f9a8fac1-8087-45c0-a60b-8cd4188d85d8/vendor.js"
]
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"bundles/pimcorestudioui/build/f9a8fac1-8087-45c0-a60b-8cd4188d85d8/vendor.js": "/bundles/pimcorestudioui/build/f9a8fac1-8087-45c0-a60b-8cd4188d85d8/vendor.js"
}