DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Build A Shopify Embed App with VueJs, Tailwind CSS, NodeJs and Laravel
Tomisin Owolabi
Tomisin Owolabi

Posted on

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

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…

TailwindCSS Christ
Courtesy: iamaponte

Tailwind CSS is already installed!

This post walks you through the setup process.

Requirements:

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 file structure
NodeJS

PHP backend file structure
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
Enter fullscreen mode Exit fullscreen mode

Then run your localhost port.

For NodeJS:

ngrok http http://localhost:8081/
Enter fullscreen mode Exit fullscreen mode

For PHP:

ngrok http http://localhost:8000/
Enter fullscreen mode Exit fullscreen mode

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.
Create Shopify app manually
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
Enter fullscreen mode Exit fullscreen mode

For PHP:

<Ngrok https url>/authenticate
Enter fullscreen mode Exit fullscreen mode

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.

App Api
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"          
Enter fullscreen mode Exit fullscreen mode

For PHP:

SHOPIFY_API_KEY=<your api key>
SHOPIFY_API_SECRET=<your secret key>
SHOPIFY_APPBRIDGE_ENABLED=true
Enter fullscreen mode Exit fullscreen mode

Save the file and start you dev server.
For NodeJS

npm run serve:dev
Enter fullscreen mode Exit fullscreen mode

For PHP

npm run dev
Enter fullscreen mode Exit fullscreen mode

And start your PHP dev server in a new terminal.

php artisan serve
Enter fullscreen mode Exit fullscreen mode

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.

Sample shopify embed app
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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.