How can I make a non-embedded app using CLI 3 in Shopify?

[JhonLevy]

Hi There,
Im pretty new to Shopify Public app development and i started a new test app from Shopify Node.js template.
I used this the instructions from Here.

Im using CLI 3 and to Create the app i used this command:
“npm init @Shopify_77 /app@latest”

I follow all the steps and finally i have a running QR generator App.

Now i want to make the app non-embedded, i follow those steps but the app still opens in Shopify Admin:

1. Disable “Embedded” app - directly from Shopify App Setup → Embedded App Manage → Disable “Ebedded”

2. I’ve Set forceRedirect: from “true” to “false” on the AppBridgeProvider.jsx file.

I know there is the 3rd step on the server file to set “IS_EMBEDDED_APP” to “false” but in CLI 3 that is missing.

The app still redirect to embedded app and i cannot escape this iframe.

I would like to receive suggestions on ways to solve this problem, because I did not find any correct and available information about it.

Thanks !

[RobinKaith]

Hi @JhonLevy ,
Happy New Year.

For your 3rd step, follow this path in CLI 3 template:
web->shopify.js

See attached screenshot:

But this can’t resolve your concern. This will throw a session token issue. As I also want to make an non-embedded app.

Please let us know if anyone is familiar with CLI 3 and how to convert Embedded to Non-Embedded.

Thanks.

[4cardbot]

Hi @JhonLevy , @RobinKaith ,

I hope you are doing great.

I am stuck at the same issue. Were any of you able to find a solution for this?

[4cardbot]

Hi @JhonLevy , @RobinKaith ,

I hope you are doing great.

I am stuck at the same issue. Were any of you able to find a solution for this?

[Divy_tatva]

Hello @JhonLevy , @RobinKaith

Is anyone of you able to find a solution?

i am stuck at the same issue.

[4cardbot]

@Divy_tatva @JhonLevy @RobinKaith

To solve the issue, 3 steps need to be taken:

1. Disable “Embedded” app - directly from Shopify App Setup → Embedded App Manage → Disable “Ebedded”

2. set “forceRedirect: false” in shopify.js file as shown below.

3. In index.js file, remove the line:
   app.use(serveStatic(STATIC_PATH, { index: false }));

and add the code below instead:

app.use(“/*”,

shopify.validateAuthenticatedSession(),

async (_req, res, _next) => {return res.redirect(301, final_url);}

);

Also, you can delete the ‘frontend’ directory from the repo since you’ll not be displaying anything on the frontend.

[vipingarg]

Hi @4cardbot ,

I followed same steps, but this doesn’t work. It redirects me to iframe and throw error.

The application cannot be loaded, it may be misconfigured. Please contact the application author.

[danieldyrnes]

@vipingarg it worked for me after I made sure the ‘final_url’ is my destination domain, eg: dashboard.myapp.com.

Not sure if it helps, but you never know