shopify / shopify-marketplaces-admin-app Goto Github PK

License: MIT License

JavaScript 99.95% HTML 0.05%

shopify-marketplaces-admin-app's Introduction

Shopify Merchant-Facing Channel App

This is a Node App with Express and React. It is to be used as a starting point for a merchant facing channel app for marketplaces. This repo makes use of Shopify CLI commands to help setup your app quickly and easily.

1. Getting Started
2. Overview of Code Structure
3. How to use this repo
4. Key Tech
5. License

1. Getting Started

Requirements:

Yarn
Sequelize-cli installed on your system
Shopify CLI installed and configured for local development (version >= 2.16.1)

To set up for first time

Clone this repository:

git clone https://github.com/Shopify/shopify-marketplaces-admin-app

Install dependencies:

yarn

Run migrations:

npx sequelize-cli db:migrate

Add scopes:

Create a .env file in the root folder Add the following scopes to .env file unauthenticated_read_product_listings,read_product_listings. Your .env file should look like the following:

SCOPES=unauthenticated_read_product_listings,read_product_listings

Run and install app:

To run this in dev:

shopify app serve

This will walk you through a series of steps to setup the app in your development store.

To run in production:

yarn build
yarn start

2. Overview of Code Structure

Familiarize yourself with the code structure for the merchant-facing channel app, to help you add all additional features that will be required, it is a great way to get started! The file structure follows that of Shopify CLI. We highly recommend familiarizing yourself with the Shopify CLI and Channels UI. A description of the code for this app can be found on the Marketplace Kit docs.

Familiarize yourself with the code structure for the merchant-facing app, to help orient you to subsequent Marketplace Kit tutorials.

Code structure

Folder/file	Contains
`app/*`	React code for the frontend, which the merchant sees in the Shopify admin
`server/index.js`	The setup for the app's Express server, the Shopify API library, and the Apollo GraphQL server
`server/custom-session-storage.js`	Custom session storage functions to store data in the database.You might need to edit this for the database that you're using
`server/handlers/*`	Helper functions for making REST and GraphQL calls to Shopify, so that you can do things like create Storefront Access Tokens. Also includes callback functions that are called when the app receives a webhook from Shopify
`server/helpers.js`	Helper and wrapper functions that call functions in the `handlers` folder
`webpack.config.js`	The configuration for webpack, which is the app's module bundler. You might need to edit this file depending on your needs for development and production

3. How to use this repo

We have bundled up the code from our tutorials to help you get started building marketplaces quickly. You can use the code in this repo out-of-the-box but we highly recommend familiarizing yourself with the codebase and tutorials so you can have a full understanding of how it works. Marketplace Kit requirements is a good starting point and provides explanations for the code. This will make it easier for you to modify and customize your marketplace.

4. Key tech

5. License

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

shopify-marketplaces-admin-app's People

Contributors

Stargazers

Watchers

shopify-marketplaces-admin-app's Issues

Issues on admin shop

please check this issue why it's come, I have tried many time to fix it but it's not.

TypeError: Cannot read properties of null (reading 'storefrontAccessToken')

i have followed the instruction by marketplace-kit then i started the service. i saw a link of ngrok then i click it, the page showcases the App install and ask for permission.

after this step then i tried to access the link of ngrok the error show up like below

is that my mistake or something? how can i solve this

The app couldn’t be loaded

When I start and type https://xxxx/login?shop=yyy.myshopify.com in browser, it goes to installation page to ask for permission. However, it does not works when I select a store to test from my app. There is no ‘/login’ in url

I have fixed this by adding
app.get('/)', async (req, res) => {
return res.redirect(‘/login?${req.query.shop}’);
});
However, it get’s caught in a redirect loop. App is installed incorrectly. It displays: “The app couldn’t be loaded. The app can’t load due to an issue with browser cookies. Try enabling cookies in your browser …”

I started application by “shopify app serve”
Any help here is appreciated.
Thanks.

Uncaught TypeError: Cannot read properties of undefined (reading 'adminShop')

Following the documentation here: https://shopify.dev/marketplaces/getting-started/get-started-with-shopify-marketplace-kit, I get to the end of the tutorial, after trying to access my app: https://{SHOPIFY_STORE}.myshopify.com/admin/apps/{APP_ID}/, I get this:

Uncaught TypeError: Cannot read properties of undefined (reading 'adminShop')     at Home (Home.jsx:33:5)

It seems to be related to this query:

gql`
  query HomePageQuery {
    adminShop {
      id
      domain
      appHandle
      publicationId
      availableProductCount
      onboardingInfoCompleted
      onboardingCompleted
    }
  }`

Shopify CLI 2.x is deprecated, and there is no equivalent of shopify2 app serve in CLI 3.x ?

I have migrated to shopify cli 3.x because "Shopify CLI 2.x is deprecated as of May 31, 2023. Shopify will block app and extension commands for all users in the coming weeks."
However, like the title stated, CLI 3.x command document doesn't seem to have an equivalent command to shopify2 app serve. Which makes it impossible to test the sales-channel app onboarding flow.
I think cli 3 dev is an alias for shopify app dev, which creats a tunnel between your local environment and the store using Cloudflare. (doing the same thing as cli 2). If that's the case, I think my question is how can i go install the sales-channel app?
(I've tried to install the app on my test store, but when directed, I got a 404 error)

Please kindly point me to the right resource to resolve this issue. thank you very much in advance.

Uncaught Error: [ProxyFacade] is not a <Route> component

Hello,
I have downloaded and run this repo and everything seems to be right on the app until y try to check on Shopify installed apps.
I got this message.

and the Router file it's also ok

I have read about a hot reload problem so I tried to disabled it but it doesn't work. I does not render anything.

What could be wrong?

`shopify app serve` does not work with Shopify Cli 3

shopify app serve does not work with Shopify CLI 3

How to run in dev?

Completed "Getting Started", home & onboarding page render nothing

Hi there, I completed all of the steps under Getting Started and neither the / route or the /onboarding routes render the expected content. The /settings route does render successfully.

Feeling good that the app was indeed mounting (since the Settings page rendered) and I could see network activity in Terminal, I decided to inspect the / route and I got the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'adminShop')

https://{my-dev-store}.myshopify.com/admin/apps/{my-first-app}

This same behavior and error can be seen when hitting the /onboarding route.

Investigating the error message, we can see that adminShop comes from the result of useQuery. Here are the relevant lines from app/src/sections/Home/Home.jsx:

import React from 'react';
import {gql, useQuery} from '@apollo/client';
import {Introduction, Overview} from './components';
import {Card, SkeletonBodyText, SkeletonPage} from '@shopify/polaris';

const HOME_PAGE_QUERY = gql`
  query HomePageQuery {
    adminShop {
      id
      domain
      appHandle
      publicationId
      availableProductCount
      onboardingInfoCompleted
      onboardingCompleted
    }
  }
`;

const Home = () => {
  const {data, loading} = useQuery(HOME_PAGE_QUERY);
  if (loading) {
    return (
      <SkeletonPage>
        <Card sectioned>
          <SkeletonBodyText />
        </Card>
      </SkeletonPage>
    );
  }

  const {
    adminShop: {
      domain,
      appHandle,
      publicationId,
      availableProductCount,
      onboardingInfoCompleted,
      onboardingCompleted,
    },
  } = data;

  //...

}

So clearly there's a disconnect here; my GraphQL query isn't returning anything useful. I'm very junior when it comes to GraphQL and Sqlite so I'm thinking there's something amiss with what I'm doing. I don't know how to test that GraphQL query or even verify that the database it's reading exists. I thought it might be worth noting that I did not modify the config/config.js file during the Getting Started steps, so that file looks like so:

config/config.js

{
  "development": {
    "dialect": "sqlite",
    "storage": "database.sqlite"
  },
  "test": {
    "use_env_variable": true,
    "dialect": "sqlite",
    "storage": ":memory:" 
  },
  "production": {
    "dialect": "sqlite",
    "storage": "database.sqlite"
  }
}

I'm unsure about the next step in debugging. I am new to developing for Shopify, and I'm still junior when it comes to a lot of concepts, so I'd really appreciate the education.

command app:serve not found

I am trying to build new shopify app and tried to all things in Getting started.
But when I run, shopify app serve, it is saying command app:serve not found.
How can I run this command?
Is there anything to configure?

App must set security headers to protect against clickjacking.

The app must be installed to perform the security check. Shopify expected OAuth to be initiated at https://app-security.myshopify.com/admin/oauth/authorize but was redirected to https://app-security.myshopify.com/admin/apps/d8fe67d6d0fe35202185abf63ea29ffb/?hmac=270b47e0ae71c321b604e68d0bd934d9a75ae9acc15b09c330de379791294c61&host=YXBwLXNlY3VyaXR5Lm15c2hvcGlmeS5jb20vYWRtaW4&shop=app-security.myshopify.com&timestamp=1665077426. The app must request installation immediately after clicking "add app." Apps must request shop access during installation or reinstallation if the app was previously uninstalled from the shop. Learn more about authentication in our developer documentation

TypeError: Cannot read properties of null (reading 'storefrontAccessToken')

Hi! I trying test shopify-marketplaces-admin-app with shopify-marketplaces-buyer-app, but during install channel (admin) app on dev store i get error:

TypeError: Cannot read properties of null (reading 'storefrontAccessToken')
    at _callee$ (/home/xxxxxx/projects/shopify-marketplaces-admin-app/server/handlers/mutations/create-storefront-access-token.js:22:53)

console.log('server/handlers/mutations/create-storefront-access-token.js',resp.body.data.storefrontAccessTokenCreate); // null

Docs says, that need setup ApolloClient

const client = new ApolloClient({
  uri: `https://${domain}/api/2023-04/graphql.json`,
  headers: {
    "X-Shopify-Storefront-Access-Token": storefrontAccessToken,
  },
  cache: new InMemoryCache(),
  });
  const { data } = await client.query({
  query: SHOP_PRODUCTS_QUERY,
  });
  setData(data);

but if look closely at the code, storefrontAccessToken generated automatically based on shopName, how its works ?
Would love to try and see marketplace kit in action.

Following Getting Started Instructions does not work and fails with <Provider> error

After following the Getting Starting instructions to the dot and running shopify2 app serve, it says that the app is running on http://localhost:8081 but when navigating to the url, the page doesn't load and gives the following error:

The above error occurred in the <Provider> component:
    in Provider (created by ExtendedAppProvider)
    in ExtendedAppProvider (created by AppProvider)
    in AppProvider (created by Router)
    in RenderedRoute (created by Routes)
    in Routes (created by Router)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Router)
    in Router
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

Can someone from the team please try running the instructions to check if the app still works?

Would highly appreciate figuring out what has broken. Thank you so much.

Env:

Node 16.13.1
Shopify 2.35.0

[nodemon] app crashed - waiting for file changes before starting.

Will there be a Shopify 3 version of this soon?

Since Shopify CLI 2 is deprecated, this codebase is basically deprecated too.

Any chance we could get a version compatible with Shopify CLI 3 please?

[BUG]: UI is not showing

I have done all things successfully but the app UI not showing, I'm trying all browsers still UI does not show
App run smoothly not a single error show but I don't know why UI not showing

`shopify2 app serve` yields an empty page

I followed the guide here: https://shopify.dev/docs/marketplaces/getting-started/get-started-with-shopify-marketplace-kit

I set up a free ngrok account, and linked it to my account. I also set up a partner account and a dev store, everything was linked in the .env file.
After starting the dev server with shopify2 app serve all I get is a blank page at http://localhost:8081 with several errors on the console, like:

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

What can be done?

MarketPlace Kit Support For CLI 3

I've spent a great deal of time developing on top of the Marketplace Kit pattern, which uses CLI 2.
Shopify is now sunsetting CLI 2 -- and I am trying to migrate my application over to CLI 3 (with some difficulty).

Will Shopify be upgrading the Marketplace Kit to the new CLI 3 file structure?

This would be an extremely useful for a reference as I and others transition our marketplace apps
over to the mandated CLI 3 structure.

AppBridge error on localhost

When I try to run the app in my local host I m getting the below error (I.e Host Must be provided).

does this work for production

does this work for production ?

App won't load - Cannot read property 'storefrontAccessToken' of null

Error:

`
┃ TypeError: Cannot read property 'storefrontAccessToken' of null

Error object inside Response:

[ ┃ { ┃ message: 'StorefrontAccessTokenCreate access denied', ┃ locations: [ [Object] ], ┃ path: [ 'storefrontAccessTokenCreate' ] ┃ } ┃ ]

I am using the following scopes : -

SCOPES=write_products,write_customers,write_draft_orders,unauthenticated_read_product_listings,read_product_listings

I followed all the steps given at https://shopify.dev/marketplaces/getting-started/get-started-with-shopify-marketplace-kit

EDIT: NVM, I thought I had turned app into sales channel but apparently not.

how to get the NGROK url running it with 'npm run dev'

Hi,
I am trying to run the app as per the steps provided but at some point we do require to run the app on a URL with NGROK and 'npm run dev ' is not doing that thing, So how ca we assign that to the sales channel app ?

Issue setting up this app

Is this sample app even maintained and working?

I was referred to this repository from the Shopify marketplaces documentation and this has been an absolute nightmare to setup. I fixed most of the setup issues and have the app server running locally, but there's all kind of console errors as shown below:

Any ideas?

App doesn't run

Hi, I tried to run the app on localhost but its packages has many dependency conflicts and if somehow you manage to install it and run it then store doesn't show anything at all. The Link will take you to the blank page. (Not even Shopify's admin will show up). Tried many things but still the same results. Sometimes, app installation page in shopify admin shows up and after that it goes blank. But this repository needs upgradation (usage notes and code).

Update:

Managed to run it after resolving conflicts but then it also has some authentication problem.

When you run it locally: if you start it like my-app-url.com/login?shop=my-store.com it works and lands you on the page where you can install the app. But if you try to install the app directly from apps -> select store -> development store then, you get "There’s no page at this address" error. So, I can't install it on a store after deployment.

Can't install required dependencies and run the project

Beginner here, I was following the steps given in Shopifys marketplace kit tutorial and I was running into issues with installing the required dependencies, it says could not resolve dependencies, and when I try to run it with shopify app serve it doesn't work. Am I missing something ?

Upgrade CLI to use v3.0

Our current docs use CLI v3.0 and this repo is built with v2.0

cc: @jeanrick

[BUG] Unsolvable error: Could not find "client" in the context

Hi @aeldamaty

I facing hard time to solve this error in app/src/index.jsx I am getting this error Could not find "client" in the context it should work fine as Apollo client is configured well in AppProvide' component which used in Router but the issue if i wrap the root component with ApolloProvider` i will get Invalid hook call as you know. So how i can solve this error I haven't wrote anything yet just trying to set up and do first run but it failed. could you please help me if you don't mind??

Thanks in advance

new issue

Home.jsx:33 Uncaught TypeError: Cannot read properties of undefined (reading 'adminShop')
at Home (Home.jsx:33:5)
at renderWithHooks (react-dom.development.js:14986:1)
at updateFunctionComponent (react-dom.development.js:17357:1)
at beginWork (react-dom.development.js:19064:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3946:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3995:1)
at invokeGuardedCallback (react-dom.development.js:4057:1)
at beginWork$1 (react-dom.development.js:23965:1)
at performUnitOfWork (react-dom.development.js:22780:1)
at workLoopSync (react-dom.development.js:22708:1)
Home @ Home.jsx:33
renderWithHooks @ react-dom.development.js:14986
updateFunctionComponent @ react-dom.development.js:17357
beginWork @ react-dom.development.js:19064
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackDev @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
beginWork$1 @ react-dom.development.js:23965
performUnitOfWork @ react-dom.development.js:22780
workLoopSync @ react-dom.development.js:22708
renderRootSync @ react-dom.development.js:22671
performSyncWorkOnRoot @ react-dom.development.js:22294
(anonymous) @ react-dom.development.js:11328
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11277
flushSyncCallbackQueueImpl @ react-dom.development.js:11323
flushSyncCallbackQueue @ react-dom.development.js:11310
scheduleUpdateOnFiber @ react-dom.development.js:21894
dispatchAction @ react-dom.development.js:16140
state.forceUpdate @ useQuery.js:28
InternalState.setResult @ useQuery.js:236
onError @ useQuery.js:106
notifySubscription @ module.js:137
onNotify @ module.js:176
error @ module.js:229
(anonymous) @ iteration.js:4
iterateObserversSafely @ iteration.js:4
ObservableQuery.reportError @ ObservableQuery.js:452
error @ ObservableQuery.js:424
(anonymous) @ iteration.js:4
iterateObserversSafely @ iteration.js:4
error @ Concast.js:37
notifySubscription @ module.js:137
onNotify @ module.js:176
error @ module.js:229
(anonymous) @ asyncMap.js:27
Promise.catch (async)
(anonymous) @ asyncMap.js:26
notifySubscription @ module.js:132
onNotify @ module.js:176
next @ module.js:225
(anonymous) @ iteration.js:4
iterateObserversSafely @ iteration.js:4
next @ Concast.js:25
notifySubscription @ module.js:132
onNotify @ module.js:176
next @ module.js:225
(anonymous) @ parseAndCheckHttpResponse.js:123
Promise.then (async)
readJsonBody @ parseAndCheckHttpResponse.js:121
(anonymous) @ createHttpLink.js:108
Promise.then (async)
(anonymous) @ createHttpLink.js:100
Subscription @ module.js:190
subscribe @ module.js:264
complete @ Concast.js:62
Concast.start @ Concast.js:89
Concast @ Concast.js:81
QueryManager.getObservableFromLink @ QueryManager.js:555
QueryManager.getResultsFromLink @ QueryManager.js:596
resultsFromLink @ QueryManager.js:777
QueryManager.fetchQueryByPolicy @ QueryManager.js:803
fromVariables @ QueryManager.js:656
QueryManager.fetchQueryObservable @ QueryManager.js:671
ObservableQuery.fetch @ ObservableQuery.js:338
ObservableQuery.reobserve @ ObservableQuery.js:418
(anonymous) @ ObservableQuery.js:29
Subscription @ module.js:190
subscribe @ module.js:264
(anonymous) @ useQuery.js:114
(anonymous) @ useSyncExternalStore.js:31
invokePassiveEffectCreate @ react-dom.development.js:23488
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackDev @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
flushPassiveEffectsImpl @ react-dom.development.js:23575
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11277
flushPassiveEffects @ react-dom.development.js:23448
performSyncWorkOnRoot @ react-dom.development.js:22270
(anonymous) @ react-dom.development.js:11328
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11277
flushSyncCallbackQueueImpl @ react-dom.development.js:11323
flushSyncCallbackQueue @ react-dom.development.js:11310
unbatchedUpdates @ react-dom.development.js:22439
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26021
render @ react-dom.development.js:26104
render @ index.jsx:10
./app/src/index.jsx @ index.jsx:18
webpack_require @ bootstrap:24
(anonymous) @ startup:6
(anonymous) @ startup:6
react-dom.development.js:20086 The above error occurred in the component:

at Home (https://bf07-2407-d000-a-e421-d3c-d7a9-b74c-bfdb.ngrok-free.app/main.js:25868:75)

[ProxyFacade] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Can't run an application.

Console log image

Have this error after first shopify app serve

Steps to reproduce:

Open partners dashboard. Create a custom app. Enable sales channel.
clone this repo
yarn
shopify app serve

Any changes inside project files, any changes inside package.json.
Follow the instructions from the documentation installed the latest version of nodejs - 17.7.1.

@shopify/channels-ui@1 is not compatible with @shopify/app-bridge-react@3

@shopify/channels-ui@1 has dependency to @shopify/app-bridge-react@2 and therefore we cannot use @shopify/app-bridge-react@3

I am not sure if this is the right place, but we can't add issues here: https://github.com/Shopify/channels-ui-docs