nestjs-shopify / example-nx-app Goto Github PK

View Code? Open in Web Editor NEW

30.0 30.0 9.0 2.73 MB

Example monorepo app with @nest-shopify/nest-shopify using NestJS backend and NextJS frontend

TypeScript 95.00% JavaScript 5.00%

example-nx-app's Introduction

A monorepo containing packages to develop Shopify application using NestJS.

Upgrade to `@nestjs-shopify/express` or `@nestjs-shopify/fastify`

See upgrade guide here.

Packages

Package	Description
@nestjs-shopify/express	Initialize the `@shopify/shopify-api` package with your Express NestJS app.
@nestjs-shopify/fastify	Initialize the `@shopify/shopify-api` package with your Fastify NestJS app.
@nestjs-shopify/common	Common utilities (like HMAC validation, applying CSP headers, etc.)
@nestjs-shopify/webhooks	Register and process Shopify webhooks.
@nestjs-shopify/auth	Setup online and/or offline auth and protected your NestJS API with Shopify JWT session tokens.
@nestjs-shopify/graphql	Setup a Shopify GraphQL Admin API proxy that is automatically setup to use online session tokens.
@nestjs-shopify/core	Private module to be used by `@nestjs-shopify/express` or `@nestjs-shopify/fastify`

Example app

See https://github.com/nestjs-shopify/example-nx-app for an example app with a NextJS frontend.

License

This project is licensed under the MIT License - see the LICENSE file for details.

example-nx-app's People

Contributors

Stargazers

Watchers

Forkers

dominikx96 arn48 rockyhubjsc ishara55 davidpestana tshal0 zhjch05 quoccao-dev sanjun1995

example-nx-app's Issues

Next Link doesn't work

@tolgap
I'm trying to navigate between the next pages using next/link, but I'm getting:

I also see in the console:

https:///?shop= to start the OAuth installation procedure of your app.
is not working for me.
this is the error message i get when making a request
[Nest] 25804 - 06/16/2023, 2:35:22 PM LOG [Shopify] [shopify-api/DEBUG] App is embedded, looking for session id in JWT payload | {isOnline: true} [Nest] 25804 - 06/16/2023, 2:35:22 PM LOG [Shopify] [shopify-api/ERROR] Missing Authorization header, was the request made with authenticatedFetch? | {isOnline: true} [Nest] 25804 - 06/16/2023, 2:35:22 PM ERROR [ShopifyAuthGuard] Error: No session found

Multistore

How can I configure the application to run in multi store?

Module not found: Can't resolve 'graphql'

Thank you for your good work 😄.

I keep tightly on the guide.

But after npx nx run web:serve, it throws an error as follows:

error - ../../node_modules/graphql-tag/lib/index.js:2:0
Module not found: Can't resolve 'graphql'

Import trace for requested module:
../../node_modules/@apollo/client/core/index.js
../../node_modules/@apollo/client/index.js
./pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

Env:
OS win10 Pro
Node v16.14.2
Yarn 1.22.5

Please help, thank you in advance.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

nodenv

.node-version

node 18.17

npm

package.json

@apollo/client ^3.7.11

@mikro-orm/core ^5.6.16

@mikro-orm/nestjs 5.2.3

@mikro-orm/sqlite ^5.6.16

@nestjs-shopify/auth 5.0.0

@nestjs-shopify/common 1.0.0

@nestjs-shopify/core 4.0.0

@nestjs-shopify/express 1.0.0

@nestjs-shopify/graphql 5.0.0

@nestjs-shopify/webhooks 4.0.0

@nestjs/common 10.3.3

@nestjs/config 3.2.0

@nestjs/core 10.3.3

@nestjs/platform-express 10.3.3

@shopify/app-bridge 3.7.10

@shopify/app-bridge-react 4.0.0

@shopify/app-bridge-utils 3.5.1

@shopify/polaris ^10.41.0

@shopify/shopify-api 9.3.2

core-js ^3.30.0

express ^4.18.2

graphql ^16.6.0

next 13.4.1

react 18.2.0

react-dom 18.2.0

reflect-metadata ^0.1.13

regenerator-runtime 0.13.11

rxjs ^7.8.0

tslib ^2.5.0

uuid ^9.0.0

@babel/preset-react ^7.18.6

@mikro-orm/cli ^5.6.16

@nestjs/schematics 10.1.1

@nestjs/testing 10.3.3

@nrwl/cli 15.9.3

@nrwl/cypress 16.8.1

@nrwl/eslint-plugin-nx 16.8.1

@nrwl/jest 16.8.1

@nrwl/js 16.8.1

@nrwl/linter 16.8.1

@nrwl/nest 16.8.1

@nrwl/next 16.8.1

@nrwl/node 16.8.1

@nrwl/react 16.8.1

@nrwl/web 16.8.1

@nrwl/webpack 16.8.1

@nrwl/workspace 16.8.1

@pmmmwh/react-refresh-webpack-plugin ^0.5.10

@svgr/webpack ^6.1.2

@testing-library/react 13.4.0

@types/express 4.17.17

@types/jest 29.5.12

@types/node 18.17.0

@types/react 18.2.79

@types/react-dom 18.2.25

@typescript-eslint/eslint-plugin 5.62.0

@typescript-eslint/parser 5.62.0

babel-jest 29.7.0

css-loader ^6.7.3

cypress ^12.2.0

eslint 8.49.0

eslint-config-next 13.4.1

eslint-config-prettier 8.8.0

eslint-plugin-cypress 2.13.3

eslint-plugin-import 2.27.5

eslint-plugin-jsx-a11y 6.7.1

eslint-plugin-react 7.32.2

eslint-plugin-react-hooks 4.6.0

jest 29.7.0

jest-environment-jsdom 29.7.0

nx 16.8.1

prettier ^2.8.7

react-refresh ^0.14.0

react-test-renderer 18.2.0

style-loader ^3.3.2

stylus ^0.59.0

stylus-loader ^7.1.0

ts-jest 29.1.0

ts-node 10.9.1

typescript 4.9.5

url-loader ^4.1.1

webpack ^5.78.0

webpack-merge ^5.8.0

Check this box to trigger a request for Renovate to run again on this repository

Theme App Extension

Hi @tolgap

I used this started (it's really good!), but I'm curious about the theme app extension. My app adds some elements to the theme, so following the newest Shopify requirements, I have to use an app extension to add some liquid and scripts.

How do you deal with app extension, nx monorepo and shopify cli? Do you have any tips?
Thanks!

Cannot complete OAuth process. Could not find an OAuth cookie for shop url

After installation and get this error on my cli. Am only using the nest Api.
`Nest] 1376 - 07/05/2023, 6:19:34 PM LOG [Shopify] [2023-07-05T17:19:34Z] [shopify-api/INFO] Beginning OAuth | {shop: movitt.myshopify.com, isOnline: true, callbackPath: /api/online/callback}
[Nest] 1376 - 07/05/2023, 6:19:34 PM LOG [Shopify] [2023-07-05T17:19:34Z] [shopify-api/DEBUG] OAuth started, redirecting to https://movitt.myshopify.com/admin/oauth/authorize?client_id=9a9b833688216761f62b0b282b7959a3&scope=write_products%2Cwrite_orders&redirect_uri=https%3A%2F%2F3f5e-197-211-53-125.ngrok-free.app%2Fapi%2Fonline%2Fcallback&state=380819473534067&grant_options%5B%5D=per-user | {shop: movitt.myshopify.com, isOnline: true}
[Nest] 1376 - 07/05/2023, 6:19:37 PM LOG [Shopify] [2023-07-05T17:19:37Z] [shopify-api/INFO] Completing OAuth | {shop: movitt.myshopify.com}
[Nest] 1376 - 07/05/2023, 6:19:37 PM LOG [Shopify] [2023-07-05T17:19:37Z] [shopify-api/DEBUG] OAuth request is valid, requesting access token | {shop: movitt.myshopify.com}
[Nest] 1376 - 07/05/2023, 6:19:37 PM LOG [Shopify] [2023-07-05T17:19:37Z] [shopify-api/DEBUG] Making HTTP request - POST https://movitt.myshopify.com/admin/oauth/access_token - Headers: {"User-Agent":["Shopify API Library v7.4.0 | Node v18.16.0"],"Content-Type":["application/json"],"Content-Length":["141"]} - Body: "{"client_id":"9a9b833688216761f62b0b282b7959a3","client_secret":"0ee97e276007eaae592d8cdbc239bdd2","code":"838fcfe1c7c3b3c3abfaf35440d2f6cf"}"
[Nest] 1376 - 07/05/2023, 6:19:38 PM LOG [Shopify] [2023-07-05T17:19:38Z] [shopify-api/DEBUG] Completed HTTP request, received 200
OK
[Nest] 1376 - 07/05/2023, 6:19:38 PM LOG [Shopify] [2023-07-05T17:19:38Z] [shopify-api/INFO] Creating new session | {shop: movitt.myshopify.com, isOnline: true}
[Nest] 1376 - 07/05/2023, 6:27:58 PM LOG [Shopify] [2023-07-05T17:27:58Z] [shopify-api/INFO] Completing OAuth | {shop: movitt.myshopify.com}
[Nest] 1376 - 07/05/2023, 6:27:58 PM LOG [Shopify] [2023-07-05T17:27:58Z] [shopify-api/ERROR] Could not find OAuth cookie | {shop:
movitt.myshopify.com}
[Nest] 1376 - 07/05/2023, 6:27:58 PM ERROR [ExceptionsHandler] Cannot complete OAuth process. Could not find an OAuth cookie for shop url: movitt.myshopify.com

Error: Cannot complete OAuth process. Could not find an OAuth cookie for shop url: movitt.myshopify.com
at Object. (C:\Users\user\Desktop\movit\erp-plugin-shopify\node_modules@shopify\shopify-api\lib\auth\oauth\oauth.ts:159:13)
at Generator.next ()
at fulfilled (C:\Users\user\Desktop\movit\erp-plugin-shopify\node_modules\tslib\tslib.js:164:62)
at processTicksAndRejections (node:internal/process/task_queues:95:5)`

Shopify App Installation

Dear

I hope this message finds you well. I am a web system developer and a beginner at developing Shopify apps. I am writing to express my gratitude for the project you've created. It has been an invaluable resource in my learning journey, and I am truly thankful.

That being said, I am currently experiencing a bit of trouble and was hoping you might provide some advice. Specifically, I am unable to install from the server log. When using the ShopifyCLI, the URL format becomes https://[tunnel_url]?shop=[dev_store].myshopify.com&host=[host]. However, the format appears different for the Example @nestjs-shopify application.

On the Shopify page, it states:

Step 3: Install your app on your development store
With the server running, press p to open your app's preview URL in a browser.

The URL follows the format https://[tunnel_url]?shop=[dev_store].myshopify.com&host=[host], where [host] is the base64-encoded host parameter used by App Bridge, and represents the container the app is running in.

When you open the URL, you're prompted to install the app on your development store.

Click Install app to install the app in the store.

I've followed these steps, but I'm still encountering issues. I would deeply appreciate any assistance or guidance you might be able to provide. Once again, thank you for your time and for the valuable resource you've shared with the community.

InvalidHmacError: Query does not contain an HMAC value

I've been following this example while working with NestJS. Everything is working well except for registering the webhook and the final redirection to online authentication. Attached is a screenshot of the error. Any assistance would be greatly appreciated.

Question on App Setup URL

What should we add in the App setup section as
App URL and Allowed redirection URL(s)?

I'm little stuck here.

Strategy for determining need for auth

Hi there, thanks for this repo.

I am attempting a similar configuration as your repo and have taken some inspiration, but am a bit confused by this line.

Perhaps this is just a lack of understanding of the Shopify API, but I am always provided a host, regardless of whether I am authenticated.

Additionally, this doesn't verify that my tokens are valid as described here in the documentation.

Is this just not something you've accounted for or am I missing something here?

Unable to Register webhook for ORDERS_CREATE,ORDERS_UPDATED

Orders Create WEBHOOK Not registering, but same way I was able to register product update and product create.

import { InjectRepository } from '@mikro-orm/nestjs';
import {
  ShopifyWebhookHandler,
  WebhookHandler,
} from '@nestjs-shopify/webhooks';
import { Logger } from '@nestjs/common';
import { ShopEntity } from '../../../shops/shop.entity';
import { ShopRepository } from '../../../shops/shop.repository';

@WebhookHandler('ORDERS_CREATE')
export class OrdersCreateWebhookHandler extends ShopifyWebhookHandler<unknown> {
  private readonly logger = new Logger('ORDERS_CREATE');

  constructor(
    @InjectRepository(ShopEntity) private readonly shopRepo: ShopRepository
  ) {
    super();
  }

  async handle(
    domain: string,
    data: unknown,
    webhookId: string
  ): Promise<void> {
    const shop = await this.shopRepo.findOneOrFail({ domain });

    this.logger.log(`Webhook ${webhookId} called for shop ID ${shop}`);
    this.logger.log(`ORDERS_CREATE`);
    this.logger.log(data);
  }
}

Here is my shoify core config

export const getShopifyCoreConfig = (): Omit<
  ShopifyCoreOptions,
  'sessionStorage'
> => ({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  apiVersion: ApiVersion.October22,
  hostName: process.env.HOST.replace(/https?:\/\//, ''),
  isEmbeddedApp: true,
  scopes: [
    'read_orders',
    'write_products',
    'write_orders',
    'write_shipping',
    'write_translations',
    'read_translations',
    'write_customers',
    'read_customers',
    'write_checkouts',
    'read_checkouts',
    'read_third_party_fulfillment_orders',
    'write_third_party_fulfillment_orders',
    'read_merchant_managed_fulfillment_orders',
    'write_merchant_managed_fulfillment_orders',
    'read_fulfillments',
    'write_fulfillments',
    'read_order_edits',
    'write_order_edits',
  ],
  hostScheme: 'https',
  restResources,
  logger: {
    httpRequests: false,
    level:
      process.env.NODE_ENV !== 'production'
        ? LogSeverity.Debug
        : LogSeverity.Info,
    log: (_severity, msg) => logger.log(msg),
    timestamps: false,
  },
});

0Auth does not complete after installation

Hi i am only using the nest api. But it fails to complete oAuth after installation
[Nest] 26656 - 07/04/2023, 8:18:09 PM LOG Login using: http://localhost:8080/?shop=techlut.myshopify.com [Nest] 26656 - 07/04/2023, 8:18:09 PM LOG Install using: http://localhost:8080/api/offline/auth?shop=techlut.myshopify.com [Nest] 26656 - 07/04/2023, 8:18:16 PM LOG [Shopify] [shopify-api/INFO] Beginning OAuth | {shop: techlut.myshopify.com, isOnline: false, callbackPath: /api/offline/callback} [Nest] 26656 - 07/04/2023, 8:18:16 PM LOG [Shopify] [shopify-api/DEBUG] OAuth started, redirecting to https://techlut.myshopify.com/admin/oauth/authorize?client_id=9fa1ac769ce08f45f544a795f131ddcf&scope=write_products&redirect_uri=https%3A%2F%2F61c6-197-211-53-114.ngrok-free.app%2Fapi%2Foffline%2Fcallback&state=144088630062304&grant_options%5B%5D= | {shop: techlut.myshopify.com, isOnline: false}
How do i get nest to complete oAuth for me test via postman

I want to switch from Express to Fastify

Thank you for the great repo. I want to switch from Express to Fastify, please guide me.

I simply switched from Express to Fastify and encountered this error
import { Request, Response } from 'express';
->
import { FastifyRequest as Request, FastifyReply as Response } from 'fastify';

Production build and run

Hey, thanks for the great repo!

I was just wondering how to run your project here in production?
Which commands must be run to run the nest app and serve the nextjs content?

Appreciate it!