Documentation
Feedback
Guides
App Development

App Development
Getting StartedStorefront apps
1. Setting up your development environment

Any development in VTEX IO begins and ends with the VTEX IO CLI. The VTEX IO CLI works as a communication gateway between your VTEX account and the VTEX IO development platform.

With VTEX IO's CLI, you will be able to log in to your VTEX account, manage workspaces, develop apps, and install new ones.

Installing VTEX IO's CLI

To install VTEX IO’s CLI, you need to ensure that Node.js and Yarn are properly installed on your machine.

To follow all the required steps for installing VTEX IO's CLI, access our documentation on VTEX IO CLI Installation and Command Reference.

Logging in to your VTEX account

Once VTEX IO’s CLI is installed, log in to your VTEX account with the following command:

vtex login {accountName}

This will open a browser window asking for your credentials.

Replace {accountName} with the name of your VTEX account.

Once you are logged in, run the vtex whoami command to show which VTEX account and workspace are being used by the VTEX IO CLI.

{"base64":"  ","img":{"width":3184,"height":1864,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":428247,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-2-basic-development-setup-in-vtex-io-0.png"}}

Creating your own workspace

When using VTEX IO, any development must happen in a workspace.

A workspace works as a GitHub branch in the sense that any development operation is done in a specific workspace that is separate from others. This means that workspaces allow you to develop and test your changes without any risk of interfering with live apps or with the work of other developers.

To start developing, you have to create a Developer workspace in your VTEX account. When you log in, you are automatically using the Master workspace, which means you are in the version available to the end user.

Run the vtex use command in your terminal as shown below:

vtex use {exampleName}

This changes your VTEX account to a Development workspace called exampleName, creating it from scratch if it does not already exist.

{"base64":"  ","img":{"width":3184,"height":756,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":148140,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-2-basic-development-setup-in-vtex-io-1.png"}}

Having logged in to your account and created your own Development workspace, you are ready to begin developing your React app and building your storefront using VTEX IO.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Storefront apps
2. Creating the new app
See also
2. Creating the new app
App Development
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page