Create, deploy, and see your first component live in 5 minutes
Node.js 20+
VS Code
Git
Ollie Shop Store
create-ollie-shop
command to triger the scaffolding of a new project with our Hello World component.
Create Your Project
Project Name
which will be the name on the folder.Store ID
leave empty - you’ll be able to add this information at a later step.VTEX Account Name
the id of your store in in your ecommerce provider.Version ID
leave empty - you’ll be able to add this information at a later stepNavigate to Project
[your-project-name]
with the name you choseOpen in VS Code
Install Preview.js Extension
"Preview.js"
Install Project Dependencies
Open Component File
components/HelloWorld/index.tsx
in VS CodeClick “Open HelloWorld in Preview.js” to see live previewSee Live Preview
Add Checkout Features
index.tsx
file with the code below.useCheckoutSession
action from the ollie-sdk
. Allowing you to display data from your cart.Navigate to Components
Configure Component
Get Component ID
26f2e95f-e7f3-4e26-903f-a5ad4e03f584
Include your Store settings
Include your Component Id
Build Your Component
Settings
, and click Save
.Log In via CLI
Deploy to Ollie Shop
Deploy
and **include the Component Id again **and click Deploy
.Verify Deployment