An embedded Shopify app starter template made with Node, Express, React and Vite, with all the required stuff hooked up.

Overview

Shopify Node.js x Express.js x React.js Boilerplate

An embedded app starter template to get up and ready with Shopify app development with JavaScript. This is heavily influenced by the choices Shopify Engineering team made in building their starter template to ensure smooth transition between templates.

I've also included notes on this repo which goes over the repo on why certain choices were made.

I also did make a video going over the entire repo as of November 4, 2022. If there's any substantial changes, the video here will be updated to reflect it.

Creating a Shopify app from scratch

Supporting Repositories:

  • Polaris Playground: A Shopify Polaris playground to build your interfaces and directly drop them in this repo, with the exception of App.jsx.

WIP:

  • Learning how to build Shopify apps: A repo with webhooks, scopes, basic controllers and more setup so newcomers on the Shopify platform can learn what's called and what's required when planning out their build.

Tech Stack

  • React.js
    • raviger for easier routing.
  • Express.js
  • MongoDB
  • Vite
  • Ngrok
  • Apollo/Client

Why I made this

The Shopify CLI generates an amazing starter app but it still needs some more boilerplate code and customizations so I can jump on to building apps with a simple clone. This includes:

  • MongoDB based session and database management.
  • Monetization (recurring subscriptions) ready to go.
  • Webhooks isolated and setup.
  • React routing taken care of (I miss Next.js mostly because of routing and under the hood improvements).
  • Misc boilerplate code and templates to quickly setup inApp subscriptions, routes, webhooks and more.

Notes

Setup

Misc

  • Storing data is kept to a minimal to allow building custom models for flexibility.
    • Session persistence is also kept to a minimal and based on the Redis example provided by Shopify, but feel free to modify as required.
  • When pushing to production, add __templates to .gitignore.
Comments
  • App production mode crashed

    App production mode crashed

    Error after app reinstalling

    **The app couldn’t be loaded

    This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support.**

    i run node app after npm run build still the error. can you help me on that

    user error 
    opened by adventuretocode 14
  • 404 in admin/app after install

    404 in admin/app after install

    I'm having trouble getting the app to run in the admin dashboard. After I click install to my shop from the partner dashboard, it redirects me to "https://myngroksercer.io/?hmac=&shop=.myshopify.com&timestamp=1659089273". The full screen loads at this address before it redirects me to "https://.myshopify.com/admin/apps/<SHOPIFY_API_KEY>/?hmac=&shop=.myshopify.com&timestamp=1659089273", and from here I get a "There’s no page at this address".

    Has anyone had this issue?

    user error 
    opened by Amtron 7
  • Trying to query Rest client throws unauthorized error

    Trying to query Rest client throws unauthorized error

    I am trying to get a product from the store like this:

    const client = new shopify.clients.Rest({ session });
    const product = await client.get({
         path: `products/${productId}`,
         query: {id: 1, title: "title"}
    });
    

    But it is throwing the following error:

    code: 401,
    [server]     statusText: 'Unauthorized',
    [server]     body: {
    [server]       errors: '[API] Invalid API key or access token (unrecognized login or wrong password)'
    [server]     },
    

    I am retrieving the session from the mongodb to pass to this function. It is succesfully creating the client. But fails to access the endpoints with the created client. What am I missing here?

    user error 
    opened by Nithur-M 6
  • Dev mode is currently broken

    Dev mode is currently broken

    The npm run dev is currently broken leading to a lot of 4xx and 5xx errors since the dev mode implementation is half baked. The production mode runs just fine with npm run build followed by a npm run start. HMR isn't supported in production mode, so any changes to React side of things need a npm run build and refresh in the embedded app to update.

    bug 
    opened by kinngh 6
  • APP::ERROR::INVALID_CONFIG: host must be provided

    APP::ERROR::INVALID_CONFIG: host must be provided

    Hello I am new to Shopify development. I set up the repo and made no changes besides the necessary variables in .env. The app loads initially, but hitting Subscriptions or Recurring buttons causes this error.

    Thanks for your help.

    Screen Shot 2022-05-19 at 10 47 29 AM
    opened by cunningham32 5
  • Shopify Polaris Frame Logo Url blocked by CSP

    Shopify Polaris Frame Logo Url blocked by CSP

    I am using below code in Frame component const logom = { width: 124, topBarSource: logo, url:"/" } But when I clicked on logo I am getting below error

    Refused to frame 'https://3916-103-136-95-137.in.ngrok.io/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

    Can you please help me

    user error 
    opened by KlocRanjana 4
  • Getting blank screen after clicking install

    Getting blank screen after clicking install

    I have server side subscription on home page once homepage is loaded. In production I'm getting blank screen after clicking on install and following error message, it is still on SHOPIFY_APP_URL domain.

    Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

    The app is installed, after going through admin>apps>My App it works fine

    opened by mahamudml 4
  • Target origin vs. Recipient Window Origin

    Target origin vs. Recipient Window Origin

    Hey man! I'm strangely getting this error sometimes when I exit and re-enter the app url from the merchant's side.

    Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://light-heads-tickle-67-176-66-51.loca.lt') does not match the recipient window's origin ('https://bis-test-cecom.myshopify.com').

    Any idea what's going on here? I think it's a session thing, but I'm a bit out of my depth.

    help wanted 
    opened by willmclellarn 4
  • npm run s:e:deploy | ERROR Invalid hook call

    npm run s:e:deploy | ERROR Invalid hook call

    I'm getting this error in my console when running npm run s:e:deploy

    ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

    This command has worked in the past and I haven't made any changes to my theme-app-extension so I'm not sure why it's throwing this error.

    I've tried all these solutions https://bobbyhadz.com/blog/react-invalid-hook-call-hooks-can-only-be-called-inside-body

    I'm also not using react in my theme-app-extension, so I'm not sure why this error occurred out of nowhere.

    I've cloned this repo to test if it's an issue with my specific app but the same error occurred.

    bug 
    opened by nzmitch 3
  • authenticated Shopify Api request from theme-app-extension

    authenticated Shopify Api request from theme-app-extension

    My app creates Discounts for users after they verify ownership of a specific NFT. I'm using the Proxy route correctly and am able to retrieve necessary data from MongoDB to verify ownership but my /create-discount-code-auth Route throws an error.

    I guess I need a hand understanding how to make authenticated Shopify API calls from Shopify's theme-app-extension.

    App proxy route

    proxyRouter.get("/create-discount-code-auth", verifyRequest(proxyRouter), async (req, res) => {
      const session = await Shopify.Utils.loadCurrentSession(req, res, true);
      const { PriceRule } = await import(
        `@shopify/shopify-api/dist/rest-resources/${Shopify.Context.API_VERSION}/index.js`
      );
    
      const { DiscountCode } = await import(
        `@shopify/shopify-api/dist/rest-resources/${Shopify.Context.API_VERSION}/index.js`
      );
    
      const discount_code = Math.random().toString(36).slice(2, 24).toUpperCase();
      const rule_id = req.query.rule_id;
      const validity = req.query.validity;
    
      const start = new Date();
      const end = moment(start).add(Number(validity), "minutes").format();
    
      const price_rule = new PriceRule({ session });
      price_rule.id = rule_id;
      price_rule.starts_at = start;
      price_rule.ends_at = end;
      await price_rule.save({});
    
      const discount = new DiscountCode({ session });
      discount.price_rule_id = rule_id;
      discount.code = discount_code;
    
      try {
        await discount.save({});
        req.body = { message: `Discount code created [  ${discount_code}  ]` };
        res.status(200).json(req.body);
      } catch (error) {
        req.body = {
          message: `Discount code creation failed with error ${error.message}`,
        };
      }
    });
    

    Call from theme-app-extension

    const createDiscountCode = async (rule_id, selected_discount_validity) => {
        const response = await Axios.get(`/apps/discount-express-proxy/create-discount-code-auth? 
        validity=${selected_discount_validity}&rule_id=${rule_id}`).then((response) => response.data);
        alert(response.message);
    };
    
    createDiscountCode(setSelectedRule, "15");
    

    This Route works from inside my app but I am looking to trigger it on the storefront.

    Screenshot 2022-10-06 151916

    I'm posting here as I'm using your boilerplate and am hoping I've just missed a step.

    Thanks.

    opened by nzmitch 3
  • GDPR not working

    GDPR not working

    I think that GDPR for this is not working.

    TypeError: Cannot read properties of undefined (reading 'webhookSubscriptions')

    Looks like gdpr must be registered in a different way

    https://github.com/Shopify/shopify-api-node/issues/290#issuecomment-1034844736

    bug 
    opened by i-moreno 3
Owner
Harshdeep Singh Hura
Sikh. I build things on Shopify and Shopify Plus.
Harshdeep Singh Hura
A anime discovery, streaming site made with NextJs and TailwindCSS. Uses AniList API and video data from GogoAnime. No ads and no vpn required

Animeflix - Watch animes online The open-source anime streaming service made with NextJs and TailwindCSS. It lets you search, watch animes without any

Chirag Singla 372 Dec 29, 2022
Vite-react-template: A starter for React with Typescript with the fast Vite

vite-react-template vite + react + router + ts A starter for React with Typescript with the fast Vite directory src assets components layout pages ins

설아아빠 1 Mar 22, 2022
Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration tem

Christian Hansen 25 Dec 18, 2022
Starter Kit for Vite, React, TypeScript, Tailwind and Node.js ESM

Starter Kit for Vite, React, TypeScript, Tailwind and Node.js ESM Minimal, sensible defaults, fast. Read the blog post about this template. Technologi

Christoph Nakazawa 299 Jan 5, 2023
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router

A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router

Coding Garden 67 Jan 3, 2023
A Vite + React starter template.

Vite Template React A Vite + React starter template. Folder Structure No configuration or complicated folder structures, just the files you need to bu

Safdar Jamal 36 Dec 20, 2022
⚡️ React based NodeGui Vite Starter Template

react-nodegui-vite-starter A React NodeGui starter template ⚡️ powered by Vite rather than webpack Use the Template GitHub Template Create a repo with

enpitsulin 5 Nov 14, 2022
Vite React Starter Template

Documentation Features pnpm Vite React ESBuild Windi CSS - on-demand CSS utilities DaisyUI axios TypeScript File based routing PWA ?? Use icons from a

Refael Ben Zvi 6 Dec 8, 2022
🚀 Vite React Starter Template

React View Boilerplate Features Vite with React, TypeScript. Getting started Clone the repo git clone -o seed -b main --single-branch https://github.c

SJ Distributor 7 Oct 27, 2022
Micro frontend template for starter using qiankun + Vite + TypeScript + Vue3 + React.js + Svelte 🚀

Micro frontend template for starter using qiankun + Vite + TypeScript + Vue3 + React.js + Svelte ??

Yuga Sun 28 Dec 20, 2022
⚡️ WebExtension Vite Starter Template with Preact

Preact Webext A Vite powered WebExtension (Chrome, FireFox, etc.) starter template with Preact. Credits This boilerplate is a shameless fork of antfu/

Piyush Suthar 18 Dec 1, 2022
Starter template using React on a website's frontend - without Node

React Frontend Quickstart ⚛️ ?? Starter template using React on a website's frontend - without Node Preview Documentation License Released under MIT b

Michael Currin 3 Nov 22, 2021
Fyodor Simonov 3 Apr 15, 2022
A boilerplate for using Next.js with Shopify, TypeScript, and react-query 🔥

next-shopify-ts The objective of this boilerplate is to set up everything the developer will need (in terms of configuration) to start a next + shopif

basement.studio 26 Jan 3, 2023
winwiz1 157 Dec 28, 2022
A Nextjs + Pinecone + OpenAI GPT site to surface answers to Shopify help center content

**This is a research demo. Support is not provided. Shopify Help Center Search via GPT Quickly surface answers from Shopify's help center using GPT. T

Gil Greenberg 35 Feb 12, 2023
All-in-one solution for configuring ESLint in all of your projects

✨ All-in-one solution for configuring ESLint in all of your projects ✨ Before you start The README on main branch can contain some unreleased changes.

Eslint Kit 53 Nov 28, 2022
Starter template for Tauri, bundling the frontend made with React using Deno with esbuild.

Starter template for Tauri, bundling the frontend made with React using Deno with esbuild.

Marc Espín 39 Dec 10, 2022