🌟 We are Open Source! Check out our repository on GitHub

Shopify App Development Structure

A scalable and maintainable folder structure for Shopify app development

File Structure

  • web
    • index.js
    • package.json
    • middleware
      • auth.js
      • verify-request.js
      • cors.js
    • routes
      • api
        • products.js
        • orders.js
        • customers.js
      • webhooks.js
      • auth.js
    • services
      • shopify-api.js
      • database.js
      • billing.js
    • models
      • Shop.js
      • Session.js
    • utils
      • helpers.js
      • constants.js
  • web/frontend
    • App.jsx
    • index.html
    • package.json
    • components
      • ProductList.jsx
      • Navigation.jsx
      • LoadingSpinner.jsx
    • pages
      • HomePage.jsx
      • SettingsPage.jsx
      • ProductsPage.jsx
    • hooks
      • useAuthenticatedFetch.js
      • useShopifyQuery.js
    • assets
      • styles.css
      • images
  • extensions
    • product-discount
      • shopify.extension.toml
      • src
    • checkout-ui
      • shopify.extension.toml
      • src
    • theme-app-extension
      • shopify.extension.toml
      • blocks
      • snippets
  • docs
    • api.md
    • deployment.md
  • tests
    • backend.test.js
    • frontend.test.js
  • shopify.app.toml
  • .env.example
  • README.md

Directory Structure Explanation

web/routes/api/

Organized API routes by resource type for better maintainability and scalability.

web/services/billing.js

Billing service for handling Shopify app charges and subscription management.

web/models/

Data models for representing app-specific data structures and database schemas.

frontend/hooks/

Custom React hooks for Shopify-specific functionality like authenticated API calls.

hooks/useAuthenticatedFetch.js

Custom hook for making authenticated requests to the Shopify API with proper session handling.

extensions/product-discount/

Function extension for creating custom discount logic in Shopify checkout.

extensions/checkout-ui/

Checkout UI extension for adding custom components to the Shopify checkout process.

extensions/theme-app-extension/

Theme app extension for adding app functionality directly to Shopify themes.

tests/

Test files for both backend API and frontend components to ensure app reliability.