How to create a non-embedded Standalone Shopify App

eddyreynoso
Tourist
5 0 2

I've been scratching my head for weeks trying to figure out the correct way to set up a non-embedded Shopify app. 

 

It seems like Shopify has removed all articles on setting up non-embedded apps and there don't seem to be any examples online. 

 

I've found the most difficult part is verifying requests from the Front End to the Custom Server. What is the correct, secure way to do this? 

 

Are there any guides that outline the exact steps to do this correctly? Code examples would be extremely helpful as well. 

 

I am using React/Nextjs and Nodejs.

Replies 9 (9)
HunkyBill
Shopify Expert
4764 54 550

An embedded App is simply an iframe element that Shopify places in the Admin. You know how iframes work right? One of the first HTML elements that we got to embed one website inside another.

Now, you want out of that. So you are now just hosting your own website. You are a non-embedded App. What is the question you have? You know how to set up a website since you probably have done that before. All the links you provide to Shopify in setting up point to your App. You choose NOT to be embedded. Now, when people access your App, they will be leaving Shopify Admin for your App. You still authenticate and render your App and all that, but not in an iframe.

In some respects, this is the easier way to go. You eliminate all the hassles of the authenticated iframe. You get to do as you please. When requests come to your App from Shopify, they are decorated the same. You get the HMAC, the shop, and the parameters. Nothing different. It is not like Shopify is going to treat your website differently because it is non-embedded, other than to not set you up inside that iframe.

Your best bet is to just spend a few minutes with a non-embedded App, do some tests, and convince yourself that it is no different than the embedded App in a sense. Shopify still sends requests to your endpoint that specify where you get to authenticate and act on those requests, and return results. 

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
eddyreynoso
Tourist
5 0 2

I understand that Shopify provides the shop, hmac, etc as query params when you first install the app as well as every time you click on the app from the admin dashboard.

Once you switch to another page, those query params disappear. 

I’m not sure what is the correct action to take with these query parameters such as whether I should store them as cookies and send them each time I make a request from my front end to my custom Nodejs server.

The process I’m having trouble with is figuring out the correct, secure way to make a request from my Nextjs front end to my Nodejs backend.

I believe there should be a middleware that verifies certain parameters. What are these parameters and how can I verify that they are correct? 

Where does my front end originally get these parameters and how do they persist on the front end?

HunkyBill
Shopify Expert
4764 54 550

You'll have to struggle with your App as any App developer would. Your front-end talks to your back-end using a session cookie if you follow the pattern of the past 20 years. The kids these days prefer JWT so you can try that. Once you establish a session, your front-end may still have to provide parameters, so that is up to you to figure out. So if Shopify sends you a shop, and a product ID to work with, in your App you'll like open a session for the Shop so the merchant does not have issues authenticating, and then you go to work doing whatever it is you do, with that ID. Sure, keep it a cookie. Or, pass it around in query params. It is a web App. You are the boss. You architect the same way 99% of any other web apps are built. Shopify is no different than any other system in this respect.

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
loganecolss
Excursionist
11 0 4

I'm having the same questions, hope anyone could provide some example code for building standalone apps.

loganecolss
Excursionist
11 0 4

Hey HunkyBill, after reading your comments I still don't get how to make the app standalone.

We create the app using the shopify cli like `shopify node create`, and without changing a line of code, just start the node server and install this dummy app on the dev store, it's displayed inside the shop admin iframe, namely it's an embedded app.

Then I followed the steps describe in the documentation (https://shopify.dev/apps/tools/app-bridge/getting-started#embed-your-app-in-the-shopify-admin), to disable the embedded app, and restart my node server and refresh the shop admin, and re-open my app again, it's still displayed inside the admin iframe which means it's still not a standalone app.

What's going on here, and the documentation is wrong? How to make the app not displayed inside the admin iframe, and open with a new tab in my browser?

juanmaptag
Tourist
10 1 4

Hi Loganecolss!

 

It seems like we both were on the same track: I have also used Shopify CLI to create a Node+React app.

 

I tried to develop an embedded app but through my revision process I realized that wouldnt be the best case: So now I am trying to un-embedd it.

 

You took the first step correctly: But next in your _app.js file you have to change the forceRedirect param to false here:

 

class MyApp extends App {
  render() {
    const { Component, pageProps, host } = this.props;
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            host: host,
            forceRedirect: false,
          }}
        >
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

 

That would prevent you from returning to the Admin embedded option... however that wouldnt be enough to make you app un-embedded as I understand that Shopify App Bridge is not to be used in non-embedded apps.

 

Have yo u manage to make some more progress with you transition to a non embedded app? Do you have some tips that could be useful?

 

Thanks! 

Obaida
New Member
1 0 2

Hi,
1. You need to set IS_EMBEDDED_APP to false from your server index.js file

2. Set forceRedirect to false from your client App.jsx file

3. The most important part

  • Go to your partners account https://partners.shopify.com/organizations
  • Select you account
  • Click on Apps
  • Click the app name
  • Click App setup
  • In the Embedded app section, click Manage
  • In the Embed your app in Shopify admin section, click Disable

 

RyanWong
New Member
3 0 0

This solved it for me. Thank you.

anusinha
Shopify Partner
2 0 0

For anyone else coming across this later, I found this example repo, which may help: https://github.com/carstenlebek/shopify-non-embedded-app-template

 

Note: I haven't used it yet, but I think the authentication example is quite straightforward.