I am developing a Shopify Embedded app using React(ts) and Express(ts). The Express backend handles data processing and provides endpoints that power features like graphs and other functionalities within the app.
Right now, the backend serves the frontend as static files, which tightly couples the two systems. I want to completely decouple the front from the back end to have them operate as separate services.
What’s the best way to fully decouple React and Express for an embedded Shopify app? Are there any Shopify-specific challenges I should keep in mind with this approach?
Hi - other devs may have advice on this from their experiences, but this is what the .dev assistant recommended:
1. Frontend and Backend Separation
Frontend: Host your React app on a static hosting service like Vercel, Netlify, or AWS S3. Ensure the app is built and deployed as a static site.
Backend: Deploy your Express server on a hosting platform like Heroku, AWS, or Fly.io. This backend will handle API requests and data processing.
2. Shopify-Specific Considerations
Embedding in Shopify Admin: Use Shopify App Bridge to ensure your app integrates seamlessly with the Shopify admin. App Bridge helps manage navigation and communication between the Shopify admin and your app.
HTTPS Requirement: Shopify requires all embedded apps to be served over HTTPS. Ensure both your frontend and backend are hosted securely.
Content Security Policy (CSP): Configure the frame-ancestors directive in your backend to allow embedding only within Shopify domains. This prevents clickjacking attacks.
OAuth Authentication: Ensure your app uses Shopify’s OAuth flow for authentication. The backend should handle token exchange and session management.
3. Routing and State Management
Use React Router for client-side routing in the frontend. Integrate it with Shopify App Bridge’s ClientRouter to synchronize navigation within the Shopify admin iframe.
Use a state management library (e.g., Redux or Context API) to manage app state and communicate with the backend via API endpoints.
4. Environment Variables
Set up environment variables for both services. For example, the frontend needs the backend’s API URL, and the backend needs Shopify API credentials.
5. Deployment
Deploy the frontend and backend separately. Update the Shopify app configuration in the Partner Dashboard to point to the frontend URL. The backend should handle API requests and webhook processing.
This post caught my eye because I am experiencing a technical roadblock with a decoupled frontend and backend solution.
The frontend of a decoupled app would be a static site, which would be requested by Shopify inside the app surface iframe. This leads to issues setting the CSP dynamically to include the authenticated shop’s domain as outlined here:
How does the static frontend know the URL of the authenticated shop to include in it’s CSP headers on initial load? This seems like a strong reason that deploying a separate frontend and backend solution is not possible.