Blocks are reusable modules of content, written in React, allowing merchants to create unique and dynamic app experiences. Merchants can add, remove, and reorder blocks within a given screen to achieve their ideal flow. Block are fully composable and can we described and edited via the App Studio dashboard.

Step 1 - Installing and configuring Tapcart CLI

This will get your local development environment set up using the Tapcart CLI and App Studio SDK.

📘

Visit the NPM Page: https://www.npmjs.com/package/@tapcart/tapcart-cli

Install Tapcart CLI globally

npm install -g @tapcart/tapcart-cli

Log in to your Tapcart account

tapcart auth login

Configure your application

npm init @tapcart/tapcart-app [-- -a <application_id> -f <project_name>]

Step 2 - Creating a new Block

This will get your local development environment set up.

📘

Use our Mobile Component Library. The SDK is pre-imported and ready to use:
https://tapcart-consumer-web-storybook.pages.dev/

Create a new block - HelloWorld

tapcart block create HelloWorld

Start your local server

tapcart block dev -b HelloWorld

Your block is now running

✔ Tapcart block server started.

Running "HelloWorld" at: http://localhost:4995

Step 3 - Hooking your Block up to the App Studio CMS

📘

Blocks that have been pulled from App Studio via CLI will also come with a manifestConfig.json that contains the values that were saved to the block on the App Studio Dashboard

📘

Full documentation on manifest fields and full composability coming soon August 15th.

Add a field to your blocksmanifest.json

{
	{
  	"id": "myFirstText",
  	"label": "Text",
  	"type": "text",
    "defaultValue": "Custom CMS Text In my Block"
	}
}    

Access your field from within your blockConfig

const { myFirstText } = blockConfig

Render your field value on your block

return (
	<p>{myFirstText}</p>
)

Step 4 - Deploying your block to App Studio

📘

Blocks deployed with the --live argument will be available right away to use in the App Studio Dashboard.

This will also update all instances of a block that is currently live in any apps.

Deploy your block to App Studio

tapcart block push -b HelloWorld --live

Confirming your block was deployed

✔ Block(s) built
✔ Block(s) pushed

Use your block on the Tapcart Dashboard

You can now access and use your block directly from the App Studio Dashboard under App Studio/ Screens/My Blocks