🚀🚀 A Shopify embedded app starter template, with updated dependencies, session storage, app context and examples for basic functionalities.

Shopify Node App Starter This is a starter template for embedded shopify apps based on the shopify cli node app. Contributions to create the perfect s

Information

Category: JavaScript / Miscellaneous
Watchers: 4
Star: 22
Fork: 4
Last update: Jan 20, 2022

Resource links

https://github.com/carstenlebek/shopify-node-app-starter

README
Issues 10

Shopify Node App Starter

This is a starter template for embedded shopify apps based on the shopify cli node app.

Contributions to create the perfect shopify app boilerplate are very welcome! 🤩

Changes to the default Shopify node app starter

Updated dependencies (@apollo/client instead of react-apollo, react 17, next.js 12, polaris 7)
MongoDB session storage already set up (full credit goes to Harshdeep Singh Hura)
Ready to use online and offline accesstokens simultaneously
App context set up. Can be used to store data, that only needs to be fetched once, but is needed in multiple places
Link component to convert <a> tags to Next Links for relative paths
Routepropagation set up
Example API with verifyRequest() is set up
Webhook registration and persistance after server restart
Examples for creating, displaying and canceling of app subscriptions
Loading screen while the app context is loading

Boilerplate to create an embedded Shopify app made with Node, Next.js, Shopify-koa-auth, Polaris and App Bridge React.

TODO

GDPR webhooks

Installation

Fork and clone repo
Create an app in the shopify partner dashboard
Run shopify app connect to connect the app to shopify
Run npm install to install dependencies
Add ENCRYTION_STRING and MONGO_URL to your .env file (.env example is in the root directory)
Run shopify app serve to start dev enviroment

Requirements

If you don’t have one, create a Shopify partner account.
If you don’t have one, create a Development store where you can install and test your app.
In the Partner dashboard, create a new app. You’ll need this app’s API credentials during the setup process.

Usage

Same usage as apps created with the Shopify CLI

Important

API routes have to start with /api/. All relative paths starting with /api/ will be converted to absolute paths by a next.js rewrite

License

This respository is available as open source under the terms of the MIT License.

0 Open More issues

Closed

Abort [Error]: The CLIKitStore instance hasn't been initialized & AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided

Hey guys. Unfortunately, it is not possible to set up the project due to two errors. Been trying to get the project to run for hours.

Error 1: Abort [Error]: The CLIKitStore instance hasn't been initialized - The CLIKitStore instance hasn't been initialized in line 35 @ next.config.mjs before session.ensureAuthenticatedPartners(); is called. I couldn't find any documentation on @shopify/cli-kit and trying await store.initializeCliKitStore(); in line 34 doesn't seem to work either. How do I initialize the store before the session is authenticated?

Error 2: AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided - Whether I comment out the host in line 62 @ next.config.mjs or not, the host seems to be non-resolvable. Do I need to define an additional host in the dotenv? HOST=https://localhost does not seem to work for me, even tho I set it as URL in the Shopify Plugin. Is there a solution for this?

I would be very grateful for any solutions and advice and thank you in advance.

Have a nice evening everyone :)

opened Jul 12, 2022 by testuser4334 6

Closed

I think I broke the app dev :D

Hello! Thanks for the awesome work, in case you know what's up, I tried to add cli3 inside the app and then I completely destroyed it.

When running the npm run dev I get , Variable $applicationUrl of type Url! was provided invalid value: {"response":{"errors":[{"message":"Variable $applicationUrl of type Url! was provided

Its around this line ShopifyCli.mjs file const result = await api.partners.request(query, token, variables);

Although all the strings are looking ok it expects a type of URL

I removed everything and the folders, cloned again etc, I installed everything again with force and npm audit fix but no luck. Let me know if you have any idea! Thanks

opened Aug 24, 2022 by alexandrosk 3

Closed

Error when running npm run dev

Hi! After following all the steps, when running npm run dev, the software runs into an error. Output is:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from [my-path]\.env
Abort [Error]: The CLIKitStore instance hasn't been initialized
    at cliKitStore (file:///[MY-APP-PATH]/node_modules/@shopify/cli-kit/dist/store.js:28:15)
    ......

Ani ideas why that is?

opened Aug 10, 2022 by supa-freak 3

Closed

CustomProperties deprecated + Hydration failure

Deprecation: The CustomProperties component has been deprecated. See the v10 migration guide for replacing dark color scheme styles. https://github.com/Shopify/polaris/blob/main/documentation/guides/migrating-from-v9-to-v10.md

Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error

How do I fix this?

opened Jul 19, 2022 by aimproxy 3

Closed

Perform fewer HTTP calls at the Callback Endpoint (Solution)

I've been playing around with Shopify OAuth a little bit again and I might discover a way of not doing too many requests into the callback endpoints.

I realised if I tweak a little bit the code of the session storage file, at the callback endpoint we would have to persist a second time the shop into Redis!

There are only two cases during Shopify OAuth that need to be handled! We know that Shopify uses session.id from the SessionInterface, the ID can vary between a uuidv4 string and the shop URL with a suffixed number like this: .myshopify.com_123456789.

Suffice to say, that we only need to handle the storeCallback and the loadCallback to make this work, let's see some code:


const SHOPIFY_DOMAIN = ".myshopify.com";

const storeCallback = async (session: SessionInterface): Promise<boolean> => {
  const result = await redis.set(
    session.id.includes(SHOPIFY_DOMAIN) ? session.shop : session.id,
    JSON.stringify(session),
    session.id.includes("offline") ? {} : { ex: 36000 }
  );

  return result === "OK";
};

const getShopDomainIfPresent = (shopId: string): string | null => {
  if (shopId.includes(SHOPIFY_DOMAIN)) {
    return shopId.substring(0, shopId.indexOf("_"));
  }

  return null;
};

const loadCallback = async (shopId: string): Promise<SessionInterface | { [key: string]: unknown } | undefined> => {
  const result = await redis.get<Promise<SessionInterface | null>>(getShopDomainIfPresent(shopId) || shopId);

  return result ?? undefined;
};

const deleteCallback = async (shopId: string): Promise<boolean> => {
  const result = await redis.del(getShopDomainIfPresent(shopId) || shopId);

  return result > 0;
};

By doing this, this piece of code is now obsolete benefiting from fewer calls at the callback endpoint!

      const redis = new Redis({
        url: process.env.UPSTASH_REDIS_REST_URL as string,
        token: process.env.UPSTASH_REDIS_REST_TOKEN as string
      });

      const redisShop = await redis.get(session.shop);
      if (!redisShop || redisShop !== process.env.SCOPES) {
        await redis.set(session.shop, session);
      }

opened Sep 16, 2022 by aimproxy 2

Closed

"cliKitStore.initializeCliKitStore is not a function" error

Received this error after running pnpm install and npm run on a new clone of the project. Using version 3.0.25 of @shopify/cli-kit.

TypeError: cliKitStore.initializeCliKitStore is not a function
    at setEnvironmentAndReturnHost (file:///Users/user/app/next.config.mjs:37:21)
    at config (file:///Users/user/app/next.config.mjs:66:18)
    at Object.normalizeConfig (/Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/server/config-shared.ts:556:14)
    at Object.loadConfig [as default] (/Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/server/config.ts:799:6)
    at NextServer.prepare (/Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/server/next.ts:110:20)
    at /Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/cli/next-dev.ts:107:

Console log of cliKitStore:

cliKitStore [Object: null prototype] {
  createConf: [Function: createConf],
  remove: [Function: remove$2],
  getAppInfo: [Function: getAppInfo],
  setAppInfo: [Function: setAppInfo],
  clearAppInfo: [Function: clearAppInfo],
  getTheme: [Function: getTheme],
  setTheme: [Function: setTheme],
  getSession: [Function: getSession],
  setSession: [Function: setSession],
  removeSession: [Function: removeSession]
}

opened Aug 17, 2022 by yngwz 2

Open

Embedded app does not render

After successfully installing the app in our Shopify dev store, I am having issues getting the embedded app to actually render.

I see the follow error, and the browser URL contains the querystring params &oauth_error=same_site_cookies&before=&after=&tab=installed

Do you know what might be causing this?

opened Mar 3, 2023 by dylansmith 4

Open

Breaking changes in @shopify/[email protected]

Firstly, thanks for this fantastic template. However, there are some breaking changes to the structure of the @shopify/cli-kit package introduced in it's 3.40.0 (minor?) version which are preventing the app from starting for npm users (since you only have a pnpm-lock.yml in the template).

error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/REDACTED/shopify-node-app-starter/node_modules/@shopify/cli-kit/dist/index.js' imported from /Users/REDACTED/shopify-node-app-starter/next.config.mjs
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:330:11)
    at moduleResolve (node:internal/modules/esm/resolve:907:10)
    at defaultResolve (node:internal/modules/esm/resolve:1115:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'

My workaround was simply to specify the 3.13.0 version locally, but hopefully this issue will help others in a similar situation.

opened Mar 2, 2023 by dylansmith 3

Open

Remove setting of header

I'm getting an error: "Can't render headers after they are sent to the client." So, I changed my callback.ts to not set the shopify session ID header and it is working.

opened Feb 9, 2023 by nabusman 1

Open

How to integrate in app-extensions with Shopify

Hi there,

Thanks for making this amazing template, really helps to make shopify app dev much easier. I'm currently hoping to add in some extensions, in particular the checkout button ( Something like this : https://shopify.dev/apps/checkout/delivery-instructions )

How do you suggest doing so? Not too sure how i might go about doing so since the layout of the folder is a bit different as compared to the scaffolded one by shopify-cli

opened Aug 26, 2022 by ivanleomk 4

Bare bones starter for Shopify Online Store 2.0 theme development

Create Shopify App With JWT Authentication using NodeJs, React, Shopify Polaris and MongoDb

Package session is a middleware that provides the session management of Macaron.

Nextjs + Tailwind CSS + Shopify Starter

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.

Active Merchant is a simple payment abstraction library extracted from Shopify. The aim of the project is to feel natural to Ruby users and to abstract as many parts as possible away from the user to offer a consistent interface across all supported gateways.

Simple Shopify API for the Go Programming Language

A demo of a Shopify site using Astro and React.

This package prevents a User from being logged in more than once. It destroys the previous session when a User logs in and thereby allowing only one session per user.

Mongoose Embedded Web Server Library - Mongoose is more than an embedded webserver. It is a multi-protocol embedded networking library with functions including TCP, HTTP client and server, WebSocket client and server, MQTT client and broker and much more.

ASP.NET Core Vue Starter CLI 3.0 @SoftwareAteliersASP.NET Core Vue Starter CLI 3.0 A Vue starter template using Vue CLI 3.0 with custom configuration (default TypeScript, Vue, Router, Vuex, Vuetify) integrated with ASP.NET Core by @SoftwareAteliers (September 2018)

loopback-vue-starter - LoopBack and Vue starter template with easy plugin management through vue-cli and vue ui.

vue-ls - Vue plugin for work with LocalStorage from Vue context.

vue-context - A simple but flexible context menu for vue js.

aspnetcore-Vue-starter A VueJS 2 starter template as part of an asp.net MVC dotnetcore project. This template includes the VueJS client app and a backend API controller.

CORTX Community Object Storage is 100% open source object storage uniquely optimized for mass capacity storage devices.

Plugin that lets you suspend local tmux session, so that you can work with nested remote tmux session painlessly.

IDA Python Embedded Toolkit -- IDAPython scripts for automating analysis of firmware of embedded devices

Python-based framework for building and evaluating session-based recommender systems.

dev linux-embedded-hal - Implementation of the embedded-hal traits for Linux devices

HTTP Session Management for Go

Share this repo

Related Repos

Miscellaneous

5.5k

Apache OpenWhisk is an open source serverless cloud platform

OpenWhisk OpenWhisk is a serverless functions platform for building cloud applications. OpenWhisk offers a rich programming model for creating serverl

Miscellaneous

Replaces twitter NFT idiocracy

HexaGone HexaGone allows you to revert or customize twitter's new hexagonal avatars. It's a collection of a several userscripts, with different clip m

Miscellaneous

replaces the nft avatars on twitter with subway jared

replace-nft-avatars a chrome extension that replaces the nft avatars on twitter with subway jared to install Download this repo (Code > Download ZIP).

Miscellaneous

Smart Contract Viewer for VS Code

Contract Viewer English | 中文 Contract Viewer 是一个 VS Code 扩展，他可以帮你从区块链浏览器下载合约代码，只需要一个合约地址即可下载。目前仅支持以太坊使用 Solidity 的智能合约，后续会支持更多类型。快速开始配置一个 API 在 Erh

Miscellaneous

Video calling using WebRTC

webrtc-video-call This project is a video calling application using WebRTC technology. It contains minimum requirements to provide a group video call.

Miscellaneous

A multipurpose bot, a clan bot, a all in one bot. The one bot u need for ur server origina...

Multipurpose-discord-bot A multipurpose bot, a clan bot, a all in one bot. The one bot u need for ur server originally made as Milrato discord Bot and

Miscellaneous

334

A template for site builders and low-code tools.

Platforms Starter Kit The all-in-one starter kit for building platforms on Vercel. Introduction · Guide · Demo · Contributing Deploy Your Own Read the

Miscellaneous

152

A Raycast/Alfred/Spotlight alternative

sol A Raycast/Alfred/Spotlight alternative Don't bother trying to run this, it's WIP, right now only the basic UI is there, no logic, there many bugs/

Miscellaneous

Self hosted media tracker for movies, tv shows, video games, books and audiobooks

MediaTracker · Self hosted platform for tracking movies, tv shows, video games, books and audiobooks, highly inspired by flox Demo https://mediatracke

Miscellaneous

Everytime I come across good Github profiles I index them here

awesome-devs Everytime I come across good Github profiles I index them here NOTE: If you are on the github repo currently, go to the website 👇 to see

Miscellaneous

Minimalist template for foundry projects

Foundry template This is a template for a Foundry project. Installation To install with DappTools: dapp install [user]/[repo] To install with Foundry

Miscellaneous

vite-plugin-terminal Log in the node terminal from the browser Open a playground online in StackBlitz Install npm i -D vite-plugin-terminal Add plugin

Miscellaneous

A simple web3 app for minting NFTs

Web3 - Full Tutorial The demo contains a basic web3 app and smart contract for minting NFTs. See it in action in the Web3 NFT Tutorial on YouTube. Fol

Miscellaneous

A three.js component library for Svelte.

A three.js component library for svelte. Index What is threlte? Getting started Concepts Interactivity Viewport Awareness Reactivity Conventions Refer

Miscellaneous

Wordle Svelte Clone

Wordle Svelte Clone Son zamanlarda popüler olan WORDLE uygulamasını svelte ile yapmaya çalıştım. Bu tarz acaba yapsam nasıl yapardım uygulamarı bana ç