Skip to content
This repository has been archived by the owner on Apr 3, 2023. It is now read-only.

Latest commit

 

History

History
109 lines (73 loc) · 4.25 KB

README.md

File metadata and controls

109 lines (73 loc) · 4.25 KB
Raw

Shopify Node App

node-pre-gyp ERR! Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v3.1.13/node-v64-linux-x64.tar.gz estos tienen v64: https://npm.taobao.org/mirrors/sqlite3/v4.0.0/ https://npm.taobao.org/mirrors/sqlite3/v4.2.0/ ahora, como podré forzar una versión en particular?

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

Features

  • 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

Commands

  • 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

Running the project locally

Build and run tests with Docker (without install dependencies)

  1. Run ./scripts/run-with-docker.sh, in windows sh ./scripts/run-with-docker.sh

Build and run tests locally

  1. yarn install
  2. yarn test
  3. yarn build

Run locally

  1. yarn install
  2. npm install cross-env
  3. yarn run dev

To try it inside Shopify, it will be necessary to create the tunnel and register the app as it is described in following sections.

Install project dependencies

  • Install Node.js version 10.0.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

Allow your app to talk to Shopify

  • Create a tunnel to localhost:3000 using forward or ngrok
    • Note the tunnel url (we’ll refer to it as HOST)

Register your app in the Partner Dashboard

  • 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”

Configure and add to a store

  • 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
  • 🚀 🎉

Architecture

There are three main sections that provide the foundations for this example. They are organized as follows:

server

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.

shopify-express

This example app consumes the shopify-express library to quickly connect to the Shopify API.

shopify-api-node

This example app uses the Official shopify-api-node library to connect to the Shopify API.

client

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.