Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
IO Documentation
Official extension
Version: 0.88.24
Latest version: 0.88.24

How documentation works in VTEX IO

Documentation in VTEX IO is built with the mindset that developers should have it at hand, in order to encourage its scaling and maintenance. Therefore, what that means is that all VTEX Developer Portal content is statically rendered from the code of each and every app in VTEX IO's registry, using the Docs Builder.

Docs Builder

The Docs Builder is a VTEX IO builder that access the /docs folder contained in the app's code, reading its markdown content and rendering it as a page in VTEX Developer Portal.

{"base64":"  ","img":{"width":541,"height":91,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":12587,"url":"https://user-images.githubusercontent.com/18701182/64049859-9fc5bc80-cb4c-11e9-8072-4200ead73e9a.png"}}

Take for instance the product-identifier app. Looking at the app's content structure, it's possible to see a /docs folder with a README.md .

{"base64":"  ","img":{"width":1995,"height":876,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":149494,"url":"https://user-images.githubusercontent.com/18701182/64050596-f2a07380-cb4e-11e9-8ad2-69cc7cd850ff.png"}}

That will render a page in VTEX Developer Portal with a custom URL that makes reference to the app:

https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-identifier

The page created is as follows:

{"base64":"  ","img":{"width":2262,"height":876,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":179836,"url":"https://user-images.githubusercontent.com/67089688/107689913-3118e800-6c88-11eb-9533-346ea698ee45.png"}}

Structuring an app so that it can be built with Docs Builder

To be able to use the Docs Builder, you need to go through some quick steps:

  1. Create a docs/ folder in the app’s root.
  2. Update the app's manifest.json file to declare vtex.docs as one of the app's builders.

{"base64":"  ","img":{"width":636,"height":534,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":58068,"url":"https://user-images.githubusercontent.com/18701182/64052096-a99eee00-cb53-11e9-8d69-925a451231ab.png"}}

  1. Inside the docs/ folder create a README.md file.

DISCLAIMER: in order to not have to keep track of two README.md files (one in the project’s root and another it the docs/ folder), you can delete the former and only keep the latter. GitHub will read the one from the docs/ folder and render it on the landing page.

How to create multipage documentation

Docs builder will create complex pages with navigation handling and multipage content as well. To be able to accomplish this, you need to:

  1. Create a SUMMARY.md file that follows the usual markdown summary format, for instance:

_10
- [Get started](README.md)
_10
- [Further](further.md)
_10
- [Even further](evenfurther.md)

  1. Create the files according to the exact links you declared in your summary file.

This will render a page with a sidebar that follows your summary implementation and also renders your multipage documentation. This very app (vtex.io-documentation) was created from this blueprint.

Contribution is easy and open-source in VTEX IO

Apps are, at their core, bits of programming code and are therefore stored in git repositories. Docs Builder enables documentation contribution on a Pull Request/Merge Request level.

VTEX Open Source native apps and documentation are fully stored in the VTEX Apps Organization on GitHub, meaning that the documentation, as well as the code are open-source and may be contributed to by creating new Pull Requests.

Keeping track of outdated docs

It wouldn't mean much if a tool for bringing documentation closer to the developer was created but no effort was pursued in creating the awareness of always keeping that documentation up-to-date.

As a result, VTEX Apps Organization has the Docs Bot constantly monitoring the documentation status. Its responsibilities are:

  • To check if Pull Requests accompany documentation changes and, if they don't, to check the reason behind that. If it’s simply a timing issue, then an issue is created in the IO Documentation and along with a note in the repo’s README.md to report that new documentation is coming soon.
  • To create issues weekly for repos that don't have their documentation structured properly.

Docs Bot is an open-source project and may be used by any third-party repo/organization with just a few tweaks. Also, contributions to it are encouraged to make it even more powerful.

See also
VTEX App Store
VTEX IO Apps
Vtex Io Cli Install
VTEX IO Apps
Safely Enabling Performance Settings
VTEX IO Apps
3 DefiniendoElTemaDeSuTienda
VTEX IO Apps
4 DeclarandoUmBlocoDeTema
VTEX IO Apps
2 BasicSetupToDevelopInVtexIo
VTEX IO Apps
Making Your New App Version Publicly Available
VTEX IO Apps
Dependencies
VTEX IO Apps
Best Practices For Optimizing Performance
VTEX IO Apps
CustomizeColors
VTEX IO Apps
5 WritingTheHeaderAndBodyScripts
VTEX IO Apps
Managing Landing Pages In Cross Border Stores
VTEX IO Apps
Slots
VTEX IO Apps
Vtex Io Cli Command Reference
VTEX IO Apps
Multi Language Stores
VTEX IO Apps
Translating Storefront Content
VTEX IO Apps
CustomizeBreakpoints
VTEX IO Apps
Migrating CMS Settings After Major Update
VTEX IO Apps
Intelligent Search Middleware
VTEX IO Apps
4 ConfigurandoTemplates
VTEX IO Apps
9 Improving Performance With Caching
VTEX IO Apps
Enabling The Stores Pwa Notice
VTEX IO Apps
WhatIsVTEXIO
VTEX IO Apps
CustomizeColors
VTEX IO Apps
Workspace
VTEX IO Apps
Setting Up Google Analytics Search Tracking
VTEX IO Apps
Properties
VTEX IO Apps
Vtex Io Cli Plugins
VTEX IO Apps
2 ConfiguracoesBasicasParaDesenvolverNoVtexIo
VTEX IO Apps
Installing An App
VTEX IO Apps
CustomCSS
VTEX IO Apps
Understanding How Store Url Indexing Works
VTEX IO Apps
Index
VTEX IO Apps
2 SetupBasicoParaDesarrollarEnVTEXIO
VTEX IO Apps
Overwriting The Messages App Documentation
VTEX IO Apps
Using Flex Layout
VTEX IO Apps
Sending Custom Events To Google Tag Manager
VTEX IO Apps
Best Practices For Rendering Images
VTEX IO Apps
Configuring Custom Images For The Sku Selector
VTEX IO Apps
Service
VTEX IO Apps
5 DefinindoEstilos
VTEX IO Apps
1 DevelopNativeIntegrationsWithPixelApps
VTEX IO Apps
Production
VTEX IO Apps
Composition
VTEX IO Apps
Billing Options
VTEX IO Apps
Vrn
VTEX IO Apps
Business Guidelines App Monetization
VTEX IO Apps
2 PreRequesites
VTEX IO Apps
5 CustomizandoEstilos
VTEX IO Apps
Running Native Ab Testing
VTEX IO Apps
7 Consuming Data
VTEX IO Apps
Development
VTEX IO Apps
10 TornandoASuaAplicacaoPublicamenteDisponivel
VTEX IO Apps
Checking Your Store Binding Id
VTEX IO Apps
1 WhatIsVTEXIO
VTEX IO Apps
Toolbelt
VTEX IO Apps
Engineering Guidelines
VTEX IO Apps
1 PreRequisites
VTEX IO Apps
Overwriting The Messages App
VTEX IO Apps
Creating A New Custom Page
VTEX IO Apps
Creating Development Workspace For Cms Legacy
VTEX IO Apps
Internationalizing Product Prices
VTEX IO Apps
Creating A Production Workspace
VTEX IO Apps
Running IO Scripts In Non IO VTEX Stores
VTEX IO Apps
Vtex Io Cli Update
VTEX IO Apps
Improving Filter Navigator Experience
VTEX IO Apps
5 PersonalizandoEstilos
VTEX IO Apps
Manifest
VTEX IO Apps
Managing Application Logs
VTEX IO Apps
Deactivating The Vtex Io Native Service Worker
VTEX IO Apps
Index
VTEX IO Apps
Listing An Accounts Apps
VTEX IO Apps
Enabling Order Form Optimization
VTEX IO Apps
Installing Apps In Live Stores Best Practices
VTEX IO Apps
Builders
VTEX IO Apps
Edition App
VTEX IO Apps
Creating A Native Form For Your Store Users
VTEX IO Apps
Index
VTEX IO Apps
Vtex Io Cli Installation And Command Reference
VTEX IO Apps
Contributing With New Css Handles
VTEX IO Apps
Managing Url Redirects
VTEX IO Apps
Using Several Service Workers In Your Store
VTEX IO Apps
Using Sandbox Blocks
VTEX IO Apps
Developing Service Configuration Apps
VTEX IO Apps
Policies
VTEX IO Apps
Associating A Custom Page To A Content Type
VTEX IO Apps
Updating Edition Apps
VTEX IO Apps
Translating Catalog Content
VTEX IO Apps
4 ConfigurandoTemplates
VTEX IO Apps
Configuring An Edition App
VTEX IO Apps
Consulting B2b Order Statuses
VTEX IO Apps
Setting Up Google Tag Manager
VTEX IO Apps
What Is Vtex Io
VTEX IO Apps
Site Editor
VTEX IO Apps
Migrating Google Tag Manager App
VTEX IO Apps
What Is Vtex Store Framework
VTEX IO Apps
Becoming A Registered Vtex App Store Developer
VTEX IO Apps
Linking Urls In Banners Using Site Editor
VTEX IO Apps
Supportapps
VTEX IO Apps
Customizing The Header And Footer Blocks By Page
VTEX IO Apps
Creating A Black Friday Page From Template
VTEX IO Apps
Frequently Asked Questions
VTEX IO Apps
Sponsor Account
VTEX IO Apps
Cleaning Cart Data On Log Out
VTEX IO Apps
Using Css Handles For Store Customization
VTEX IO Apps
3 DefinindoOTemaDaSuaLoja
VTEX IO Apps
Business Guidelines Self Service Level
VTEX IO Apps
Customizing Your Stores Typography
VTEX IO Apps
Configurar O Rastreamento De Busca Do Google Analytics
VTEX IO Apps
Go Live
VTEX IO Apps
8 MakingYourPixelAppPubliclyAvailable
VTEX IO Apps
Rendering A Badge
VTEX IO Apps
Getting Started With Lighthouse
VTEX IO Apps
Creating Robots Files For Cross Border Stores
VTEX IO Apps
Performing Ab Testing Between Legacy And Io
VTEX IO Apps
Submitting Your App In The Vtex App Store
VTEX IO Apps
3 CriandoANovaAplicacao
VTEX IO Apps
Index
VTEX IO Apps
Displaying Asynchronous Prices
VTEX IO Apps
Homologation Requirements For Vtex App Store
VTEX IO Apps
Indicating Alternate Pages In Cross Border Stores
VTEX IO Apps
Peerdependencies
VTEX IO Apps
Blocks
VTEX IO Apps
Interfaces
VTEX IO Apps
6 BuildingYourOwnStoreTheme
VTEX IO Apps
6 Structuring Documentation
VTEX IO Apps
TornarASuaLojaPublica
VTEX IO Apps
Preparing Your App Distribution
VTEX IO Apps
Personalizar La Tipografia De La Tienda
VTEX IO Apps
CustomizeIcons
VTEX IO Apps
7 StructuringTheDocumentation
VTEX IO Apps
Cross Border Stores
VTEX IO Apps
Linkar Urls Em Banners Usando O Storefront
VTEX IO Apps
Using The Markers Prop To Customize A Blocks Message
VTEX IO Apps
Cross Border Stores Content Internationalization
VTEX IO Apps
Using Events To Trigger Side Effects On Store Components
VTEX IO Apps
8 Translating The Component
VTEX IO Apps
Developing Custom Storefront Components
VTEX IO Apps
Building A Search Results Page With Multiple Layouts
VTEX IO Apps
1 BasicSetup
VTEX IO Apps
Business Guidelines Marketing Assets
VTEX IO Apps
Releasing A New App Version
VTEX IO Apps
Installing Google Tag Manager
VTEX IO Apps
4 Declaring A Theme Block
VTEX IO Apps
Disabling Automatic Translation
VTEX IO Apps
Migrating Storefront From Legacy To Io
VTEX IO Apps
4 ConfiguringTemplates
VTEX IO Apps
9 AperfeicoandoODesempenhoComCache
VTEX IO Apps
Publishing An App
VTEX IO Apps
Building A Product Details Page
VTEX IO Apps
1 WhatIsVTEXIO
VTEX IO Apps
Using The Fold Blocks
VTEX IO Apps
1 StoreFramework
VTEX IO Apps
Configuring A B2b Environment
VTEX IO Apps
CustomCSS
VTEX IO Apps
Tracking Changes In Lighthouse Performance Score
VTEX IO Apps
1 StoreFramework
VTEX IO Apps
Creating A Development Workspace
VTEX IO Apps
Deprecating An App
VTEX IO Apps
Deploying The App Stable Version
VTEX IO Apps
6 ConsumindoDados
VTEX IO Apps
Segmenting The Search Result
VTEX IO Apps
Setting Your Apps Billing Model
VTEX IO Apps
Customizar A Tipografia Da Loja
VTEX IO Apps
Developing An App
VTEX IO Apps
Business Guidelines Vtex App Store
VTEX IO Apps
3 Creating The New App
VTEX IO Apps
Interface
VTEX IO Apps
Creating A Custom Search Results Page
VTEX IO Apps
Cms
VTEX IO Apps
Building A Shelf
VTEX IO Apps
Becoming A Sponsor Account
VTEX IO Apps
Debugging Performance Issues
VTEX IO Apps
Going Live
VTEX IO Apps
Roles
VTEX IO Apps
Building A Carousel Using Slider Layout
VTEX IO Apps
Creating A Product Availability Form
VTEX IO Apps
Summary
VTEX IO Apps
Blocks
VTEX IO Apps
Promoting A Workspace To Master
VTEX IO Apps
Summary
VTEX IO Apps
Routes
VTEX IO Apps
6 ListeningToStoreEvents
VTEX IO Apps
How To Create And Use Clients
VTEX IO Apps
Enabling 404 Pages
VTEX IO Apps
Clients
VTEX IO Apps
Pixel App
VTEX IO Apps
Linking An App
VTEX IO Apps
Vtex Io Cli Usage
VTEX IO Apps
Building A Horizontal Product Summary
VTEX IO Apps
7 TraduzindoOComponente
VTEX IO Apps
Collecting User Session Data
VTEX IO Apps
Creating Modals Using Icons
VTEX IO Apps
Using The Assets Builder
VTEX IO Apps
2 Basic Development Setup In Vtex Io
VTEX IO Apps
3 SettingYourStoreTheme
VTEX IO Apps
Summary
VTEX IO Apps
Index
VTEX IO Apps
10 Making Your App Publicly Available
VTEX IO Apps
Design Guidelines
VTEX IO Apps
1 Developing Storefront Apps Using React And Vtex Io
VTEX IO Apps
Index
VTEX IO Apps
5 DefiningStyles
VTEX IO Apps
Vtex Io Cli Uninstall
VTEX IO Apps
3 CloningTheBoilerplateRepository
VTEX IO Apps
Creating A Master Data Crud App
VTEX IO Apps
5 Defining Styles
VTEX IO Apps
Filling The Application Form For Development
VTEX IO Apps
Making Your Theme Content Public
VTEX IO Apps
What Is A Vtex App
VTEX IO Apps
8 EstruturandoADocumentacao
VTEX IO Apps
4 ConfiguringYourAppSettings
VTEX IO Apps
Customizing Your Stores Icons
VTEX IO Apps
CustomizeIcons
VTEX IO Apps
2 SetupBasicoParaDesenvolverNoVTEXIO
VTEX IO Apps
Interfaces
VTEX IO Apps
CustomizeBreakpoints
VTEX IO Apps