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…

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.

Comments

[Jenish Vadaviya]

@teetomania
Oauth error invalid_request: The redirect_uri is not whitelisted


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

[Tempest Rock]

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 https://12ab-45-678-901-23.ngrok-free.app?shop=myshopify.myshopify.com. 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?

[DylanCade]

Important

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]

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

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

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