Giter VIP home page Giter VIP logo

app-boilerplate's Introduction

Shopify Next App Boilerplate

Running Locally

First, run the development server:

npm run dev

Shopify won't allow non https apps even in development, use ngrok to setup a https tunnel to localhost like so:

ngrok http 3000

Shopify

In the partner dashboard create an app, make note of the credentials and use the following as settings in app setup:

  • App URL: https://{ngrok-url}
  • Whitelisted Redirection URL(s): https://{ngrok-url}/auth/callback

Install URL

To install the app on a Shopify shop construct a URL like the following:

https://{shop}.myshopify.com/admin/oauth/authorize?client_id={appKey}&scope={scopes}&redirect_uri={redirectUri}

  • shop: The myshopify subdomain of the shop you wish to install on.
  • appKey: Your app's API key, found in partner dashboard.
  • scopes: Comma-separated list of scopes, e.g. read_products,read_customers
  • redirectUri: Should be https://{appUrl}/auth/callback, this must also be added to Whitelisted Redirection URL(s) in partner dashboard for the app

Environment Variables

The app requires some environment variables, when running locally it requires a .env file in the root of the project with the following:

  • SESSION_PASSWORD: Password for encrypting sessions, must be at least 32 characters.
  • GLOBAL_TOKEN_KEY: Key for the global token window object.
  • SHOPIFY_APP_URL: The full URL of where the app is hosted.
  • SHOPIFY_APP_KEY: Shopify App API key from partner dashboard.
  • SHOPIFY_APP_SECRET: Shopify App API secret from partner dashboard.
  • SHOPIFY_ADMIN_GRAPHQL_ENDPOINT: The admin GraphQL API endpoint to use in the proxy.
  • FAUNA_DB_SECRET: Fauna db secret.

TODO: Improve this readme as we add more functionality here

app-boilerplate's People

Contributors

benjaminrcooper avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.