Weaverse / shopify-mern-boilerplate

A Boilerplate for creating MERN stack Shopify app.

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

Name	Description
src/server	Backend Server app
src/client	Client React app
assets	Static assets (fonts, css, js, img) / Client build dir
dist	Server built app
.dockerignore	Folder and files ignored by docker usage.
.env.example	Your API keys, tokens, passwords and database URI.
.eslintrc	Rules for eslint linter.
.gitignore	Folder and files ignored by git.
.travis.yml	Configuration files for continue integration.
index.js	The main application file.
src/router.js	The main application Router file.
docker-compose.yml	Docker compose configuration file.
Dockerfile	Docker configuration file.
package.json	NPM dependencies.

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