πFree Shopify x Next.js App Template for serverless non-embedded Apps
Everything to build your next non-embedded Shopify App and Marketing pages in one place. This Template utilizes Middleware and APIs for OAuth, so no custom server is needed.
Intentionally barebones. π¦΄
Table of Contents
- π€© Features
- π Requirements
- π€ Getting Started
- π One click deploy
- π§° Built with
π€© Features
- β‘ Next.js – React Framework for static rendering
- β¨ Serverless Architecture
- π³ App Subscrptions
- πΎ Session Storage with MongoDB
- π Localtunnel for development
- π Apollo/Client
- πͺ Webhooks set up
π Requirements
- Shopify Partner Account
- Shopify Dev Store
π€ Getting Started
- Click
Use this template
or this link - Create an App in your Shopify Partner Account
- Set https://localhost as the App Url for now
- Go to
App Setup
->Embedded app
and disableEmbed your app in Shopify admin
- Fill out your
.env
fileSHOPIFY_API_KEY
: The Shopify Api key of the app, you have just createdSHOPIFY_API_SECRET_KEY
: The Shopify Api secret key of the app, you have just createdSCOPES
: The access scopes your app needsHOST
: The Url of your app. Leave this empty for developmentSHOP
: Your dev stores urlDEV_APP_SUBDOMAIN
: Your desired localtunnel subdomain. If it isn’t available, you will get assigned a random subdomain.MONGO_URI
: Your MongoDB connection uri. If you leave this empty, a local instance of MongoDB will be used.
- Run
npm run install
- Run
npm run dev
- Set your App Urls in the partner dashboard. Your Apps localtunnel Url will be displayed in the console on
npm run dev
and written to your.env
file- App Url:
https://{YOUR_APP_URL}/app
- Allowed redirection Urls
https://{YOUR_APP_URL}/api/auth
https://{YOUR_APP_URL}/api/auth/callback
https://{YOUR_APP_URL}/api/auth/offline
https://{YOUR_APP_URL}/api/auth/offline-callback
- App Url:
- Visit
https://{YOUR_APP_URL}/login
to install your app
π One click deploy
Clone and deploy this template in one click to Vercel for free!
Check out our Next.js deployment documentation for more details.