How to Build A Shopify Embed App with VueJs, Tailwind CSS, NodeJs and Laravel
Tags: vue, tailwindcss, typescript, laravel
Published: 2022-08-11 10:45:00

Building a Shopify App with anything outside [React](https://github.com/Shopify/shopify-app-template-node) or [Rails](https://github.com/Shopify/shopify_app) 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…
<figure>
![TailwindCSS Christ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7dzq58zusblak566h1q.jpg) <figcaption> Courtesy: [iamaponte](https://twitter.com/iamaponte)</figcaption>
</figure>

Tailwind CSS is already installed!

This post walks you through the setup process. 

**Requirements:**
- Shopify [partner account](https://www.shopify.com/partners) and a [development store](https://shopify.dev/apps/tools/development-stores#create-a-development-store-to-test-your-app).
- You’ve installed [NodeJs](https://nodejs.org/en/download/) 14.13.1 or higher.
- You’ve installed [PHP](https://www.php.net/) and [Composer](https://getcomposer.org/) for the PHP backend.
- You’ve installed [Npm](https://docs.npmjs.com/getting-started).
- You’ve installed [Git](https://git-scm.com/) 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](https://github.com/Digitalmvps/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](https://github.com/Shopify/shopify-app-template-node), while the PHP backend is based on [this template](https://github.com/osiset/laravel-shopify).

Navigate into your app directory and run: 

` npm install   `


You should have a file structure similar to this:
<figure>
![NodeJS file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/419o0i56i8m9en6f5c4e.JPG)<figcaption> NodeJS</figcaption>
</figure>
<figure>
![PHP backend file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbz6pu2sz1mtrtycagpg.png)<figcaption> PHP </figcaption>
</figure>

**Step 2**
We'd need a tunnel to connect the local server with Shopify. I recommend using [Ngrok](https://ngrok.com/download). You can also use [Cloudflare tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/) or [Local tunnel](https://github.com/localtunnel/localtunnel).
With your [Ngrok account](https://ngrok.com/), 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.
![Create Shopify app manually](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mgquk979zh0vjuj7oi7.png)
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.

![App Api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmd04n2wzi5ai0rjceko.png) 
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](https://github.com/osiset/laravel-shopify/wiki/Installation).

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpiiyn2w3l46dgiijza7.png)
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](https://vuejs.org/), your chosen backend language [NodeJs](https://nodejs.org/en/) or [Laravel PHP](https://laravel.com/), [Tailwind CSS](https://tailwindcss.com/)(although it can be uninstalled via npm to accommodate your desired CSS syntax), and ability to work with [Shopify’s documentation](https://shopify.dev/) based on what your app intends to do. 

Happy building!

Let me know your thoughts in the comments below.