Intalling test app on development store does not show install prompt

sangon7
New Member
2 0 0

Here's what I did so far:

 

1. I created a test store

2. I created a test app

3. I white-listed my app urls with ngrok

4. I click on "install app" on the "test on development store" section

 

After that I am supposed to get redirected to my app store and I should see the install prompt to install my app correct?

As it is stated here: install4.PNG

 

Instead, what happens is, I get redirect straight to my app's "content", meaning i never get the chance to install my app, since the prompt never appears. I'm not even able to trigger the prompt manually via https://YOURNGROKURL/auth?shop=YOURTESTSTORE.myshopify.com, since i get a 404 response (even my ngrok prompt reflects this). 

The url of the site i get redirected to is the following:

https://{myngrokurl}/?hmac=xxxxx&shop={myshopname}.myshopify.com&timestamp=xxxx

 

Can anyone please explain to me what I'm doing wrong?

 

I'm following this tutorial here:

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify

and I'm stuck every since.

 

Many thanks in advance!

0 Likes
rsfxiii
Tourist
24 0 1

Here are some basic things I'd check before attempting to install your app:

1) Ensure your app server is running (Rails, Node, Django, etc.) and is configured to allow requests from your Ngrok URL

2) Ensure your Ngrok service is running, and using port 443

3) Go to your ngrok url and make sure your app content is available locally, if it isn't, check the localhost port for your app content to hopefully find a specific error on why it's not sending that content up.

 

Hopefully one of these steps helps narrow down the issue. If not, then at least we know what's NOT wrong.

0 Likes
sangon7
New Member
2 0 0
Thank you very much for your answer. I have a node application running on port 3000, is there a difference if I use port 443? I was able to get the redirect prompt to show up and install the app on my test store. Now, when I click on the app on my test store, the frontend of my application (React) is not being embedded, rather it redirects my to the ngrok url where the content is shown. My app config on Shopify has the embed functionality checked off. Do you know why this could be?

Again, thank yo in advance!
0 Likes
underscore
Tourist
5 0 3

Remove the return statement in the server.use function from server.js and restart the servers.

Good luck!

Da2
New Member
1 0 0

Double check your server.js is same as this.  If not, make it correct and restart the server.

https://github.com/Shopify/shopify-demo-app-node-react/blob/build-your-user-interface-with-polaris-s...

0 Likes
policenauts1
Trailblazer
173 13 33

I am facing the same issue as the original poster. Whether I generate a merchant install link (FOR my development store) or click on "Test your app" and then click "Install" next to my development store, I never get the auth screen - it shows the attached image.

 

The only way I've been able to get it to work is to manually create the Oauth link for my development store as outlined in Step 2 here: https://shopify.dev/tutorials/authenticate-with-oauth#step-2-ask-for-permission

 

Screen Shot 2020-06-16 at 1.06.52 PM.png

0 Likes
Paul_vd_Dool
Shopify Partner
18 3 4

I've found this thread while searching for a solution to the second issue that the OP mentions: rather than show the app embedded, it goes to the ngrok link outside of the Shopify Admin.

I figured out it had to do with cookies. I tried Firefox and Brave, both with the same results. It worked on Chrome, however.

I allowed "all trackers and ads" for the development store after which my app was neatly embedded within the Shopify Admin.

I hope this helps anybody finding this thread.

0 Likes
YaFo
New Member
1 0 0

Remove the return statement in the server.use function from server.js and restart the servers.

Good luck!

That just saved me. Thank you.

0 Likes