Shopify App Development Structure
A scalable and maintainable folder structure for Shopify app development
File Structure
- web
- index.js
- package.json
- middleware
- auth.js
- web/frontend
- App.jsx
- index.html
- package.json
- shopify.app.toml
- README.md
Directory Structure Explanation
web/
Backend server code for the Shopify app including API routes and middleware.
web/index.js
Main server entry point that sets up Express server and Shopify app configuration.
web/middleware/auth.js
Authentication middleware for verifying Shopify app installation and user sessions.
web/frontend/
React frontend application that runs inside the Shopify admin interface.
web/frontend/App.jsx
Main React component that serves as the entry point for the app's user interface.
shopify.app.toml
Shopify CLI configuration file defining app settings, scopes, and deployment options.