Shopify App Development Environment Setup Tutorial

This article will guide you through setting up a Shopify app development environment, from environment configuration and tool installation to application deployment. It incorporates the latest development frameworks to help you quickly build an efficient local development environment.

Prerequisites

1. Register a Shopify Partner Account

• Visit Shopify Partner Signup to register for a free account.
• The Partner account provides development tools, test stores, and resource support, which is the first step in development.
• Research shows that you can immediately access development store features after account creation, making testing convenient.

2. Create a Development Store

• Log in to the Shopify Partner Dashboard, navigate to “Stores” > “Development Stores”.
• Click “Create Development Store” and enter the store name and login information.
• If the account was created after April 28, 2023, the system automatically generates a quick-start development store with most features of the Advanced Shopify plan.
• Development stores are used for testing applications, limited to installing free and partner-friendly apps, and can use the Bogus Test gateway for order testing.

3. Install Required Tools

• Node.js and npm: Download Node.js, ensuring to install the LTS version for JavaScript development.
• Git: Install Git for version control, facilitating team collaboration and code tracking.
• Text Editor: Recommended to use VS Code, which supports plugins and debugging features.
• Research shows these tools are fundamental for Shopify App development, ensuring local environment compatibility with the Shopify platform.

Installation and Configuration

• Install Shopify CLI using the following command:

npm install -g @shopify/cli@latest

Verify the installation:

shopify version
3.77.1

Starting Development

Generate a New App Project

Run the following command:

shopify app init

To run this command, log in to Shopify.
User verification code: MJCS-QQRL
👉 Press any key to open the login page on your browser

Press any key in the terminal as prompted to open the browser for Shopify authentication. You won’t need to authenticate again for future project creation. After successful authentication, you’ll see:

✔ Logged in.
?  Get started building your app:

>  Build a Remix app (recommended)
   Build an extension-only app

   Press ↑↓ arrows to select, enter to confirm.

Select Remix, then choose between javascript or typescript as prompted, and select to create a new project. Enter the project name shop-demo1

✔  Build a Remix app (recommended)

?  For your Remix template, which language do you want?
✔  TypeScript

?  Create this project as a new app on Shopify?
✔  Yes, create it as a new app

?  App name:
✔  shop-demo1

╭─ info ───────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Initializing project with `npm`                                             │
│  Use the `--package-manager` flag to select a different package manager.     │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Installing dependencies with npm ...

Wait for the project initialization to complete. Upon successful creation, you’ll see:

╭─ success ────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  shop-demo1 is ready for you to build!                                       │
│                                                                              │
│  Next steps                                                                  │
│    • Run `cd shop-demo1`                                                     │
│    • For extensions, run `shopify app generate extension`                    │
│    • To see your app, run `shopify app dev`                                  │
│                                                                              │
│  Reference                                                                   │
│    • Shopify docs [1]                                                        │
│    • For an overview of commands, run `shopify app --help`                   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
[1] https://shopify.dev

Setting Up Local Development Environment

• Switch to the project directory and run:

  bash

  shopify app dev

Enter y when prompted:

? Have Shopify automatically update your app's URL in order to create a preview
  experience?

   ┃  Current app URL
   ┃  • https://example.com/
   ┃
   ┃  Current redirect URLs
   ┃  • https://example.com/api/auth

>  (y) Yes, automatically update
   (n) No, never

Wait for the project to run:

────────────────────────────────────────────────────────────────────────────────

› Press d │ toggle development store preview: ✔ on
› Press g │ open GraphiQL (Admin API) in your browser
› Press p │ preview in your browser
› Press q │ quit

Preview URL: https://shop1-demo.myshopify.com/admin/oauth/redirect_from_cli?clie
nt_id=ssss
GraphiQL URL: http://localhost:3457/graphiql

Open the following URL in your browser: https://shop1-demo.myshopify.com/admin/oauth/redirect_from_cli?clie_id=ssss This will take you to the app installation guide page.

Development and Debugging

• Use a text editor or IDE (such as VS Code) to modify code, which supports hot reloading and automatic updates upon saving.
• The CLI provides detailed logs for troubleshooting, and you can use Node.js debugging tools (like console.log) for in-depth debugging.

Using Version Control

• Initialize Git in the project directory:

  bash

  git init
  git add .
  git commit -m "Initial commit"

• Version control helps track code changes and facilitates team collaboration. Research shows this is a best practice for large projects.

Tools and Frameworks

• Shopify APIs: Use Admin API and Storefront API to add features like product and order management.
• Frameworks: Recommended to use React with Next.js or Hydrogen to optimize frontend development efficiency.
• Design System: Refer to Shopify’s Polaris Design System to ensure UI consistency.

Resources and Community Support

• Official Documentation: Visit the Shopify developer documentation at https://shopify.dev/ for detailed technical information.
• Community Support: Join the Shopify developer community at https://community.shopify.com/c/developers to exchange experiences with other developers.

Conclusion

By following these steps, you can successfully set up a Shopify App development environment and begin building and testing your application.

Related Links

• Shopify Partner Signup for Free Account
• Node.js Download (Recommended LTS Version)
• Git Download for Version Control
• VS Code Download with Plugin Support
• Shopify Partner Dashboard Management
• ngrok for Creating Temporary Public URLs
• Shopify Developer Documentation
• Shopify Developer Community
• Shopify’s Polaris Design System