{"id":21826371,"url":"https://github.com/mini-sylar/shopify-app-vue-template","last_synced_at":"2025-05-09T00:09:52.033Z","repository":{"id":194061188,"uuid":"655609309","full_name":"Mini-Sylar/shopify-app-vue-template","owner":"Mini-Sylar","description":"Create a shopify app with node and vue 3","archived":false,"fork":false,"pushed_at":"2025-04-30T19:20:12.000Z","size":1655,"stargazers_count":65,"open_issues_count":1,"forks_count":10,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-09T00:09:45.443Z","etag":null,"topics":["app","javascript","node","open-source","pinia","shopify","shopify-app","template","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://shopifyvue.uagency.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mini-Sylar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-19T08:41:46.000Z","updated_at":"2025-04-15T01:06:17.000Z","dependencies_parsed_at":"2024-01-11T12:34:04.072Z","dependency_job_id":"10dd3d84-db51-48f8-a923-1e32220a9f77","html_url":"https://github.com/Mini-Sylar/shopify-app-vue-template","commit_stats":null,"previous_names":["mini-sylar/shopify-app-vue-template"],"tags_count":17,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-Sylar%2Fshopify-app-vue-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-Sylar%2Fshopify-app-vue-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-Sylar%2Fshopify-app-vue-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-Sylar%2Fshopify-app-vue-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mini-Sylar","download_url":"https://codeload.github.com/Mini-Sylar/shopify-app-vue-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166521,"owners_count":21864482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","javascript","node","open-source","pinia","shopify","shopify-app","template","vue","vue3","vuejs"],"created_at":"2024-11-27T18:03:48.681Z","updated_at":"2025-05-09T00:09:52.022Z","avatar_url":"https://github.com/Mini-Sylar.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Mini-Sylar"],"categories":[],"sub_categories":[],"readme":"# Shopify App Template Using Vue 🟢\n\n[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4969-shield.svg)](https://madewithvuejs.com/p/shopify-vue-app-template/shield-link)\n\n![Screenshot](https://drive.google.com/uc?id=1VKbiGd09QJ9c_TjpffQ5zasqxVLzqfgc)\n\nA template for building Shopify apps using Vue.js as the frontend. It is based on the [Shopify App Node](https://github.com/Shopify/shopify-app-template-node) template.\n\n---\n\n## Documentation\n\nFor detailed documentation and guides on how to use this template, visit:\n[![Documentation](https://img.shields.io/badge/documentation-view%20docs-blue?style=for-the-badge\u0026logo=github)](https://shopifyvue.uagency.org/)\n\n## Supporting This Project\n\nIf you find this template useful, you can support its development through:\n\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/Mini-Sylar?style=for-the-badge\u0026logo=githubsponsors\u0026logoColor=white\u0026color=EA4AAA)](https://github.com/sponsors/Mini-Sylar)\n\nYou can also:\n- Star ⭐ this repository\n- Report bugs or suggest features\n- Submit pull requests to improve the template\n- Share it with others who might find it useful\n\n\n## Getting Started\n\n1. Clone this repository or `npx degit Mini-Sylar/shopify-app-vue-template your-app-name`\n2. Run `npm install` in the root directory\n3. Run `npm run dev:reset` to configure your app (Initial setup only!)\n4. Run `npm run dev` to start the app (Subsequent runs)\n5. See `package.json` for other scripts\n\n\n### Folder Structure\n\n#### Updated Structure:\n```\nroot/\n├── client/                 # Frontend Vue app, See client README.md\n├── server/                 # Backend Node.js app\n│   ├── database/           # DB configuration (default: SQLite)\n│   ├── middleware/         # Middleware for user capture\n│   ├── models/             # Models for User and Webhook\n│   ├── routes/             # Default product routes\n│   ├── services/           # Shopify product creator\n│   ├── utils/              # Utilities (locale, webhook processing)\n│   ├── webhook/            # Webhook handlers (GDPR compliance included)\n│   ├── index.js            # Entry point\n│   └── shopify.js          # Shopify configuration\n```\n\n- **Prettier** and **ESLint** configurations are now project-wide.\n- ESLint updated to use the new flat config.\n\n---\n\n### Shortcut Commands\n\n| Command                 | Description                                                             |\n|-------------------------|-------------------------------------------------------------------------|\n| `npm run shopify`       | Run Shopify CLI commands                                               |\n| `npm run build`         | Build the project (frontend and backend)                              |\n| `npm run dev`           | Start the development server                                           |\n| `npm run dev:reset`     | Reset Shopify configuration                                            |\n| `npm run dev:webhook`   | Trigger a webhook. Use `\u003cdomain\u003e/api/webhooks` when asked for a domain |\n| `npm run info`          | Display info about the Shopify app                                    |\n| `npm run generate`      | Generate a theme extension                                            |\n| `npm run deploy`        | Deploy the app                                                        |\n| `npm run show:env`      | Show environment variables for production deployment                  |\n| `npm run lint`          | Run ESLint on the entire project                                      |\n| `npm run lint:server`   | Run ESLint on the server only                                         |\n| `npm run lint:client`   | Run ESLint on the client only                                         |\n| `npm run format:server` | Run Prettier formatting on the server                                 |\n| `npm run format:client` | Run Prettier formatting on the client                                 |\n| `npm run client:install`| Install client dependencies                                           |\n| `npm run client:uninstall`| Uninstall client dependencies                                       |\n| `npm run server:install`| Install server dependencies                                           |\n| `npm run server:uninstall`| Uninstall server dependencies                                       |\n\n\n## FAQ\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I deploy this app?\u003c/summary\u003e\n\n#### Using My Own Server (Linux VPS/Render.com/Heroku)\n1. Set up your domain, e.g., `https://shopify-vue.minisylar.com`.\n2. Run `npm run show:env` to retrieve environment variables:\n\n```\nSHOPIFY_API_KEY=\u003cYOUR_KEY\u003e\nSHOPIFY_API_SECRET=\u003cYOUR_SECRET\u003e\nSCOPES=\"write_products,read_products\"\nHOST=https://shopify-vue.minisylar.com\n```\n\n#### Using Dockerfile\n- Add the variables in the environment section of your hosting service (e.g., Render).\n- Build and deploy the Dockerfile.\n- For manual deployment:\n\n```bash\ndocker build --build-arg SHOPIFY_API_KEY=\u003cyour_api_key\u003e --build-arg SHOPIFY_API_SECRET=\u003cyour_api_secret\u003e \\\n--build-arg SCOPES=\u003cyour_scopes\u003e --build-arg HOST=\u003cyour_host\u003e -t \u003cimage_name\u003e:\u003ctag\u003e .\n```\n\n\u003e **Note:** Omit `\u003c` and `\u003e` when providing values. Store secrets securely if using CI/CD pipelines.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I use MySQL or PostgreSQL for production?\u003c/summary\u003e\n\n#### MySQL Example\n```diff\n- import { SQLiteSessionStorage } from \"@shopify/shopify-app-session-storage-sqlite\";\n+ import { MySQLSessionStorage } from \"@shopify/shopify-app-session-storage-mysql\";\n\nsessionStorage:\n  process.env.NODE_ENV === \"production\"\n    ? MySQLSessionStorage.withCredentials(\n        process.env.DATABASE_HOST,\n        process.env.DATABASE_SESSION,\n        process.env.DATABASE_USER,\n        process.env.DATABASE_PASSWORD,\n        { connectionPoolLimit: 100 }\n      )\n    : new SQLiteSessionStorage(DB_PATH),\n```\n\n#### PostgreSQL Example\n```diff\n+ import { PostgreSQLSessionStorage } from \"@shopify/shopify-app-session-storage-postgresql\";\n\nsessionStorage: PostgreSQLSessionStorage.withCredentials(\n  process.env.DATABASE_HOST,\n  process.env.DATABASE_SESSION,\n  process.env.DATABASE_USER,\n  process.env.DATABASE_PASSWORD\n);\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to call external APIs?\u003c/summary\u003e\n\nAlways call APIs from the server and forward responses to the frontend:\n\n```javascript\napp.get(\"/api/external-api\", async (_req, res) =\u003e {\n  try {\n    const response = await fetch(\"https://dummyjson.com/products\", { method: \"GET\" });\n    if (response.ok) {\n      res.status(200).send(await response.json());\n    } else {\n      res.status(500).send({ error: \"Failed to fetch data\" });\n    }\n  } catch (error) {\n    res.status(500).send({ error: error.message });\n  }\n});\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to resolve CORS errors?\u003c/summary\u003e\n\n- Verify configuration in `shopify.\u003cyour_app\u003e.toml`.\n- Ensure the dev domain matches the preview URL.\n- Run `npm run dev:reset` to reset the config, then `npm run deploy` to push changes.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to update my scopes?\u003c/summary\u003e\n\n1. Update the `scopes` in your `.toml` file. See [Shopify Access Scopes](https://shopify.dev/docs/api/usage/access-scopes).\n2. Run `npm run deploy`.\n3. Uninstall and reinstall the app in the Shopify admin dashboard.\n\n\u003c/details\u003e\n\n---\n\n## Screenshots\n\n![Screenshot](https://drive.google.com/uc?id=1p32XhaiVRQ9eSAmNQ1Hk2T-V5hmb9CFa)\n\n![Screenshot](https://drive.google.com/uc?id=1yCr3lc3yqzgyV3ZiTSJjlIEVPtNY27LX)\n\n---\n\n## App Submission\n\nBuilt an app using this template? Submit it here: [App submission form](https://forms.gle/K8VGCqvcvfBRSug58).\n\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmini-sylar%2Fshopify-app-vue-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmini-sylar%2Fshopify-app-vue-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmini-sylar%2Fshopify-app-vue-template/lists"}