How can I install my custom app in a partner account?

Shopify Apps
1

Hello Developers,

  • I’m a beginner in Shopify and trying to develop an App in Shopify, using shopify-app-template-php,

  • I have created a simple app using PHP and got a Reference from this URL .

  • I have followed all the steps from the GitHub link, but at some points, I’m stuck,

  • in Shopify admin, I see the newly created app, but when I try to install it, it was not installed,

  • so have done some R&D on it, R&D I found that I need to NGROk, so I installed NGROK, and started it,

  • now I’m confused more here, that in my custom app, there was an asking for an Updated URl to install the App.

  • so from where do I get that Updated URL, so I can install that custom app in Partner Account?

  • also I have started the NGROK, but what’s the actual use of NGROK here? during app creation from the last step,

  • there is one command npm run dev, after running this command there is nothing more processed, the command was still run and run, and I no other output I get.

  • I have attached the screenshots please help me with this.

1.png
1.png1539×773 79.9 KB

2.png
2.png1600×900 120 KB

3.png
3.png1600×900 156 KB

4.png
4.png1456×512 57.9 KB

@youssefalb
@bjorn0811

@MattHol

@sergiogallegos @SocialAutoPost

2

Hi @rushikesh93

This is Glass It , a price tracking solution that can help boost profit margins. I will try to provide help for some of your questions:

  1. from where do I get that Updated URL, so I can install that custom app in Partner Account?

  2. what’s the actual use of NGROK here?

The URL should be a domain name you registered when you’re ready to deploy to production, and it should be the entry point you setup for Shopify to interact with the server that is hosting your Shopify app. When you run ‘npm run dev’, this command uses ngrok to create a tunnel to your local computer which is considered the development environment. When you run the ‘npm run dev’ command in your Shopify PHP template project, the command also takes care of automatically creating and filling in temporary URLs that point to your app (the dev environment) in your Partner Account.

The first thing that happens when you click “Install App” is Shopify makes a request to your App URL. Shopify expects your app (pointed to by the URL) to respond a certain way, depending on various scenarios. The Shopify PHP template has built in route handlers already defined which you can see in the routes/web.php file that handle the request for different scenarios. Here are a few of the scenarios:

a) this is the first time making a request to your App’s URL, a.k.a installing your app

b) if your app has already been installed and is embedded, it must properly handle being embedded within an iframe in Shopify Admin. That means if accessed directly with your App URL in a browser, it should be re-directing to Shopify Admin since it’s embedded.

c) if your app is installed + embedded, but merchant is not logged in when they open your app, then your app (the URL) must respond letting the user know to complete the required OAuth flow

See the getting started guide for more information related to the PHP template, which handles all the above scenarios already:

https://shopify.dev/apps/auth/oauth/getting-started

When you finish developing and testing your app, you are ready to deploy the app to production. Deploying to production won’t be done using the command ‘npm run dev’ since this creates a tunnel to your local development environment. It is important to note, the ngrok tunnel and ‘npm run dev’ command take care of resolving front-end and back-end requests from the React/PHP template being served to the web. When you upload your app files to your hosting server, the hosting server will also need to resolve front-end and back-end requests made to your Shopify App.

The Shopify deployment guide recommends Fly.io or Heroku hosting providers who can make going live easier:

https://shopify.dev/apps/deployment/web

Apache Web Server or nGinx can also be used, however these hosting solutions require configuring the server to handle front-end/back-end requests properly.

Hope that helps!

1 Like
3

@glassit thanks for the detailed answer, I have read and tried to understand the flow,

now what happens when I run the ‘npm run dev’, the command was not going to the next step, it just blinked continuously, as I have attached the screenshot.

image.png
image.png1538×829 88 KB