How to Build A Shopify Embed App with VueJs, Tailwind CSS, NodeJs and Laravel

Tomisin Owolabi — Thu, 11 Aug 2022 10:45:00 +0000

Building a Shopify App with anything outside React or Rails can be daunting; you’re on your own for the most part. Since I figured it out with my crew using VueJs: we’ve decided to Open Source the template.

The template is so flexible you can either use NodeJs or Laravel PHP as your backend. And for those who love to use, and preach the gospel of Tailwind CSS…

Courtesy: iamaponte

Tailwind CSS is already installed!

This post walks you through the setup process.

Requirements:

Shopify partner account and a development store.
You’ve installed NodeJs 14.13.1 or higher.
You’ve installed PHP and Composer for the PHP backend.
You’ve installed Npm.
You’ve installed Git and can use the Git bash terminal(important for windows).

The Setup Process

Step 1
Install the template's package and create your Shopify Vue app.

Using your terminal install ShopifyVue as a global package.



npm i -g shopifyvue

Next, create your app from your terminal(ideally Git bash on windows) with one of the two available backend frameworks.



shopifyvue create "MyShopifyApp" --backend nodejs
or
shopifyvue create "MyShopifyApp" --backend php

The NodeJS backend is based on this template, while the PHP backend is based on this template.

Navigate into your app directory and run:

npm install

You should have a file structure similar to this:

NodeJS

PHP

Step 2
We'd need a tunnel to connect the local server with Shopify. I recommend using Ngrok. You can also use Cloudflare tunnel or Local tunnel.
With your Ngrok account, connect your agent to your account using the Auth token from your dashboard in your terminal.



ngrok config add-authtoken TOKEN

Then run your localhost port.

For NodeJS:



ngrok http http://localhost:8081/

For PHP:



ngrok http http://localhost:8000/

This will generate ngrok https URL for you.
Note the URL, you'll use it later.

Step 3
Create an app manually from your partner dashboard.

In the App URL section, insert the Ngrok https URL generated in step 2, and in the Allowed redirection fill as follows:
For NodeJS:



<Ngrok https url>/auth
<Ngrok https url>/auth/callback
<Ngrok https url>/auth/online

For PHP:



<Ngrok https url>/authenticate

Step 4
Now we're going to create an env file(you can edit the one that came with the installation). After creating your app on your SHopify partner dashboard, click on it to get your API keys. Copy both the API key and API secret key into your .env file.

For NodeJS:



SHOPIFY_API_KEY="api key"           
SHOPIFY_API_SECRET="api secret key" 
SCOPES=write_customers,write_draft_orders
SHOP="my-development-store.myshopify.com"                    
HOST="Ngrok https url"

For PHP:



SHOPIFY_API_KEY=<your api key>
SHOPIFY_API_SECRET=<your secret key>
SHOPIFY_APPBRIDGE_ENABLED=true

Save the file and start you dev server.
For NodeJS



npm run serve:dev

For PHP



npm run dev

And start your PHP dev server in a new terminal.



php artisan serve

Note, for your PHP app to work, you'd need to configure the database, jobs, middlewares, and publish the configurations for the Laravel Shopify package. Follow the instructions on the wiki page here.

Step 5
This is the final step.

Select a development store from within your app on your partner dashboard to install your app on. Make sure it's the same store you specified in your env file if you're using NodeJS backend.

All things being equal, you should have an image similar to the one above.

Congrats! You're all set to begin customizing your app.

PS: This post assumes prior knowledge of VueJs, your chosen backend language NodeJs or Laravel PHP, Tailwind CSS(although it can be uninstalled via npm to accommodate your desired CSS syntax), and ability to work with Shopify’s documentation based on what your app intends to do.

Happy building!

Let me know your thoughts in the comments below.

DEV Community: Tomisin Owolabi

How to Build A Shopify Embed App with VueJs, Tailwind CSS, NodeJs and Laravel

The Setup Process