A Shopify App in Laravel Pt 2 - Installation

The purpose of this article is to get us from nothing to showing a Shopify store owner the installation approve page for our app.

  1. Create our bare bones app in Laravel
  2. Create a new development store for testing
  3. Create a new App in the Shopify partner dashboard
  4. Implement the install route

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.

  1. 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
  2. Once your app has been created, find your web routes file (web.php) and setup a dummy route for /install
Route::get('/install', function () {
    return 'Welcome to the install page';
});
  1. 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 Shopify development store for testing

  1. Signup for and login into your Shopify partner account (Shopify Partner Account)
  2. Click development stores, create store
  3. Follow the prompts to create a new store (details irrelevant), and login. Thats all you need to do for now.

Create a new app in your Shopify partner dashboard

  1. Jump back into your partner dashboard, click “Apps” in the main menu, then “Create App” button
  2. App name: My Shopify App, App URL: your install route (eg https://abc123.ngrok.io/install), create app.
  3. 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.
  4. Back on the main overview tab, click “create App store listing”, then “edit app submission form” (don’t worry, this won’t be public!)
  5. Under “current listing” click “edit app submission form”. This will take you to a blank app store listing.
  6. 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:

  1. There is already a variable called APP_URL: Change it to your root ngrok domain
  2. 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

  1. Jump back into the terminal to create a new controller, php artisan make:controller AppController
  2. Go into web.php and update the install route to an install route for this controllerRoute::get('/install', 'AppController@install');
  1. Now implement this route as below
public function install(Request $request)
{
    $shop_name = $request->shop;
    $scopes = 'read_script_tags,write_script_tags';

    $url = 'https://'.$shop_name.'/admin/oauth/authorize?client_id='.env('API_KEY').'&scope='.$scopes.'&redirect_uri='.env('APP_URL').'/auth';
    return redirect($url);
}
A few comments on the above:
  • Don’t worry about the specific privileges for now
  • The url redirects to a specific url eg https://mydevelopmentshop.myshopify.com/admin/oauth/authorize, as this is where the install approve page lives.
  • 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.

Next Steps

Our next step will be handling OAuth authorisation (coming soon).