https://github.com/nestjs-shopify/example-nx-app

Example monorepo app with @nest-shopify/nest-shopify using NestJS backend and NextJS frontend
https://github.com/nestjs-shopify/example-nx-app

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nestjs-shopify/example-nx-app
• Owner: nestjs-shopify
• Created: 2022-08-04T11:35:00.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-22T18:56:50.000Z (about 1 month ago)
• Last Synced: 2024-11-22T19:39:11.455Z (about 1 month ago)
• Language: TypeScript
• Size: 2.34 MB
• Stars: 31
• Watchers: 1
• Forks: 11
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Example @nestjs-shopify application

Uses [NX monorepo](https://nx.dev) under the hood. An example Shopify application

with a [NestJS](https://nestjs.com) API backend, and a [NextJS](https://nextjs.org) frontend.

Uses [@nestjs-shopify/*](https://github.com/nestjs-shopify/nestjs-shopify) packages.

## Architecture

The NestJS `api` application is proxied via NX proxies to `/api`. The `api` application also contains

a global prefix to `/api`.

Because we use NX proxies, we basically disable the usage of NextJS API requests in the `pages/api` folder because the requests are always proxied to the backend.

This application uses [Mikro-ORM](https://mikro-orm.io) for it's database. When performing offline auth, the authenticated shop gets inserted into the `shops` table with an offline token. This token can then be used for webhook/background operations.

## Setup

Install dependencies

```

npm install

```

Copy the example environment variables and fill in yours:

```

cp .env.example .env

```

The `HOST` env var should be your full Ngrok URL eg: https://7c350f27f75f.ngrok.io

Run the migrations:

```

cd apps/api

npx mikro-orm schema:update -r

```

## Running

On terminal window 1:

```

npx nx run api:serve

```

On terminal window 2:

```

npx nx run web:serve

```

Visit `https:///?shop=` to start the OAuth installation procedure of your app.

## Authentication with Shopify

The application allows for both Online and Offline authentication. But Shopify recommends using

`offline` auth for only installing your application, and `online` auth for loading data in your frontend.

The `ProductsController` in this application that returns the total product count in Shopify, utilizes `@ShopifyOnlineAuth()` decorator. That signals our application to look for online JWT tokens when calling the `GET /api/products/count` route.

The frontend utilizes `@shopify/app-bridge` to transparently fetch online tokens for us using the `userLoggedInfetch` helper function.