Create our bare bones app in Laravel

As you have likely figured out by now, Shopify Apps do not live on Shopify’s servers - they are NOT like a wordpress plugin, for example, which is essentially just a bit of code that gets integrated directly into the site. No, you have to setup your application EXTERNAL to Shopify - thats what we’re going to do now.

Create a barebones Laravel App on a local server - I use Laravel Valet personally, so the first step for me is to navigate into my projects directory and type laravel new my-shopify-app

Once your app has been created, find your web routes file (web.php) and setup a dummy route for /install

Now we just need to share this route with the world. The is easy using valet, I just type valet share from the root of my project directory, and it launches ngrok - it should give you a forwarding link like https://abc123.ngrok.io (choose the https one) - to make sure working just past into browser and add /install https://abc123.ngrok.io/install.

Create a new app in your Shopify partner dashboard

Jump across to the app info tab, and make the whitelisted redirection URL(s) /auth instead of install, eg https://abc123.ngrok.io/auth. This is the url that will be redirected to AFTER installation.

Back on the main overview tab, click “create App store listing”, then “edit app submission form” (don’t worry, this won’t be public!)

Under “current listing” click “edit app submission form”. This will take you to a blank app store listing.

Find the button that says “view App listing” and click it, then click “GET” from listing page. It may ask you to confirm your development store url first)

And that should take you to your dummy install page!

Implement install route

Rather than simply say “welcome to the Install Page”, our install route is actually supposed to direct back to an installation approve page on the store owners dashboard. This all sounds a little pointless, but it actually gives our app a change to request what privileges it needs from the store. So below we will implement the install route to do its proper job.

Setup some environment variables

There are a few variables that we are going to use more that once in our application, so an easy way to manage this is to create environment variables. So open your .env file:

There is already a variable called APP_URL: Change it to your root ngrok domain

Create 2 new variables, API_KEY and SHARED_SECRET at the end of .env file. You are going to get the values of these by going to the Apps page on your partner dashboard, then going to the App info tab and scrolling down to the app credentials section.

APP_URL=https://abc123.ngrok.io
…
API_KEY=ABC123
SHARED_SECRET=XYZ789

Implement the install route

Jump back into the terminal to create a new controller, php artisan make:controller AppController

Go into web.php and update the install route to an install route for this controllerRoute::get('/install', 'AppController@install');

It passes the API key so Shopify knows which App its dealing with, the scopes so it knows what privileges are being requested, and a redirect_uri, which is where the store owner will be redirected after approving installation.

So now try clicking GET again from your (private) app store page, and see if it works! You should be taken to an install page similar to that shown in the main image.