Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adobe-rnd/uex-asset-picker


https://github.com/adobe-rnd/uex-asset-picker

Last synced: 3 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Universal Editor Extension - Custom Asset Picker



This is an extension of Universal Editor for picking AEM assets in different repositories than the one used by the editted page.



## Setup



- Populate the `.env` file in the project root and fill it as shown [below](#env)



## Local Dev



- `aio app run` to start your local Dev server

- App will run on `localhost:9080` by default



By default the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a

local serverless stack and also run your actions locally use the `aio app run --local` option.



## Test & Coverage



- Run `aio app test` to run unit tests for ui and actions

- Run `aio app test --e2e` to run e2e tests



## Deploy & Cleanup



- `aio app deploy` to build and deploy all actions on Runtime and static files to CDN

- `aio app undeploy` to undeploy the app



## Use in Universal Editor



In order to edit a page with Universal Editor, you normally go to `https://author-p12345-e67890.adobeaemcloud.com/ui#/@sitesinternal/aem/universal-editor/canvas/author-p12345-e67890.adobeaemcloud.com/content/site/index.html`.

You can enable the extension by adding the `ext` query param to the URL.



Examples:

* Local extension dev: `https://author-p12345-e67890.adobeaemcloud.com/ui#/@sitesinternal/aem/universal-editor/canvas/author-p12345-e67890.adobeaemcloud.com/content/site/index.html?ext=https://localhost:9080`

* Deployed extension: `https://author-p12345-e67890.adobeaemcloud.com/ui#/@sitesinternal/aem/universal-editor/canvas/author-p12345-e67890.adobeaemcloud.com/content/site/index.html?ext=https://[APP_BUILDER_NAMESPACE].adobeio-static.net/index.html`



## Config



### `.env`



You can generate this file using the command `aio app use`. 



```bash

# This file must **not** be committed to source control



## Adobe I/O Runtime credentials

AIO_runtime_auth=

AIO_runtime_namespace=

AIO_runtime_apihost=https://adobeioruntime.net

```



### `app.config.yaml`



- Main configuration file that defines an application's implementation. 

- More information on this file, application configuration, and extension configuration 

  can be found [here](https://developer.adobe.com/app-builder/docs/guides/appbuilder-configuration/#appconfigyaml)



#### Action Dependencies



- You have two options to resolve your actions' dependencies:



  1. **Packaged action file**: Add your action's dependencies to the root

   `package.json` and install them using `npm install`. Then set the `function`

   field in `app.config.yaml` to point to the **entry file** of your action

   folder. We will use `webpack` to package your code and dependencies into a

   single minified js file. The action will then be deployed as a single file.

   Use this method if you want to reduce the size of your actions.



  2. **Zipped action folder**: In the folder containing the action code add a

     `package.json` with the action's dependencies. Then set the `function`

     field in `app.config.yaml` to point to the **folder** of that action. We will

     install the required dependencies within that directory and zip the folder

     before deploying it as a zipped action. Use this method if you want to keep

     your action's dependencies separated.



## Customize the extension



This extension assumes you have a component type `custom-asset` in your page component model, which is mapped to the custom field extension. You can edit it in [the extension registration file](src/aem-uex-1/web-src/src/components/ExtensionRegistration.js) to map a different component type, or add more extensions to Universal Editor.



## Typescript support for UI



To use typescript use `.tsx` extension for react components and add a `tsconfig.json` 

and make sure you have the below config added

```

 {

  "compilerOptions": {

      "jsx": "react"

    }

  } 

```