VTEX IO Render Extension Loader
npm install @vtex/render-extension-loaderUse render components from the comfort of your client-side code.
Create an app that serves a page under /legacy-extensions/ path on myvtex.com.
```
// pages/pages.json
{
"pages": {
"legacy-getting-started": {
"path": "/legacy-extensions/render-example",
"theme": "theme"
},
},
"extensions": {
"legacy-getting-started": {
"component": "index"
},
}
}
Assuming you're logged in the account basedevmkp and workspace loader with this app installed, you can use window.RenderExtensionLoader to load and render that extension point.
``
You can call loader.render passing a third argument, props, which will trigger a re-render of your extension point.
If you're logged in the toolbelt with a @vtex.com.br email address, you are automatically configured to use the staging environment, which serves all traffic through the alternate myvtexdev.com (as opposed to myvtex.com for prod traffic).
This means that during development, if you are linking your app in the staging environment, you _must_ pass the publicEndpoint option to RenderExtensionLoader with the value of myvtexdev.com. Otherwise, your assets will be fetched from the production env and there might be inconsistencies during development, i.e. you will not see changes immediately.
So, during development simply pass this option to guarantee the loader will point towards the correct public endpoint:
``
var loader = new RenderExtensionLoader({
account: 'basedevmkp',
workspace: 'loader',
path: '/render-example',
locale: 'pt-BR',
publicEndpoint: 'myvtexdev.com',
verbose: true,
})
You can get assets and context without actually fetching files in case you want only the runtime context before loading extension points.
```
From _vtexassets.com_:
https://vtex.vtexassets.com/_v/public/assets/v1/npm/@vtex/render-extension-loader@0.1.6/lib/render-extension-loader.js