Setup: CLI, Dev Dashboard, dev store

What you need

• Node.js 20+ (LTS) and npm, pnpm or yarn
• Git
• A Shopify developer account. Apps and dev stores now live in the Dev Dashboard (dev.shopify.com), which replaces the old Partner Dashboard flow for app management. The Partner Dashboard is still used for payouts and App Store listings.
• The Shopify CLI, which is installed per project by the template. You can also install it globally:

npm install -g @shopify/cli@latest

Create a dev store

In the Dev Dashboard, create a development store. It's a free, private Shopify store for testing your app. It can't take real orders or real payments, and app charges on it are always test charges.

The "Create store" form, field by field

Field	What it means	What to pick
Dev vs Client transfer	Dev is a test store that stays yours and never goes live. Client transfer is for agencies: you build a real store, then hand ownership to a client, who starts paying for a Shopify plan.	Dev
Store name	Becomes the store's permanent address, your-store-name.myshopify.com. You can rename the store later, but that address stays.	Something clear, e.g. ajmal-dev-store
Shopify plan	Which paid plan the dev store pretends to be on, so you can test that plan's features for free. Plans go up from Basic → Grow → Advanced → Plus.	Grow for most app work. Plus if you'll test Plus-only things, like checkout UI extensions on the information, shipping or payment steps, or B2B
Generate test data	Fills the store with sample products, customers and orders. It also sets up the Bogus Gateway, a fake payment provider so you can place test orders.	✅ Tick it. Your app needs orders and products to work with
Test a feature preview	Turns on Shopify features and APIs that aren't released yet, so the store behaves differently from what merchants have.	☐ Leave unticked. Use a separate store when you need a preview

Placing test orders with the Bogus Gateway

At checkout, use 1 as the card number for a successful payment, 2 for a declined one and 3 for an error. Any name, future expiry date and CVV work. This is how you trigger orders/create webhooks while testing.

One store per developer

Use a separate dev store per developer. Shared stores make webhooks and installs confusing. Dev stores are free, so make a second one (e.g. a Plus one) rather than changing your main store.

Scaffold an app

shopify app init

The first question is what kind of app to build:

>  Build a React Router app (recommended)
   Build an extension-only app

	React Router app	Extension-only app
What you get	A full web app (your own server + database) plus a folder for extensions	Only the extensions/ folder, with no server
Who hosts it	You host the server; Shopify hosts the extensions	Shopify hosts everything, so there's nothing to deploy or pay for
Admin pages in Shopify	✅ Your own pages, built with Polaris	❌ No app home pages. Only small admin extensions, like an action menu
Own backend logic, database, background jobs	✅	❌
Call your own API (e.g. FlowFlex) on events	✅ Webhooks arrive at your server	❌ No server to receive them
Theme blocks, checkout UI, Shopify Functions	✅	✅
Good for	Real products: dashboards, integrations, anything that stores data or talks to another system	Small add-ons that only change the storefront or checkout, e.g. a discount Function or a theme block

Pick React Router. Anything that connects a store to FlowFlex needs a server: it has to receive order webhooks, store which store belongs to which FlowFlex org, and show settings pages. The React Router template is the official default (it replaced the Remix template in 2025), and you can still add extensions to it at any time.

Rule of thumb

If your app needs to remember something or talk to another system, it needs a server, so use React Router. Extension-only is for apps that are pure UI or logic running inside Shopify.

The CLI will:

1. Create the project folder.
2. Create (or link) an app in your Dev Dashboard.
3. Write shopify.app.toml with the app's client_id.

Run it

cd my-app
shopify app dev

shopify app dev:

• starts your server and a tunnel, so Shopify can reach your laptop,
• updates the app's URLs to that tunnel,
• installs the app on your dev store (press p to open it),
• hot-reloads your code and your extensions.

Everyday CLI commands

Command	What it does
shopify app init	Scaffold a new app
shopify app dev	Run locally with a tunnel, hot reload and a preview
shopify app deploy	Release a new app version (config + extensions)
shopify app generate extension	Add an extension (theme, checkout, Function…)
shopify app config link	Link the project to an existing app / a new toml
shopify app config use <name>	Switch between shopify.app.<name>.toml files, e.g. staging vs prod
shopify app env show	Print the env vars (API key, secret, scopes)
shopify app info	Show which app, store and config the project is using

Project step: scaffold order-notes-notifier, run shopify app dev, and open it in your dev store.

Check yourself

1. Why does shopify app dev need a tunnel?
2. What file ties your local code to the app in the Dev Dashboard?