App Development

App Development
Getting Started
Storefront apps

Learn how to create your own storefront components with React and VTEX IO.

While the VTEX IO platform and Store Framework provide high-quality and customizable React storefront blocks, there may be cases where you require specific frontend solutions not covered by our native components. In such cases, the VTEX IO platform empowers you to create your own storefront apps with React.

In this tutorial, you will learn how to build React storefront components using the VTEX IO platform. This tutorial comprises nine parts covering all aspects of the development process, from setting up your development environment to making your app publicly available.

Here's an overview of the parts:

Part 1. Setting up your development environment
Learn how to set up your development environment to build storefront components with VTEX IO.
Part 2. Creating the new app
Learn how to create a new app on the VTEX IO platform, which will serve as the foundation of your storefront component.
Part 3. Declaring a theme block
Learn how to declare a theme block, which is a reusable piece of code that defines the structure of your storefront component.
Part 4. Defining styles
Learn how to define styles for your storefront components, including how to export CSS handles for further customization.
Part 5. Structuring documentation
Learn how to structure documentation for your storefront component, making it easier for other developers to use and understand.
Part 6. Consuming data
Learn how to consume data from different sources and integrate it into your storefront components,
Part 7. Translating the component
Learn how to translate your storefront components into different languages, making them accessible to a broader audience.
Part 8. Improving performance with caching
Learn how to use caching to improve the performance of your storefront components, ensuring that they load quickly and provide a seamless shopping experience.
Part 9. Making your app publicly available
Learn how to make your app available to other users, either by publishing it for scoped usage or by submitting it to the VTEX App Store.

The storefronts apps you develop can be used in your store's theme or be made available to other stores interested in the same solution through VTEX App Store. During the development process, make sure to follow our best practices on developing custom storefront components and App Store Guidelines to ensure the best results.

Please note that custom apps are the liability of the app's vendor, and VTEX shall bear no responsibility for these apps nor provide support for their users.

Photo of the contributor
+ 1 contributors
Was this helpful?
Suggest edits (Github)
See also
1. Setting up your development environment
App Development
Photo of the contributor
+ 1 contributors
On this page