Shopify App in Laravel and React - Getting Started - Nerd Platoon Shopify App in Laravel and React - Getting Started - Nerd Platoon

Shopify, a leading eCommerce platform, helps businesses of all sizes take their product online. With 500k stores running on Shopify itself, it’s clear that the eCommerce industry is booming, and it’s time to be seen. And building Shopify Apps helps boost the functionality, user experience and new features.

Shopify Apps can be created in several ways. This article will show you how to build a Shopify App with Laravel and React.

Using Laravel, we can develop web applications using an elegant syntax that streamlines common tasks. We will be using Laravel with React JS which helps to enhance the user experience and add additional features to control and manage the Shopify store

So, without delay, let’s dive into the installation of larave-react app in the shopify store.

 

Create Shopify Partner Account:

The first and foremost thing to do before starting to build any shopify app is to create a Partner Account. Creating a Partner Account is absolutely free. After creating the Partner Account, we should create a development store. Fill up the form as given in the image below and the proceed towards next step:

Building the App:

This tutorial will teach you how to create an app that merchants can access via the Shopify admin. With the app initialization command, you will generate starter code for your app and establish your development environment so that you can work on it using the Shopify CLI.

Requirements:

Once the above requirements are fulfilled, the steps mentioned below should be followed to create a shopify app:

1. Create New App

npm, yarn pnpm commands can be used to create a new shopify app.

  • Navigate to the directory where you want to create your app. Your app will be created in a new subdirectory.
  • Run one of the following commands to create a new app, and then select the language of the app template that you want to start with: either Node, PHP, or Ruby.

Choose php for your app template and then continue the process as below:

npm init @shopify/app@latest
yarn create @shopify/app
pnpm create @shopify/app

A new app is created, and Shopify CLI is installed along with all of the dependencies that you need to build Shopify apps. Shopify CLI is also added as a dependency in your app’s package.json.

The following image shows an app being successfully created in the terminal:

2. Start Local Development Server

After completion of the first step, you will notice a new folder named ‘my-first-app’. Navigate into the folder with following command:

cd my-first-app

Now let’s do some laravel setup. Please follow this link to make the setup. Set up your Laravel app

Then we will start a local server of the app with the following command:

npm run dev
yarn dev
pnpm dev

Shopify CLI walks you through the following:

  • Logging into your Shopify Partner account and, if needed, selecting a Partner organization
  • Creating an app in the Partner Dashboard, and connecting your local app files to the app
  • Storing your ngrok token, and then creating a tunnel between your local environment and the development store using ngrok

 

The following image shows a development server being started using dev:

3. Install the App on Development Store

Once the server is running, open the URL in the App URL section of the terminal output.

The URL follows the format https://[tunnel_url]?shop=[dev_store].myshopify.com&host=[host], where [host] is the base64-encoded host parameter used by App Bridge, and represents the container the app is running in.

You’ll be prompted to install the app on your development store once you open the URL.

To install the app, click Install app.

4. Add and publish products to your development store for testing

With the new app, you can automatically add products to your development store that you can use to test apps. The products must also be published to the online store channel before they can be used.

  1. From the home page of the app you just created, click Populate 5 products to add products to your development store.
  2. Go to the Products section of your Shopify admin.
  3. From your Shopify admin, go to Products.
  4. Click More actions, and then click Add available channel(s).
  5. If prompted, select Online Store and then click Make products available.

The products you selected are now published in the online store.

Now, Start building your app by populating data to test your app against, designing your user interface with Polaris, interacting with Shopify’s APIs, and configuring a webhook so that your app stays in sync with changing data.

********************************** Happy Coding **********************************