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/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]

@vipingargit 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 🙂