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.


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
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

PHP backend file structure

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" 
HOST="Ngrok https url"          
Enter fullscreen mode Exit fullscreen mode

For PHP:

SHOPIFY_API_KEY=<your api key>
SHOPIFY_API_SECRET=<your secret key>
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


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 (4)

jenish_vadaviya profile image
Jenish Vadaviya • Edited

Oauth error invalid_request: The redirect_uri is not whitelisted

Image description

I double check all the URI to make it same but still facing issue with Outh

Image description

Image description

tempestrock profile image
Tempest Rock • Edited

Thanks a lot for the great article! I am really interested in developing our admin app using VueJs and Node.
Two things:
(1) I think that getting API key and API secret key doesn't happen in the Shopify partners area but in the merchant's area, correct?
(2) I followed all steps and also took the comment of @aldebaran (DylanCade) into account.
Unfortunately, in the final step 5 I don't know exactly what to do. I opened a browser and called the URL of the form This yields a ngrok message with a button 'Visit Site'. But when I click that button, I get an error message 'Oauth error invalid_request: The redirect_uri and application url must have matching hosts'. Any ideas what I'm doing wrong?

aldebaran profile image
DylanCade • Edited


Having gone through this article and spoken with one of the developers, Mr. Ayomide Akinola, there's some things I think you all ought to know.

Firstly, Mr. Akinola has told me that there is a newer version of this app that as of the time of my writing is not yet updated in the article. To install this or update it, the command is the same: npm i -g shopifyvue@1.1.11

This is important because in the current version the routing doesn't work as intended. The app still can connect to Shopify regardless, and you can do your own routing solution (I was able to delete the entire front end of files that weren't Typescript files and see a result), but this new version is faster.

ALSO, you may have to manually install nodemon after running npm i; my system didn't install it. Just do "npm i nodemon"

Tangentially, if you are having errors authenticating through Ngrok, such as an inability to find your auth token or account, you can run it in a command prompt instead of Powershell. That's the only thing that ended up working for me.

Finally, it's very important that you format your variables in .env (or .env.test) exactly as described in the article, and ideally as shown in .env.example. For example, the SHOP variable does NOT include "https://". Additionally, the values for SCOPES do not have quotes. Lastly, your HOST (the ngrok URL) needs to be in https format. Without doing these properly, you'll get an error that the callback URI is not recognized. This is because all the variables form one long URI, and if any have quotes or characters where you shouldn't, it won't work.

I also want to thank this team for a very helpful contribution to Ecommerce development. React sucks! 😝

web3made profile image

Hey @teetomania - what a fantastic tutorial you've created!

I've got everything working up until this error 'Minified React Error'
Image description

I've looked into it, but I have no idea what's causing it, any ideas?