Can any one give me some guidance on the Shopify Development Paradigm?

Retired Boards Appdev Custom Storefronts
1

Hi Shopify Dev Community,

For the past 3 weeks I have been attempting to understand the “Shopify Development Paradigm”, I have

  1. completed several Partner Academy courses in App Development, and Theme development.
  2. completed a tutorial Build a Shopify App With Node and React.
  3. completed a tutorial demonstrating how a free shopify Theme ( Debute ) can be customized with ThemeKit using React
  4. currently working on a Gatsby tutorial for building a deploying a storefront.

Yet I must confess, I still feel as though I am bumping around in the dark. I am an accomplished web developer comfortable with NodeJS, React, (NextJs), coding JavaScript and Typescript, and multiple ui styling frameworks. I would like to hopefully get some feed back from the community on how Embedded App Development is performed and how Shopify StoreFront development using a JamStack is performed.

Embedded App Development:

Is there a better way to construct a local ( client) integrated development environment for developing embed apps with Shopify? Is there an a tutorial, repo, etc. demonstrating how to mock the Dashboard App Iframe in an external setup?
( I found this one, shopify-dev-frame, but it is 6 years old)

I spent an inordinate amount of time trying to suss out if there was something wrong with my ngrok set up that was making the Embed App stultifying-ly slow. I even purchased a subscription to Ngrok, creating permanent subdomains, and focused my watch in the nodemon, but this did not really improve the drag when interfacing with the embed app in the Store App dashboard. ( I am sure it is in part due to the hot module replacement, but not sure removing this capability is a good idea as it seems like it would a hinderance in the long run ) I installed the shopify-app-cli, after reading that it can help speed up app development. However, I found it to be sore lacking beyond generating some scaffolding, as there seems to be no way to get it to work with custom Ngrok subdomain. ( this definitely stung a bit as I am not out $60)

Storefront development both Theme and Pages/Views/infrastructure with a JamStack:

The tutorial/blog post I found that provides an approach to updating a theme using the Theme kit with React seems to be solely for that purpose. By that, I mean the tutorial does not delineate how ui-styling as well as the storefront infrastructure of pages, views, global state management, etc. is integrated into one unified environment. I have been searching in vain for a repo that would demonstrate a single stack for store front development using

NextJS ( page views with infrastructure, and perhaps global state (apollo client)
Custom Theme Development ( ThemeKit, using liquid templates) and ( Polaris ? if applicable)
NodeJs Koa or Express with ( GraphQL/Apollo)

Is this even possible or am I trying to fit my concept of a typical development env into Shopify development?
Can anyone offer a tutorial or repo that shows the whole stack in an integrated development environment?

1 Like
2

Hey @Streeter

Re: the JamStack question. It is a bit like putting your idea of standard development inside of the theme package. Yes, you can add React or a framework into the theme builder, but it won’t fully follow JamStack principals. I would say focus on theme development (not Polaris, this would be for apps) with a custom theme and use themekit to build and develop. Otherwise, you can consider a headless approach using the Storefront API.

Re: embedded app building, are you utilizing https://shopify.dev/tools/app-bridge ? This will help get your app setup embedded into the admin. I would also post any app development questions in the general board here: https://community.shopify.com/c/Shopify-APIs-SDKs/bd-p/shopify-apis-and-technology