App Development

App Development
Getting StartedStorefront
1. Setting up your development environment

You may not realize it, but once you've implemented VTEX Store Framework in your store, you'll be developing in VTEX IO on a certain scale.

That's because our e-commerce components are in fact native apps to the VTEX IO development platform. In practice this means that you'll need to install such apps and configure them in order to properly function on your storefront.

Step 1 - Installing the VTEX IO CLI

Any development in the VTEX IO platform begins and ends with the VTEX IO CLI (Command Line Interface).

It's the communication gateway between your VTEX store and the VTEX IO development platform, allowing you to login, install new apps on the account and manage those already installed, for example.

Follow the instructions to install the VTEX IO CLI in your machine and get familiar with it accessing the reference documentation.

Step 2 - Logging in to your VTEX account

Once VTEX IO’s CLI is installed, you can log in to your VTEX account using your terminal the following command to connect to the platform (replacing {account} with the name of the VTEX account in which you are working):

vtex login {account}

By running the command, a browser window will open and ask for your credentials.

Step 3 - Creating your own workspace

When using VTEX IO, any interaction with an account happens in a workspace.

It works as a version of the account in which you are logged in, in a way that any development operation done using such a workspace will be isolated, separate from other workspaces and the public version of the account itself (called Master).

If you're used to working with GitHub, think of workspaces as branches.

As you log in to a VTEX store using VTEX IO, you are automatically in its master workspace, meaning you are in the version available to the end user.

To confirm this, you can run the vtex whoami command in your terminal to find out which account and workspace is being used by the VTEX IO CLI for your login:

{"base64":"  ","img":{"width":1752,"height":224,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":513214,"url":""}}

To start performing the desired changes in your storefront, we will need to create a Development workspace.

Use the vtex use command in order to start configuring Store Framework in your store. For example:

vtex use examplename

Remember to replace examplename with a name of your choosing that will be given to the workspace in which you will develop.

Following our example, the command will change the login to the examplename workspace if it exists. If it does not, VTEX IO CLI will create it:

{"base64":"  ","img":{"width":858,"height":158,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":165017,"url":""}}

The vtex use command makes all your operations run in the workspace specified in the command, which means you can shift your operations to Master simply by running vtex use master in VTEX IO CLI, for example.

Step 4 - Accessing your store using a workspace

Having created your own development workspace in VTEX IO, you can now go to your store by accessing https://{workspace}--{account}, where {workspace} should be replaced with the name of the workspace that you've just created and {account} with the name of the VTEX account in which you are working.

Tip: you can simply run vtex browse in your terminal to automatically open your browser using the workspace and account in which you are working.

Done! Your store is now connected to the VTEX IO platform and you are technically ready to implement the VTEX Store Framework!

Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Suggest edits (Github)
2. Configuring your account
See also
2. Configuring your account
Storefront Development
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page