Integrating POS UI Extensions and App Bridge to existing NextJS App

Extensions
1

I’ve read about how POS UI Extensions and App Bridge require CLI with a specific app structure. I’m looking for a little guidance to confirm whether or not my existing app with no current Shopify integration will be able to handle the CLI migration.

For context, this Shopify integration is just one feature to support Shopify sellers. I also support other kinds of sellers, and I’m trying to determine if this Shopify “feature” should really be an entirely separate app instead of migrating it to Shopify CLI.

Here is my current app structure for my NextJS App Router app:

APP_NAME
- node_modules
- .env
- public
- various config files
- app
- - all client side components, api, root layout, lib, utils, mongoose models, etc

From looking at the Shopify app structure requirements, I see files like entry.server. and root. I don’t have these. Will that be an issue? What else should I be thinking about before migrating the app to CLI?

2

Anyone from Shopify able to give some insights on this?

3

You can take a look at my open source repository that uses Next.js. If you’re in app router, it’s not all that different.

To give you a better idea of how the folder structure should look like AFTER you create an extension folder, it’s something like this:

Screenshot 2024-10-27 at 2.05.54 AM
Screenshot 2024-10-27 at 2.05.54 AM608×1562 75.2 KB
o

Another thing to note is in your shopify.app.toml you can define where your extension folder is, so the CLI is clear where your extensions are:

extension_directories = [ "./extension/extensions/*" ]
1 Like
4

Thanks @kinngh. Does “migrating” an app to CLI mean now the entire thing will be a shopify app? Or does it mean only the extension folders will be run within Shopify, and the rest of the code will still function as normal in my app (not shopify)

5

@Manuel_Maccou The Shopify CLI’s primary role is to help you build things that are specific to Shopify and that is functions and extensions. The CLI is a client that can basically help you create, test and deploy and extensions and functions. The CLI also helps you develop an embedded app using Remix although you don’t need to use it for that - there are plenty of folks who build embedded apps using other frameworks (E.g. NextJS or even non-JS frameworks such as Rails).

2 Likes
6

So I don’t have enough context to properly answer your question here - the existing Next.js build, is that connected to / integrated with Shopify at all or is that a completely different tool?

Also, just so we’re on the same page, the CLI is what’s used to configure your app to play well with Shopify and push your extensions, functions and Shopify specific configuration up to Shopify^

1 Like
7

The existing build is not connected to Shopify at all. Ideally I wouldn’t have to build two apps, one for non-Shopify merchants and another for Shopify merchants. So trying to figure out of this is possible/recommended via the CLI migration, or if having two apps is actually the right way