Getting Started with Shopify App Development - Setting Up Ngrok
To play along with the code in this Tutorial Series:
Check out the code at: https://bit.ly/shopify-app-code
Once you clone the repo & npm install all the folders, then you can follow these steps:
Step 1: Create a Shopify Partners Account:
https://www.shopify.com/partners
Step 2: Create a Shopify App via the Partners Dashboard
Step 3: Create a Development Store via the Partners Dashboard
Step 4: Download & Install Ngrok
This forwards requests from your local machine to Shopify's API so that you can develop locally for an app on a Development Store.
https://ngrok.com/download
Step 5: Within your command line, run:
ngrok http 3000
This will run ngrok on Port 3000.
Step 6: Within your Partners Dashboard, click into your Shopify Development App & then click the "App Setup" tab.
Look for the field: "App URL"
That's where you put the Ngrok URL generated via the Command Line. For example:
App URL
https://41cf-2a00-a040-197-929f-5c67-...
Allowed redirection URL(s)
https://41cf-2a00-a040-197-929f-5c67-...
Step 6b:
Within your SK Repo, cd into the "Admin-Backend" folder & run:
npm start
Then cd into the "Admin-Frontend" folder & run:
npm run dev
Step 7: Install your Shopify App on your Development Store
Step 8: Within your Command Line, run:
ngrok http 7777
Step 9: Within your Partners Dashboard, click into your Shopify Development App & then click the "App Setup" tab.
Look for the field: "App proxy" field.
This allows Shopify to act as a proxy when shoppers visit a specific subpath of the Shopify Site with the App Installed. For example:
Subpath prefix:
community
Subpath:
connect
Then, paste the Ngrok URL generated via the Command Line. For example:
Proxy URL
https://5f0c-2a0e-9cc0-2349-8400-b90e...
Step 10:
Within your SK Repo, cd into the "Proxy" folder & run:
npm start