├── .gitignore
├── commands
    ├── langs
    │   ├── source.txt
    │   ├── bin
    │   │   ├── php
    │   │   │   ├── .d.ts
    │   │   │   ├── webpack.mix.js
    │   │   │   ├── tsconfig.json
    │   │   │   ├── BaseService.ts
    │   │   │   ├── package.json
    │   │   │   └── welcome.blade.php
    │   │   └── nodejs
    │   │   │   ├── .env.test
    │   │   │   ├── .env.example
    │   │   │   ├── tsconfig.json
    │   │   │   ├── index.html
    │   │   │   ├── server
    │   │   │       ├── helpers
    │   │   │       │   ├── shopify.js
    │   │   │       │   ├── gdpr.js
    │   │   │       │   └── product-creator.js
    │   │   │       └── index.js
    │   │   │   ├── BaseService.ts
    │   │   │   └── package.json
    │   ├── common.js
    │   ├── nodejs.js
    │   └── php.js
    └── create.js
├── index.js
├── package.json
├── LICENSE.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/commands/langs/source.txt:
--------------------------------------------------------------------------------
1 | Hello sources


--------------------------------------------------------------------------------
/commands/langs/bin/php/.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vue/dist/vue.esm-bundler.js'
2 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/.env.test:
--------------------------------------------------------------------------------
1 | SHOPIFY_API_KEY="<shofiy app key>"
2 | SHOPIFY_API_SECRET="<shopify app secret>"
3 | BACKEND_PORT=3000
4 | HOST="<ngrok url>"
5 | SCOPES=read_products
6 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/.env.example:
--------------------------------------------------------------------------------
1 | SHOPIFY_API_KEY="456778544"
2 | SHOPIFY_API_SECRET="456432222"
3 | BACKEND_PORT=3000
4 | HOST="https://9b71-105-52.ngrok-free.app"
5 | SCOPES=read_products
6 | 


--------------------------------------------------------------------------------
/commands/langs/bin/php/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | const mix = require("laravel-mix");
 2 | 
 3 | mix.ts("resources/js/main.ts", "public/js").vue({ version: 3 });
 4 | mix.postCss("resources/js/assets/app.css", "public/css", [
 5 |   require("tailwindcss"),
 6 | ]);
 7 | 
 8 | mix.webpackConfig({
 9 |   output: {
10 |     chunkFilename: "js/chunks/[name].[chunkhash].js", // replace with your path
11 |   },
12 | });
13 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | #! /usr/bin/env node
 2 | import { program } from 'commander'
 3 | import create from './commands/create.js';
 4 | 
 5 | program.command('create <appName>')
 6 | .description("Create a VueJs template for a shopify app based on the selected backend language")
 7 | .option('-b, --backend <backend>', 'To specify the backend language create-app should use','nodejs')
 8 | .action(create);
 9 | 
10 | program.parse();
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/commands/create.js:
--------------------------------------------------------------------------------
 1 | import chalk from 'chalk'
 2 | import php from './langs/php.js'
 3 | import nodejs from './langs/nodejs.js'
 4 | 
 5 | const availbleLanguages = [
 6 | 	'php',
 7 | 	'nodejs'
 8 | ];
 9 | 
10 | export default function create (appName, {backend}) {
11 | 	if(availbleLanguages.indexOf(backend) > -1) {
12 | 		switch (backend) {
13 | 			case 'php':
14 | 				php(appName)
15 | 				break;
16 | 			case 'nodejs':
17 | 				nodejs(appName)
18 | 				break;
19 | 			default:
20 | 				break;
21 | 		}
22 | 	} else {
23 | 		console.log(chalk.bgRed(`${backend} backend is not suppoted`));
24 | 	}
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shopifyvue",
 3 |   "version": "1.1.11",
 4 |   "description": "A package that generates vuejs template for building shopify apps ",
 5 |   "main": "index.js",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "bin": {
11 |     "shopifyvue": "./index.js"
12 |   },
13 |   "keywords": [
14 |     "shopify",
15 |     "vuejs"
16 |   ],
17 |   "author": "Digitalmvps",
18 |   "license": "MIT",
19 |   "dependencies": {
20 |     "chalk": "^5.0.1",
21 |     "commander": "^9.4.0",
22 |     "fs-extra": "^10.1.0",
23 |     "shelljs": "^0.8.5"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/commands/langs/bin/php/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 | 		"target": "esnext",
 4 | 		"module": "esnext",
 5 | 		"strict": false,
 6 | 		"jsx": "preserve",
 7 | 		"importHelpers": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"moduleResolution": "node",
10 | 		"skipLibCheck": true,
11 | 		"esModuleInterop": true,
12 | 		"allowSyntheticDefaultImports": true,
13 | 		"sourceMap": true,
14 |         "noImplicitAny": false,
15 |         "strictFunctionTypes": false,
16 |         "types": [
17 |             "webpack-env"
18 |           ],
19 |           "paths": {},
20 |           "lib": [
21 |             "esnext",
22 |             "dom",
23 |             "dom.iterable",
24 |             "scripthost"
25 |           ]
26 |     },
27 |     "include": [
28 |         "resources/js/**/*"
29 |     ]
30 | }
31 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 	  "target": "esnext",
 4 | 	  "module": "esnext",
 5 | 	  "strict": true,
 6 | 	  "jsx": "preserve",
 7 | 	  "importHelpers": true,
 8 | 	  "resolveJsonModule": true,
 9 | 	  "moduleResolution": "node",
10 | 	  "skipLibCheck": true,
11 | 	  "esModuleInterop": true,
12 | 	  "allowSyntheticDefaultImports": true,
13 | 	  "sourceMap": true,
14 | 	  "baseUrl": ".",
15 | 	  "types": [
16 | 		"webpack-env",
17 | 		"jest"
18 | 	  ],
19 | 	  "paths": {
20 | 		"@/*": [
21 | 		  "src/*"
22 | 		]
23 | 	  },
24 | 	  "lib": [
25 | 		"esnext",
26 | 		"dom",
27 | 		"dom.iterable",
28 | 		"scripthost"
29 | 	  ]
30 | 	},
31 | 	"include": [
32 | 	  "src/**/*.ts",
33 | 	  "src/**/*.tsx",
34 | 	  "src/**/*.vue",
35 | 	  "tests/**/*.ts",
36 | 	  "tests/**/*.tsx"
37 | 	],
38 | 	"exclude": [
39 | 	  "node_modules"
40 | 	],
41 | 	"files": [
42 | 	  ".d.ts"
43 |   ]
44 |   }


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vue + TS</title>
 8 |   </head>
 9 |   <body>
10 | 	<div id="app">
11 | 		<App/>
12 | 	</div>
13 | 	<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
14 |     <script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script>
15 |     <script>
16 |     var AppBridge = window['app-bridge'];
17 |     var AppBridgeUtils = window['app-bridge-utils'];
18 |     var actions = window['app-bridge'].actions;
19 |  
20 | 	const params = new Proxy(new URLSearchParams(window.location.search), {
21 | 		get: (searchParams, prop) => searchParams.get(prop),
22 | 	  });
23 | 
24 |    var createApp = AppBridge.default;
25 |    window.shopifyApp = createApp({
26 |     apiKey: 'env.apiKey',
27 |     host: params.host
28 |    });
29 |     </script>
30 |    
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Digitalmvps
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/commands/langs/common.js:
--------------------------------------------------------------------------------
 1 | import chalk from 'chalk'
 2 | import shell from 'shelljs';
 3 | import fse from 'fs-extra';
 4 | import { fileURLToPath } from 'url';
 5 | import { dirname } from 'path';
 6 | 
 7 | let fullAppDir = '';
 8 | const __filename = fileURLToPath(import.meta.url);
 9 | const __dirname = dirname(__filename);
10 | const currentDir = shell.exec('pwd',{silent:true}).stdout;
11 | 
12 | const setAppName = (appName) => {
13 | 	fullAppDir =  currentDir.substring(0, currentDir.length - 1) + `/${appName}`;
14 | 
15 | 	var strFirstTwo = fullAppDir.substring(0,2);
16 | 
17 | 	// for windows
18 | 	if(strFirstTwo == '/c') {
19 | 		fullAppDir = 'c:' + fullAppDir.substring(2);
20 | 	}
21 | }
22 | 
23 | const infoMessage = (msg) => {
24 | 	console.log(chalk.bgBlue(msg))
25 | }
26 | 
27 | const waitMessage = (msg) => {
28 | 	console.log(chalk.bgMagenta(msg))
29 | }
30 | 
31 | const errorMessage = (msg) => {
32 | 	console.log(chalk.bgRed(msg))
33 | }
34 | 
35 | const successMessage = (msg) => {
36 | 	console.log(chalk.bgGreen(msg))
37 | }
38 | 
39 | const copyFileOrFolder = (source, destination, useRootDir = true, isfolder = false) => {
40 | 	shell.cp(`${isfolder ? '-r' : '-f'}`,` ${ useRootDir ? __dirname + source : '' + source}`, `${fullAppDir + '/' + destination}`)
41 | }
42 | 
43 | export {
44 | 	infoMessage,
45 | 	errorMessage,
46 | 	successMessage,
47 | 	copyFileOrFolder,
48 | 	setAppName,
49 | 	waitMessage,
50 | 	fullAppDir,
51 | 	__dirname
52 | }


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/server/helpers/shopify.js:
--------------------------------------------------------------------------------
 1 | const { BillingInterval, LATEST_API_VERSION } = require("@shopify/shopify-api");
 2 | const { shopifyApp } = require("@shopify/shopify-app-express");
 3 | const {
 4 |   SQLiteSessionStorage,
 5 | } = require("@shopify/shopify-app-session-storage-sqlite");
 6 | const { restResources } = require("@shopify/shopify-api/rest/admin/2023-04");
 7 | 
 8 | const DB_PATH = `${process.cwd()}/database.sqlite`;
 9 | 
10 | // The transactions with Shopify will always be marked as test transactions, unless NODE_ENV is production.
11 | // See the ensureBilling helper to learn more about billing in this template.
12 | const billingConfig = {
13 |   "My Shopify One-Time Charge": {
14 |     // This is an example configuration that would do a one-time charge for $5 (only USD is currently supported)
15 |     amount: 5.0,
16 |     currencyCode: "USD",
17 |     interval: BillingInterval.OneTime,
18 |   },
19 | };
20 | 
21 | const shopify = shopifyApp({
22 |   api: {
23 |     apiVersion: LATEST_API_VERSION,
24 |     restResources,
25 |     billing: undefined, // or replace with billingConfig above to enable example billing
26 |   },
27 |   auth: {
28 |     path: "/api/auth",
29 |     callbackPath: "/api/auth/callback",
30 |   },
31 |   webhooks: {
32 |     path: "/api/webhooks",
33 |   },
34 |   // This should be replaced with your preferred storage strategy
35 |   sessionStorage: new SQLiteSessionStorage(DB_PATH),
36 | });
37 | 
38 | module.exports = shopify;
39 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/BaseService.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
 3 | import { API_URL } from "../../common/constants";
 4 | import { getSessionToken } from '@shopify/app-bridge-utils';
 5 | 
 6 | export class BaseApiService {
 7 |   private readonly baseUrl = API_URL;
 8 |   public axiosInstance: AxiosInstance;
 9 |   private config: AxiosRequestConfig;
10 |   resource;
11 | 
12 |   constructor(resource: string) {
13 |     if (!resource) throw new Error("Resource is not provided");
14 |     this.resource = resource;
15 | 
16 |     this.config = {
17 |       baseURL: this.baseUrl,
18 |     };
19 | 
20 | 	this.axiosInstance = axios.create(this.config)
21 | 
22 | 	// auth token
23 | 	this.axiosInstance.interceptors.request.use(function (config : any) {
24 | 		   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
25 | 		  // @ts-ignore
26 | 	  return getSessionToken(window.shopifyApp) // requires a Shopify App Bridge instance
27 | 		  .then((token) => {
28 | 			  // Append your request headers with an authenticated token
29 | 			  config.headers.Authorization = `Bearer ${token}`
30 | 			  return config
31 | 		  })
32 | 	})
33 |   }
34 | 
35 |   public getUrl(id = ""): string {
36 |     return id ? `/${this.resource}/${id}` : `/${this.resource}`;
37 |   }
38 | 
39 |   public handleErrors(err: unknown): void {
40 |     // Note: here you may want to add your errors handling
41 |     console.log({ message: "Errors is handled here", err });
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/commands/langs/bin/php/BaseService.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
 3 | import { API_URL } from '../../common/constants'
 4 | import { getSessionToken } from '@shopify/app-bridge-utils'
 5 | 
 6 | export class BaseApiService {
 7 |   private readonly baseUrl = API_URL
 8 |   public axiosInstance: AxiosInstance
 9 |   private config: AxiosRequestConfig
10 |   resource
11 | 
12 |   constructor(resource: string) {
13 |     if (!resource) throw new Error('Resource is not provided')
14 |     this.resource = resource
15 | 
16 |     this.config = {
17 |       baseURL: this.baseUrl,
18 |     }
19 | 
20 |     this.axiosInstance = axios.create(this.config)
21 | 
22 |     // auth token
23 |     this.axiosInstance.interceptors.request.use(function (config: any) {
24 |       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
25 |       // @ts-ignore
26 |       return getSessionToken(window.shopifyApp) // requires a Shopify App Bridge instance
27 |         .then((token) => {
28 |           // Append your request headers with an authenticated token
29 |           config.headers.Authorization = `Bearer ${token}`
30 |           return config
31 |         })
32 |     })
33 |   }
34 | 
35 |   public getUrl(id = ''): string {
36 |     return id ? `/${this.resource}/${id}` : `/${this.resource}`
37 |   }
38 | 
39 |   public handleErrors(err: unknown): void {
40 |     // Note: here you may want to add your errors handling
41 |     console.log({ message: 'Errors is handled here', err })
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/commands/langs/bin/php/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "scripts": {
 4 |         "dev": "npm run development",
 5 |         "development": "mix",
 6 |         "watch": "mix watch",
 7 |         "watch-poll": "mix watch -- --watch-options-poll=1000",
 8 |         "hot": "mix watch --hot",
 9 |         "prod": "npm run production",
10 |         "production": "mix --production"
11 |     },
12 |     "devDependencies": {
13 |         "@types/lodash-es": "^4.17.5",
14 |         "@types/webpack-env": "^1.16.2",
15 |         "@typescript-eslint/eslint-plugin": "^4.31.2",
16 |         "@typescript-eslint/parser": "^4.31.2",
17 |         "axios": "^0.21.4",
18 |         "eslint": "^7.32.0",
19 |         "eslint-config-prettier": "^8.3.0",
20 |         "eslint-config-standard": "^16.0.3",
21 |         "eslint-plugin-import": "^2.24.2",
22 |         "eslint-plugin-no-loops": "^0.3.0",
23 |         "eslint-plugin-node": "^11.1.0",
24 |         "eslint-plugin-promise": "^5.1.0",
25 |         "eslint-plugin-vue": "^7.20.0",
26 |         "laravel-mix": "6.0.29",
27 |         "lodash": "^4.17.19",
28 |         "postcss": "^8.1.14",
29 |         "prettier": "2.4.1",
30 |         "ts-loader": "^9.2.5",
31 |         "typescript": "^4.4.2"
32 |     },
33 |     "dependencies": {
34 |         "@shopify/app-bridge-utils": "^3.0.1",
35 |         "@tailwindcss/aspect-ratio": "^0.2.1",
36 |         "@tailwindcss/forms": "^0.3.3",
37 |         "@tailwindcss/line-clamp": "^0.2.1",
38 |         "@tailwindcss/typography": "^0.4.1",
39 |         "@ts-stack/markdown": "^1.4.0",
40 |         "@types/vue-moment": "^4.0.3",
41 |         "@vue/compiler-sfc": "^3.2.11",
42 |         "lodash-es": "^4.17.21",
43 |         "moment": "^2.29.1",
44 |         "tailwindcss": "^2.2.15",
45 |         "vue": "^3.2.11",
46 |         "vue-automatic-router": "^2.0.1",
47 |         "vue-loader": "^16.5.0",
48 |         "vue-meta": "^3.0.0-alpha.7",
49 |         "vue-router": "4",
50 |         "vuex": "^4.0.2"
51 |     }
52 | }


--------------------------------------------------------------------------------
/commands/langs/bin/php/welcome.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('shopify-app::layouts.default')
 2 | 
 3 | @section('content')
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 | 
 7 | <head>
 8 |     <meta charset="UTF-8">
 9 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
11 |     <link rel="stylesheet" type="text/css" href="/css/line-awesome.min.css">
12 |     <link href="{{ asset('css/app.css?v=0.22') }}" rel="stylesheet">
13 |     <title>App Name</title>
14 | </head>
15 | 
16 | <body>
17 |     <div id="app">
18 |         <App />
19 |     </div>
20 |     @if (\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled'))
21 |     <script
22 |         src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@' . config('shopify-app.appbridge_version') : '' }}">
23 |     </script>
24 |     <script
25 |         src="https://unpkg.com/@shopify/app-bridge-utils{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@' . config('shopify-app.appbridge_version') : '' }}">
26 |     </script>
27 |     <script @if (\Osiset\ShopifyApp\Util::getShopifyConfig('turbo_enabled')) data-turbolinks-eval="false" @endif>
28 |         var AppBridge = window['app-bridge'];
29 |                 var actions = AppBridge.actions;
30 |                 var createApp = AppBridge.default;
31 |                 window.shopifyApp = createApp({
32 |                     apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', $shopDomain ?? Auth::user()->name) }}",
33 |                     shopOrigin: "{{ $shopDomain ?? Auth::user()->name }}",
34 |                     host: "{{ \Request::get('host') }}",
35 |                     forceRedirect: true,
36 |                 });
37 |     </script>
38 | 
39 |     @include('shopify-app::partials.token_handler')
40 |     @include('shopify-app::partials.flash_messages')
41 |     @endif
42 |     <script src="{{ asset('js/main.js?v=0.01') }}"></script>
43 | </body>
44 | 
45 | </html>
46 | @endsection
47 | 
48 | @section('scripts')
49 | @parent
50 | @endsection


--------------------------------------------------------------------------------
/commands/langs/nodejs.js:
--------------------------------------------------------------------------------
 1 | import shell from "shelljs";
 2 | import {
 3 |   infoMessage,
 4 |   copyFileOrFolder,
 5 |   successMessage,
 6 |   fullAppDir,
 7 |   setAppName,
 8 |   waitMessage,
 9 | } from "./common.js";
10 | 
11 | export default function nodejs(appName) {
12 |   setAppName(appName);
13 |   if (!shell.which("git")) {
14 |     shell.echo("Sorry, this script requires git");
15 |     shell.exit(1);
16 |   } else {
17 |     // clone vue-typescript-template
18 |     infoMessage("Cloning vue-typescript-template");
19 |     shell.exec(
20 |       `git clone https://github.com/Doctordrayfocus/vue-typescript-template.git ${appName}`
21 |     );
22 | 
23 |     // configuring template
24 |     infoMessage("configuring template");
25 | 
26 |     // update package.json
27 |     copyFileOrFolder("/bin/nodejs/package.json", "package.json");
28 | 
29 |     // update tsconfig.json
30 |     copyFileOrFolder("/bin/nodejs/tsconfig.json", "tsconfig.json");
31 | 
32 |     // update index.html
33 |     copyFileOrFolder("/bin/nodejs/index.html", "public/index.html");
34 | 
35 |     // update .env.example
36 |     copyFileOrFolder("/bin/nodejs/.env.example", ".env.example");
37 | 
38 |     // update .env.test
39 |     copyFileOrFolder("/bin/nodejs/.env.test", ".env.test");
40 | 
41 |     // update BaseService.ts
42 |     copyFileOrFolder(
43 |       "/bin/nodejs/BaseService.ts",
44 |       "src/services/common/BaseService.ts"
45 |     );
46 | 
47 |     // create server files
48 |     copyFileOrFolder("/bin/nodejs/server", "server", true, true);
49 | 
50 |     // install packages
51 |     infoMessage("Installing packages");
52 |     waitMessage("Please Wait");
53 | 
54 |     // remove package-lock.json
55 |     shell.exec(`cd ${fullAppDir} && rm package-lock.json`);
56 | 
57 |     // remove .git file
58 |     shell.exec(`cd ${fullAppDir} && rm -rf .git`);
59 | 
60 |     successMessage("Template generated!");
61 |     console.log(`change directory to '${appName}'`);
62 |     console.log(` `);
63 |     console.log(`Run 'npm install'`);
64 |     console.log(` `);
65 |     console.log(`Add a .env file`);
66 |     console.log(` `);
67 |     console.log(`then, run:`);
68 |     infoMessage("npm run start:dev");
69 |     console.log(`To start your developement server`);
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-typescript-template",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit",
 9 |     "test:e2e": "vue-cli-service test:e2e",
10 |     "lint": "vue-cli-service lint",
11 |     "start:dev": "npm run build && cross-env NODE_ENV=development nodemon server/index.js --watch ./server",
12 |     "start": "npm run build && cross-env NODE_ENV=production node server/index.js"
13 |   },
14 |   "dependencies": {
15 |     "@shopify/shopify-api": "^7.0.0",
16 |     "@shopify/shopify-app-express": "^2.1.0",
17 |     "@shopify/shopify-app-session-storage-sqlite": "^1.2.1",
18 |     "@tailwindcss/line-clamp": "^0.3.0",
19 |     "@tailwindcss/typography": "^0.5.0",
20 |     "axios": "^0.27.2",
21 |     "compression": "^1.7.4",
22 |     "cookie-parser": "^1.4.6",
23 |     "cross-env": "^7.0.3",
24 |     "dotenv": "^16.0.0",
25 |     "express": "^4.18.1",
26 |     "graphql": "^16.5.0",
27 |     "lodash": "^4.17.21",
28 |     "moment": "^2.29.1",
29 |     "serve-static": "^1.14.1",
30 |     "vue": "^3.2.21",
31 |     "vue-meta": "^3.0.0-alpha.7",
32 |     "vue-router": "^4.0.12",
33 |     "vuex": "^4.0.2"
34 |   },
35 |   "devDependencies": {
36 |     "@tailwindcss/postcss7-compat": "^2.2.17",
37 |     "@types/jest": "^27.0.2",
38 |     "@types/lodash": "^4.14.178",
39 |     "@typescript-eslint/eslint-plugin": "^5.6.0",
40 |     "@typescript-eslint/parser": "^5.6.0",
41 |     "@vue/cli-plugin-babel": "~5.0.0-rc.1",
42 |     "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
43 |     "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
44 |     "@vue/cli-plugin-router": "~5.0.0-rc.1",
45 |     "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
46 |     "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
47 |     "@vue/cli-service": "~5.0.0-rc.1",
48 |     "@vue/eslint-config-typescript": "^9.1.0",
49 |     "@vue/test-utils": "^2.0.0-rc.16",
50 |     "@vue/vue3-jest": "^27.0.0-alpha.3",
51 |     "autoprefixer": "^10.4.2",
52 |     "babel-jest": "^27.3.1",
53 |     "cypress": "^8.7.0",
54 |     "eslint": "^8.4.1",
55 |     "eslint-plugin-vue": "^8.2.0",
56 |     "jest": "^27.3.1",
57 |     "postcss": "^8.4.5",
58 |     "sass-loader": "^13.0.2",
59 |     "tailwindcss": "^3.0.17",
60 |     "ts-jest": "^27.0.7",
61 |     "typescript": "^4.3.5"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/commands/langs/php.js:
--------------------------------------------------------------------------------
 1 | import shell from "shelljs";
 2 | import {
 3 |   infoMessage,
 4 |   fullAppDir,
 5 |   copyFileOrFolder,
 6 |   successMessage,
 7 |   waitMessage,
 8 |   setAppName,
 9 | } from "./common.js";
10 | 
11 | export default function php(appName) {
12 |   setAppName(appName);
13 |   if (!shell.which("composer")) {
14 |     shell.echo("Sorry, this script requires composer");
15 |     shell.exit(1);
16 |   } else {
17 |     // install laravel 8
18 |     infoMessage("Installing laravel");
19 |     shell.exec(`composer create-project laravel/laravel:^8.0 ${appName}`);
20 | 
21 |     // clone vue-typescript-template
22 |     infoMessage("Cloning vue-typescript-template");
23 |     shell.exec(
24 |       `git clone https://github.com/Doctordrayfocus/vue-typescript-template.git ${appName}/temp`
25 |     );
26 | 
27 |     // configuring template
28 |     infoMessage("Configuring template");
29 | 
30 |     // remove scripts folder
31 |     shell.rm("-rf", `${fullAppDir}/resources/js`);
32 | 
33 |     // set script files
34 |     copyFileOrFolder(`${fullAppDir}/temp/src/.`, "resources/js", false, true);
35 | 
36 |     // update welcome.blade.php
37 |     copyFileOrFolder(
38 |       "/bin/php/welcome.blade.php",
39 |       "resources/views/welcome.blade.php"
40 |     );
41 | 
42 |     // update BaseService.ts
43 |     copyFileOrFolder(
44 |       "/bin/php/BaseService.ts",
45 |       "resources/js/services/common/BaseService.ts"
46 |     );
47 | 
48 |     // update package.json
49 |     copyFileOrFolder("/bin/php/package.json", "package.json");
50 | 
51 |     // update webpack.mix.js
52 |     copyFileOrFolder("/bin/php/webpack.mix.js", "webpack.mix.js");
53 | 
54 |     // copy tsconfig.json
55 |     copyFileOrFolder("/bin/php/tsconfig.json", "tsconfig.json");
56 | 
57 |     // copy .d.ts
58 |     copyFileOrFolder("/bin/php/.d.ts", ".d.ts");
59 | 
60 |     // remove redundant files
61 |     shell.rm("-rf", `${fullAppDir}/temp`);
62 | 
63 |     // install laravel-shopfiy package
64 |     infoMessage("Installing laravel-shopify package");
65 |     waitMessage("Please Wait");
66 |     shell.exec(
67 |       `composer require kyon147/laravel-shopify --working-dir=${fullAppDir}`
68 |     );
69 | 
70 |     successMessage("Template generated!");
71 |     console.log(`change directory to '${appName}'`);
72 |     console.log(` `);
73 |     console.log(`Run 'npm install'`);
74 |     console.log(` `);
75 |     console.log(`Then run 'npm run watch'`);
76 |     console.log(`To start your developement server`);
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/server/index.js:
--------------------------------------------------------------------------------
 1 | // // @ts-check
 2 | const { join } = require("path");
 3 | const express = require("express");
 4 | const { readFileSync } = require("fs");
 5 | const serveStatic = require("serve-static");
 6 | const fs = require("fs");
 7 | 
 8 | require("dotenv/config");
 9 | 
10 | const shopify = require("./helpers/shopify.js");
11 | const { productCreator } = require("./helpers/product-creator.js");
12 | const GDPRWebhookHandlers = require("./helpers/gdpr.js");
13 | 
14 | const PORT = parseInt(process.env.BACKEND_PORT || process.env.PORT, 10);
15 | 
16 | const STATIC_PATH = `${process.cwd()}/dist`;
17 | 
18 | const app = express();
19 | 
20 | // Set up Shopify authentication and webhook handling
21 | app.get(shopify.config.auth.path, shopify.auth.begin());
22 | app.get(
23 |   shopify.config.auth.callbackPath,
24 |   shopify.auth.callback(),
25 |   shopify.redirectToShopifyOrAppRoot()
26 | );
27 | app.post(
28 |   shopify.config.webhooks.path,
29 |   shopify.processWebhooks({ webhookHandlers: GDPRWebhookHandlers })
30 | );
31 | 
32 | app.use("/api/*", shopify.validateAuthenticatedSession());
33 | 
34 | app.use(express.json());
35 | 
36 | app.get("/api/products/count", async (_req, res) => {
37 |   const countData = await shopify.api.rest.Product.count({
38 |     session: res.locals.shopify.session,
39 |   });
40 |   res.status(200).send(countData);
41 | });
42 | 
43 | app.get("/api/products/create", async (_req, res) => {
44 |   let status = 200;
45 |   let error = null;
46 | 
47 |   try {
48 |     await productCreator(res.locals.shopify.session);
49 |   } catch (e) {
50 |     console.log(`Failed to process products/create: ${e.message}`);
51 |     status = 500;
52 |     error = e.message;
53 |   }
54 |   res.status(status).send({ success: status === 200, error });
55 | });
56 | 
57 | app.use(shopify.cspHeaders());
58 | app.use(serveStatic(STATIC_PATH, { index: false }));
59 | 
60 | // add api key to index.html
61 | function readWriteSync(filePath) {
62 |   var data = fs.readFileSync(`${process.cwd()}/${filePath}`, "utf-8");
63 | 
64 |   var newValue = data.replace("env.apiKey", `${process.env.SHOPIFY_API_KEY}`);
65 | 
66 |   fs.writeFileSync(`${process.cwd()}/${filePath}`, newValue, "utf-8");
67 | }
68 | 
69 | readWriteSync("/dist/index.html");
70 | 
71 | app.use("/*", shopify.ensureInstalledOnShop(), async (_req, res, _next) => {
72 |   return res
73 |     .status(200)
74 |     .set("Content-Type", "text/html")
75 |     .send(readFileSync(join(STATIC_PATH, "index.html")));
76 | });
77 | 
78 | app.listen(PORT);
79 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/server/helpers/gdpr.js:
--------------------------------------------------------------------------------
 1 | const { DeliveryMethod } = require("@shopify/shopify-api");
 2 | 
 3 | const gdpr = {
 4 |   /**
 5 |    * Customers can request their data from a store owner. When this happens,
 6 |    * Shopify invokes this webhook.
 7 |    *
 8 |    * https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#customers-data_request
 9 |    */
10 |   CUSTOMERS_DATA_REQUEST: {
11 |     deliveryMethod: DeliveryMethod.Http,
12 |     callbackUrl: "/api/webhooks",
13 |     callback: async (topic, shop, body, webhookId) => {
14 |       const payload = JSON.parse(body);
15 |       // Payload has the following shape:
16 |       // {
17 |       //   "shop_id": 954889,
18 |       //   "shop_domain": "{shop}.myshopify.com",
19 |       //   "orders_requested": [
20 |       //     299938,
21 |       //     280263,
22 |       //     220458
23 |       //   ],
24 |       //   "customer": {
25 |       //     "id": 191167,
26 |       //     "email": "john@example.com",
27 |       //     "phone": "555-625-1199"
28 |       //   },
29 |       //   "data_request": {
30 |       //     "id": 9999
31 |       //   }
32 |       // }
33 |     },
34 |   },
35 | 
36 |   /**
37 |    * Store owners can request that data is deleted on behalf of a customer. When
38 |    * this happens, Shopify invokes this webhook.
39 |    *
40 |    * https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#customers-redact
41 |    */
42 |   CUSTOMERS_REDACT: {
43 |     deliveryMethod: DeliveryMethod.Http,
44 |     callbackUrl: "/api/webhooks",
45 |     callback: async (topic, shop, body, webhookId) => {
46 |       const payload = JSON.parse(body);
47 |       // Payload has the following shape:
48 |       // {
49 |       //   "shop_id": 954889,
50 |       //   "shop_domain": "{shop}.myshopify.com",
51 |       //   "customer": {
52 |       //     "id": 191167,
53 |       //     "email": "john@example.com",
54 |       //     "phone": "555-625-1199"
55 |       //   },
56 |       //   "orders_to_redact": [
57 |       //     299938,
58 |       //     280263,
59 |       //     220458
60 |       //   ]
61 |       // }
62 |     },
63 |   },
64 | 
65 |   /**
66 |    * 48 hours after a store owner uninstalls your app, Shopify invokes this
67 |    * webhook.
68 |    *
69 |    * https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#shop-redact
70 |    */
71 |   SHOP_REDACT: {
72 |     deliveryMethod: DeliveryMethod.Http,
73 |     callbackUrl: "/api/webhooks",
74 |     callback: async (topic, shop, body, webhookId) => {
75 |       const payload = JSON.parse(body);
76 |       // Payload has the following shape:
77 |       // {
78 |       //   "shop_id": 954889,
79 |       //   "shop_domain": "{shop}.myshopify.com"
80 |       // }
81 |     },
82 |   },
83 | };
84 | 
85 | module.exports = gdpr;
86 | 


--------------------------------------------------------------------------------
/commands/langs/bin/nodejs/server/helpers/product-creator.js:
--------------------------------------------------------------------------------
  1 | const { GraphqlQueryError } = require("@shopify/shopify-api");
  2 | const shopify = require("./shopify.js");
  3 | 
  4 | const ADJECTIVES = [
  5 |   "autumn",
  6 |   "hidden",
  7 |   "bitter",
  8 |   "misty",
  9 |   "silent",
 10 |   "empty",
 11 |   "dry",
 12 |   "dark",
 13 |   "summer",
 14 |   "icy",
 15 |   "delicate",
 16 |   "quiet",
 17 |   "white",
 18 |   "cool",
 19 |   "spring",
 20 |   "winter",
 21 |   "patient",
 22 |   "twilight",
 23 |   "dawn",
 24 |   "crimson",
 25 |   "wispy",
 26 |   "weathered",
 27 |   "blue",
 28 |   "billowing",
 29 |   "broken",
 30 |   "cold",
 31 |   "damp",
 32 |   "falling",
 33 |   "frosty",
 34 |   "green",
 35 |   "long",
 36 | ];
 37 | 
 38 | const NOUNS = [
 39 |   "waterfall",
 40 |   "river",
 41 |   "breeze",
 42 |   "moon",
 43 |   "rain",
 44 |   "wind",
 45 |   "sea",
 46 |   "morning",
 47 |   "snow",
 48 |   "lake",
 49 |   "sunset",
 50 |   "pine",
 51 |   "shadow",
 52 |   "leaf",
 53 |   "dawn",
 54 |   "glitter",
 55 |   "forest",
 56 |   "hill",
 57 |   "cloud",
 58 |   "meadow",
 59 |   "sun",
 60 |   "glade",
 61 |   "bird",
 62 |   "brook",
 63 |   "butterfly",
 64 |   "bush",
 65 |   "dew",
 66 |   "dust",
 67 |   "field",
 68 |   "fire",
 69 |   "flower",
 70 | ];
 71 | 
 72 | const DEFAULT_PRODUCTS_COUNT = 5;
 73 | const CREATE_PRODUCTS_MUTATION = `
 74 |   mutation populateProduct($input: ProductInput!) {
 75 |     productCreate(input: $input) {
 76 |       product {
 77 |         id
 78 |       }
 79 |     }
 80 |   }
 81 | `;
 82 | 
 83 | const productCreator = async function (
 84 |   session,
 85 |   count = DEFAULT_PRODUCTS_COUNT
 86 | ) {
 87 |   const client = new shopify.api.clients.Graphql({ session });
 88 | 
 89 |   try {
 90 |     for (let i = 0; i < count; i++) {
 91 |       await client.query({
 92 |         data: {
 93 |           query: CREATE_PRODUCTS_MUTATION,
 94 |           variables: {
 95 |             input: {
 96 |               title: `${randomTitle()}`,
 97 |               variants: [{ price: randomPrice() }],
 98 |             },
 99 |           },
100 |         },
101 |       });
102 |     }
103 |   } catch (error) {
104 |     if (error instanceof GraphqlQueryError) {
105 |       throw new Error(
106 |         `${error.message}\n${JSON.stringify(error.response, null, 2)}`
107 |       );
108 |     } else {
109 |       throw error;
110 |     }
111 |   }
112 | };
113 | 
114 | function randomTitle() {
115 |   const adjective = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
116 |   const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)];
117 |   return `${adjective} ${noun}`;
118 | }
119 | 
120 | function randomPrice() {
121 |   return Math.round((Math.random() * 10 + Number.EPSILON) * 100) / 100;
122 | }
123 | module.exports = {
124 |   productCreator,
125 |   DEFAULT_PRODUCTS_COUNT,
126 |   CREATE_PRODUCTS_MUTATION,
127 | };
128 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ShopifyVue
  2 | ShopifyVue helps you generate VueJs template to build shopify embed apps. It allows you to select your backend language, and handles its setup for you. 
  3 | 
  4 | The VueJs template generated has a Vue3 + VueCLI + Typescript setup, with built-in NuxtJs like features such as automatic route discovery, page layout and so on.
  5 | 
  6 | ## Features
  7 | - Multi-language backend support (NodeJs,PHP)
  8 | - Shopify AppBridge Authentication
  9 | - Vue3 + VueCLI + Typescript
 10 | - Automatic Route Discovery
 11 | - Automatic Layout System
 12 | 
 13 | ## Usage
 14 | ### Install
 15 | Install ShopifyVue as a global package
 16 | ```
 17 | npm i -g shopifyvue
 18 | ```
 19 | 
 20 | ### Create a new project
 21 | Note: We recommend using Git bash terminal on Windows.
 22 | 
 23 | To create a new project, you can specify the backend language ShopifyVue should use by using `shopifyvue create "MyShopifyApp" --backend <language>`.
 24 | 
 25 | For NodeJs
 26 | ```
 27 | shopifyvue create "MyShopifyApp" --backend nodejs
 28 | ```
 29 | 
 30 | For PHP
 31 | ```
 32 | shopifyvue create "MyShopifyApp" --backend php
 33 | ```
 34 | 
 35 | Then Change directory to your new shopify app folder and run 
 36 | ```
 37 | npm install
 38 | ```
 39 | 
 40 | ### Setup
 41 | 
 42 | #### NodeJs
 43 | The NodeJs template generated is an extension of [Shopify's NodeJs Template](https://github.com/Shopify/shopify-app-template-node)
 44 | - Add `.env` file to your project root folder
 45 | ```
 46 | SHOPIFY_API_KEY={api key}           # Your API key
 47 | SHOPIFY_API_SECRET={api secret key} # Your API secret key
 48 | BACKEND_PORT={server port e.g 3000}
 49 | SCOPES={scopes}                     # Your app's required scopes, comma-separated
 50 | HOST={your app's host e.g ngrok}              # Your app's host
 51 | ```
 52 | 
 53 | Then, create a new app in your [Shopify Partner Dashboard](https://partners.shopify.com/) and copy the `api key` and `api secret key` to your `.env` file.
 54 | 
 55 | #### PHP
 56 | The PHP template generated is a [Laravel 8](https://laravel.com/docs/8.x) app with [Laravel-shopify Package](https://github.com/osiset/laravel-shopify) installed.
 57 | - Add the `SHOPIFY_API_KEY` , `SHOPIFY_API_SECRET`, and `SHOPIFY_APPBRIDGE_ENABLED` to your `.env`
 58 | ```
 59 | SHOPIFY_API_KEY=<your api key>
 60 | SHOPIFY_API_SECRET=<your secret key>
 61 | SHOPIFY_APPBRIDGE_ENABLED=true
 62 | 
 63 | ```
 64 | 
 65 | Then, create a new app in your [Shopify Partner Dashboard](https://partners.shopify.com/) and copy the `api key` and `api secret key` to your `.env` file.
 66 | 
 67 | ### Start Server
 68 | #### For NodeJs
 69 | Start your development server
 70 | ```
 71 | npm run start:dev
 72 | ```
 73 | Setup [Ngrok](https://ngrok.com/docs/getting-started) and expose your development server 
 74 | ```
 75 | ngrok http http://localhost:3000/
 76 | ```
 77 | Go to your app on [Shopify partner dashboard](https://partners.shopify.com/2041663/apps) and set the `App URL` as the Ngrok https url and add the following to `Allowed redirection URL(s)`
 78 | ```
 79 | <Ngrok https url>/api/auth
 80 | <Ngrok https url>/api/auth/callback
 81 | <Ngrok https url>/api/auth/online
 82 | ```
 83 | > The NodeJs server would not start without a valid `HOST`. During development, you need to first expose the server port e.g localhost:3000 with ngrok, then update the `.env` with the ngrok url before starting the development server.
 84 | 
 85 | ### For PHP
 86 | Build frontend scripts with laravel mix
 87 | ```
 88 | npm run dev
 89 | ```
 90 | Start PHP development server
 91 | ```
 92 | php artisan serve
 93 | ```
 94 | Setup [Ngrok](https://ngrok.com/download) and expose your development server 
 95 | ```
 96 | ngrok http http://localhost:8000/
 97 | ```
 98 | Go to your app on [Shopify partner dashboard](https://partners.shopify.com/2041663/apps) and set the `App URL` as the Ngrok https url and add the following to `Allowed redirection URL(s)`
 99 | ```
100 | <Ngrok https url>/authenticate
101 | ```
102 | > To make your app work, you must configure the database, jobs, and middlewares, as well as publish the configurations for the [Laravel Shopify](https://github.com/osiset/laravel-shopify) package. Follow the installation instructions on the wiki page [here](https://github.com/osiset/laravel-shopify/wiki/Installation).
103 | 
104 | ### Testing your App
105 | Before you continue, you can [test your app](https://shopify.dev/apps/store/review/testing) on developemt store to validate your setup.
106 | 
107 | ### Shopify AppBridge Authentication
108 | ShopifyVue VueJs template is an extention of [vue-typescript-template](https://github.com/Doctordrayfocus/vue-typescript-template). The `services/common/BaseService.ts` files in the template was modified to support Shopify AppBridge Authentication. This adds access token to every request made to the server side.
109 | 
110 | - `services/common/BaseService.ts`
111 | ```ts
112 | import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
113 | import { API_URL } from '../../common/constants'
114 | import { getSessionToken } from '@shopify/app-bridge-utils' // import shopify app-bridge
115 | 
116 | export class BaseApiService {
117 |   private readonly baseUrl = API_URL
118 |   public axiosInstance: AxiosInstance
119 |   private config: AxiosRequestConfig
120 |   resource
121 | 
122 |   constructor(resource: string) {
123 |     if (!resource) throw new Error('Resource is not provided')
124 |     this.resource = resource
125 | 
126 |     this.config = {
127 |       baseURL: this.baseUrl,
128 |     }
129 | 
130 |     this.axiosInstance = axios.create(this.config)
131 | 
132 |     // auth token
133 |     this.axiosInstance.interceptors.request.use(function (config: any) {
134 |       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
135 |       // @ts-ignore
136 |       return getSessionToken(window.shopifyApp) // requires a Shopify App Bridge instance
137 |         .then((token) => {
138 |           // Append your request headers with an authenticated token
139 |           config.headers.Authorization = `Bearer ${token}`
140 |           return config
141 |         })
142 |     })
143 |   }
144 | 
145 |   public getUrl(id = ''): string {
146 |     return id ? `/${this.resource}/${id}` : `/${this.resource}`
147 |   }
148 | 
149 |   public handleErrors(err: unknown): void {
150 |     // Note: here you may want to add your errors handling
151 |     console.log({ message: 'Errors is handled here', err })
152 |   }
153 | }
154 | 
155 | 
156 | ```
157 | 
158 | And the AppBridge intiation and setup has been implemented by ShopifyVue.
159 | 
160 | - In NodeJs - `index.html`
161 | ```html
162 | <!DOCTYPE html>
163 | <html lang="en">
164 |   <head>
165 |     <meta charset="UTF-8" />
166 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
167 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
168 |     <title>Vue + TS</title>
169 |   </head>
170 |   <body>
171 | 	<div id="app">
172 | 		<App/>
173 | 	</div>
174 | 	<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
175 |     <script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script>
176 |     <script>
177 |     var AppBridge = window['app-bridge'];
178 |     var AppBridgeUtils = window['app-bridge-utils'];
179 |     var actions = window['app-bridge'].actions;
180 |  
181 | 	const params = new Proxy(new URLSearchParams(window.location.search), {
182 | 		get: (searchParams, prop) => searchParams.get(prop),
183 | 	  });
184 | 
185 |    var createApp = AppBridge.default;
186 |    window.shopifyApp = createApp({
187 |     apiKey: 'env.apiKey',
188 |     host: params.host
189 |    });
190 |     </script>
191 |    
192 |   </body>
193 | </html>
194 | ```
195 | - In PHP - `welcome.blade.php`
196 | ```php
197 | @extends('shopify-app::layouts.default')
198 | 
199 | @section('content')
200 | <!DOCTYPE html>
201 | <html lang="en">
202 | 
203 | <head>
204 |     <meta charset="UTF-8">
205 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
206 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
207 |     <link rel="stylesheet" type="text/css" href="/css/line-awesome.min.css">
208 |     <link href="{{ asset('css/app.css?v=0.22') }}" rel="stylesheet">
209 |     <title>App Name</title>
210 | </head>
211 | 
212 | <body>
213 |     <div id="app">
214 |         <App />
215 |     </div>
216 |     @if (\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled'))
217 |     <script
218 |         src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@' . config('shopify-app.appbridge_version') : '' }}">
219 |     </script>
220 |     <script
221 |         src="https://unpkg.com/@shopify/app-bridge-utils{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@' . config('shopify-app.appbridge_version') : '' }}">
222 |     </script>
223 |     <script @if (\Osiset\ShopifyApp\Util::getShopifyConfig('turbo_enabled')) data-turbolinks-eval="false" @endif>
224 |         var AppBridge = window['app-bridge'];
225 |                 var actions = AppBridge.actions;
226 |                 var createApp = AppBridge.default;
227 |                 window.shopifyApp = createApp({
228 |                     apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', $shopDomain ?? Auth::user()->name) }}",
229 |                     shopOrigin: "{{ $shopDomain ?? Auth::user()->name }}",
230 |                     host: "{{ \Request::get('host') }}",
231 |                     forceRedirect: true,
232 |                 });
233 |     </script>
234 | 
235 |     @include('shopify-app::partials.token_handler')
236 |     @include('shopify-app::partials.flash_messages')
237 |     @endif
238 |     <script src="{{ asset('js/main.js?v=0.01') }}"></script>
239 | </body>
240 | 
241 | </html>
242 | @endsection
243 | 
244 | @section('scripts')
245 | @parent
246 | @endsection
247 | ```
248 | 
249 | ## Additional Resources
250 | - For more information on the NodeJs Server side, checkout [Shopify Node Template](https://github.com/Shopify/shopify-app-template-node)
251 | - For more information on the PHP server side and setup guide, checkout [Shopify-laraval Wiki](https://github.com/osiset/laravel-shopify/wiki)
252 | - For more information on how to use the Vue Template, checkout [Vue-typescript-template](https://github.com/Doctordrayfocus/vue-typescript-template)
253 | 
254 | 
255 | 


--------------------------------------------------------------------------------