The goal of this example app is to provide a starting point for Shopify app developers so that they will be able to quickly spin up an embedded Shopify app using Node and KOA and get started using the Polaris design system and React components.
This example app uses Node, KOA, Webpack, React, and Shopify/polaris
- React app using Polaris
- Shopify Authentication based on Koa
npm startoryarn startBuild React and run the server with nodemon watchnpm buildoryarn buildBuild React
- Install Node.js version 8.1.0 or higher.
- Install project dependencies with
npm installoryarn install
- Create a tunnel to localhost:4000 using forward or ngrok
- Note the tunnel url (we’ll refer to it as
HOST)
- Sign into your Shopify Partner Dashboard
- Click 'Apps' in the sidebar and create a new app
- Set the app url to
{{ HOST }}/ - Set the whitelisted URL to
{{ HOST }}/shopify/auth/callback - Go to extensions tab and enable “Embed in Shopify admin”
- Copy
API KeyandApp Secretfrom app settings
- Open
.envand- Set Add HOST from your tunnel service as
SHOPIFY_APP_HOST - Add the api key from partners dash as
SHOPIFY_API_KEY - Add the api secret from partners dash as
SHOPIFY_SECRET
- Set Add HOST from your tunnel service as
- Open
client/src/App.jsxand- Add the api key from partners dash as
apiKeyin AppProvider component parameter
- Add the api key from partners dash as
- Run
npm install && npm startoryarn install && yarn start - Open a browser to
{{ HOST }}/install - Enter your store’s domain and hit install
- 🚀 🎉
There are three main sections that provide the foundations for this example. They are organized as follows:
This folder provides the Koa 2 server as well as a basic view. The server provides basic endpoints for installation and authentication in Shopify as public app, hosting the React app.
The code here is mostly glue code, with the bulk of the actual functionality provided by the modules in koa-shopify-auth.
This example app consumes the koa-shopify-auth library to quickly connect to the Shopify API.
This example app uses the Official shopify-api-node library to connect to the Shopify API.
This folder contains the UI demo using Polaris React components.
This folder conatins application starter point