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

• shopify-app-template-node

  11 828 5.9 JavaScript
  

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.

• shopify_app

  3 1,712 9.3 Ruby

  A Rails Engine for building Shopify Apps

  

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.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• ShopifyVue

  2 18 5.2 JavaScript

  A package that generates vuejs template for building shopify apps

  

Using your terminal install ShopifyVue as a global package.

• laravel-shopify

  8 1,195 3.3 PHP

  Discontinued A full-featured Laravel package for aiding in Shopify App development

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

• localtunnel

  46 18,143 0.0 JavaScript

  expose yourself

  

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.

• PHPT

  276 37,289 10.0 C

  The PHP Interpreter

  

You’ve installed PHP and Composer for the PHP backend.

• Vue.js

  381 206,951 7.7 TypeScript

  This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

  

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.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

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.

• Laravel

  352 76,753 8.9 PHP

  Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.

  

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.

• git

  616 8,070 0.0 C

  A fork of Git containing Windows-specific patches. (by git-for-windows)

  

You’ve installed Git and can use the Git bash terminal(important for windows).

• Composer

  191 28,264 9.5 PHP

  Dependency Manager for PHP

  

You’ve installed PHP and Composer for the PHP backend.

Suggest a related project