❗ This project is currently based on deprecated technology (the shopify-express module). We will be updating it to use tools more inline with our internal node applications shortly.
In the meantime if you would like a headstart learning some of our other tools, this workshop can help you get started. You can also jump straight to the final step7 branch to have a reasonable starting place to build an app from. Note that it is not, however, meant to be a production ready app boilerplate.
If you would like to go straight to the source, many of our application libraries can be found in the quilt repo. These are all used internally and written against technologies we use for our own applications. Some handy libraries for node apps you may want to look at are:
Finally, as mentioned above we have some new things coming down the pipe soon. ❤️✨
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 startrun the serveryarn run devrun it in development mode with hotreloadingyarn run prodrun it in production mode with compiled assetsyarn run cleanclean 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)
- Note the tunnel url (we’ll refer to it as
- 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.exampleto.envand- 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
- Set Add HOST from your tunnel service as
- 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.