Free Shopify and Next.js App Template for serverless non-embedded Apps

by React

?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 disable Embed your app in Shopify admin
  • Fill out your .env file
    • SHOPIFY_API_KEY: The Shopify Api key of the app, you have just created
    • SHOPIFY_API_SECRET_KEY: The Shopify Api secret key of the app, you have just created
    • SCOPES: The access scopes your app needs
    • HOST: The Url of your app. Leave this empty for development
    • SHOP: Your dev stores url
    • DEV_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
  • 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.

? Built with

GitHub

View Github