Shopify Merchant-Facing Channel App

This is a Node App with Express and React. It is to be used as a starting point for a merchant facing channel app for marketplaces. This repo makes use of Shopify CLI commands to help setup your app quickly and easily.

---

• 1. Getting Started
• 2. Overview of Code Structure
• 3. How to use this repo
• 4. Key Tech
• 5. License

---

1. Getting Started

Requirements:

• Yarn
• Sequelize-cli installed on your system
• Shopify CLI installed and configured for local development (version >= 2.16.1)

To set up for first time

Clone this repository:

git clone https://github.com/Shopify/shopify-marketplaces-admin-app

Install dependencies:

yarn

Run migrations:

npx sequelize-cli db:migrate

Add scopes:

Create a .env file in the root folder Add the following scopes to .env file unauthenticated_read_product_listings,read_product_listings. Your .env file should look like the following:

SCOPES=unauthenticated_read_product_listings,read_product_listings

Run and install app:

To run this in dev:

shopify app serve

This will walk you through a series of steps to setup the app in your development store.

To run in production:

yarn build
yarn start

2. Overview of Code Structure

Familiarize yourself with the code structure for the merchant-facing channel app, to help you add all additional features that will be required, it is a great way to get started! The file structure follows that of Shopify CLI. We highly recommend familiarizing yourself with the Shopify CLI and Channels UI. A description of the code for this app can be found on the Marketplace Kit docs.

Familiarize yourself with the code structure for the merchant-facing app, to help orient you to subsequent Marketplace Kit tutorials.

Code structure

Folder/file	Contains
app/*	React code for the frontend, which the merchant sees in the Shopify admin
server/index.js	The setup for the app's Express server, the Shopify API library, and the Apollo GraphQL server
server/custom-session-storage.js	Custom session storage functions to store data in the database.You might need to edit this for the database that you're using
server/handlers/*	Helper functions for making REST and GraphQL calls to Shopify, so that you can do things like create Storefront Access Tokens. Also includes callback functions that are called when the app receives a webhook from Shopify
server/helpers.js	Helper and wrapper functions that call functions in the handlers folder
webpack.config.js	The configuration for webpack, which is the app's module bundler. You might need to edit this file depending on your needs for development and production

3. How to use this repo

We have bundled up the code from our tutorials to help you get started building marketplaces quickly. You can use the code in this repo out-of-the-box but we highly recommend familiarizing yourself with the codebase and tutorials so you can have a full understanding of how it works. Marketplace Kit requirements is a good starting point and provides explanations for the code. This will make it easier for you to modify and customize your marketplace.

4. Key tech

• Yarn
• NPM
• Node
• Express
• Webpack
• React
• Sequelize
• Channels UI Library.
• GraphQL and REST
• Storefront API

5. License

This repository is available as open source under the terms of the MIT License.