Shopify MERN App - Developer Guide

Prerequisites

• MongoDB
• Node.js 8.0+
• Command Line Tools
• Mac OS X: Xcode (or OS X 10.9+: xcode-select --install)
• Windows: Visual Studio OR Visaul Studio Code + Windows Subsystem for Linux - Ubuntu
• Ubuntu / Linux Mint: sudo apt-get install build-essential
• Fedora: sudo dnf groupinstall "Development Tools"
• OpenSUSE: sudo zypper install --type pattern devel_basis

Note: If you are new to Node or Express, I recommend to watch Node.js and Express 101 screencast by Alex Ford that teaches Node and Express from scratch. Alternatively, here is another great tutorial for complete beginners - Getting Started With Node.js, Express, MongoDB.

Features

• Shopify Polaris newest version.
• Shopify Express
  • Authenticate with Shopify
  • Usage of Shopify API
  • Shopify Webhook
• React ^16.3
• Hot Reload React app
• Full ES6 support for both Server and Client
• MongoDB model

Todos

• Add GraphQL
• Add Server side render

Getting Started

The easiest way to get started is to clone the repository:

# Go to you Workspace
cd /path-to-your-workspace

# Clone the project
git clone this-project-url

# Change directory
cd project-dir

# Install NPM dependencies
yarn install

# Copy .env.example to .env
cp .env.example .env

# Then simply start your app
yarn dev

Warning: While working with Shopify, it require https, you might need to download ngrok. You must start ngrok after starting the project.

# start ngrok to intercept the data exchanged on port 8080
./ngrok http 8080

Next, you must use the https url defined by ngrok, for example https://minhpt.ngrok.io

Replace it with BASE_URL defined in .env.example file.

Project Structure

Setting up Shopify development app

Create an Shopify app in Shopify Partner

Get the SHOPIFY_APP_KEY and SHOPIFY_APP_SECRET in App info and update the .env file.

Update the Whitelisted redirection URL(s) to https://your-domain.ngrok.com/shopify/auth/callback

Save and go to https://your-domain.ngrok.com/shopify/auth?shop=your-shop.myshopify.com