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 Express.js and get started using the Polaris design system and React components.

This example app uses Node, Express, Webpack, React, Redux, and Shopify/polaris

• React app using Polaris
• Shopify Authentication
• Get API data from Shopify and pass it to React
• Hot reloading with Webpack
• Example data flow with Redux and Polaris React components
• Example webhook set up

• yarn run start run the server
• yarn run dev run it in development mode with hotreloading
• yarn run prod run it in production mode with compiled assets
• yarn run clean clean the compiled assets directory

• Install Node.js version 8.1.0 or higher. We recommend using nvm to manage Node versions.
• Install the Yarn.js package manager. Yarn is an alternative to npm that is faster and more reliable.
• Install project dependencies with yarn install

• Create a tunnel to localhost:3000 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”

• Rename .env.example to .env and
  • Set Add HOST from your tunnel service as SHOPIFY_APP_HOST
  • Add the api key from partners dash as SHOPIFY_APP_KEY
  • Add the api secret from partners dash as SHOPIFY_APP_SECRET
• Run yarn install && yarn run 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 Express.js server as well as a few basic views. The server provides some example endpoints that demonstrate mounting the Shopify routes for installation and authentication, hosting the React app with an API proxy, and a basic webhook.

The code here is mostly glue code, with the bulk of the actual functionality provided by the modules in shopify-express.

This example app consumes the shopify-express 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 and Redux to manage app state. It has two subfolders called store and actions which are Redux concepts.

store is the thing that models the state of the app. Every Redux action sends a message to a function called a 'reducer'. The reducer uses the information in the message to progress the state of the app. For simplicity, we included the reducer in the same file as the store configuration.

actions are the functions that are fired from interactions with the UI.