Saleor App Template

Bare-bones boilerplate for writing Saleor Apps with Next.js.

What's Saleor App in a nutshell

Saleor App is the fastest way of extending Saleor with custom logic using asynchronous and synchronous webhooks (and vast Saleor's API). In most cases, creating an App consists of two tasks:

Writing webhook's code realizing your custom logic
Developing configuration UI that can be exposed to Saleor Dashboard via specialized view (designated in App's manifest).

What's included?

🚀 Communication between Saleor instance and Saleor App
⚙️ Encapsulated Metadata and Private Metadata handling logic
📱 Configuration UI
⚡ Example of Webhook handling
🧭 Example of using App Extension
📖 Manifest with webhooks using custom query

Why Next.js

You can use any preferred technology to create Saleor Apps, but Next.js is among the most efficient for two reasons. The first is the simplicity of maintaining your API endpoints/webhooks and your apps' configuration React front-end in a single, well-organized project. The second reason is the ease and quality of local development and deployment.

Learn more about Apps

Apps guide

Configuring apps in dashboard

How to use this project

Saleor CLI for the win 🚀

Saleor CLI is designed to save you from the repetitive chores around Saleor development, including creating Apps. It will take the burden of spawning new apps locally, connecting them with Saleor environments, and establishing a tunnel for local development in seconds.

Full Saleor CLI reference

If you don't have (free developer) Saleor Cloud account create one with the following command:

saleor register

Now you're ready to create your first App:

saleor app create [your-app-name]

In this step, Saleor CLI will:

clone this repository to the specified folder
install dependencies
ask you whether you'd like to install the app in the selected Saleor environment
create .env file
start the app in development mode

Having your app ready, the final thing you want to establish is a tunnel with your Saleor environment. Go to your app's directory first and run:

saleor app tunnel

Your local application should be available now to the outside world (Saleor instance) for accepting all the events via webhooks.

A quick note: the next time you come back to your project, it is enough to launch your app in a standard way (and then launch your tunnel as described earlier):

pnpm dev

Local development without CLI

Add URL of your Saleor instance to the .env file:

NEXT_PUBLIC_SALEOR_HOST_URL=https://your-saleor-instance.com

Install dependencies pnpm install

Start local server pnpm run dev

Follow the guide how install your app and use tunneling tools like localtunnel or ngrok in order to expose your local server.

If you use saleor-dashboard and your local server is exposed, you can install your app by following this link:

[YOUR_SALEOR_DASHBOARD_URL]/apps/install?manifestUrl=[YOUR_APPS_MANIFEST_URL]

Generated schema and typings

Commands build and dev would generate schema and typed functions using Saleor's GraphQL endpoint. Commit generated folder to your repo as they are necessary for queries and keeping track of the schema changes.

Learn more about GraphQL code generation.

muflhi01 / saleor-app-template Goto Github PK