chubuntuarc / Shopify-App-Template

Custom Shopify App Template customization.

Shopify Custom App Template

Template to build a custom private app implementation.
Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Getting Started
  • How it works

About The Project

Template to build a custom private app implementation. Tha base of this template was created based on the specifications of the Shopify App Development documentation. https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/set-up-your-app

Built With

Technologies and apps in this App.

• NodeJS 10+
• React JS
• Next JS
• MySQL
• Ngrok
• Koa
• Koa Shopify Auth
• Shopify Polaris

Getting Started

Clone the repo, then run the node commands.

How it works

clone the repo.

git clone {thisRepoUrl}.gti

Install the dependencies.

npm install

Run the project

DEV MODE
npm run dev

DEV SERVER
ngrok http {port}

...............................
PRODUCTION MODE
npm run build
npm run start

Change the .env BASE_PATH
=> BASE_PATH=/route/to/Custom-App-Folder

DEV Notes

* Main view.
./pages/index.js

* To create a testing server run, and can been tested on a store.
ngrok http {port}

* To connect your app with a shopify store, set the keys on the .env file.
SHOPIFY_API_KEY='YOUR API KEY FROM SHOPIFY PARTNERS DASHBOARD'
SHOPIFY_API_SECRET_KEY='YOUR API SECRET KEY FROM SHOPIFY PARTNERS DASHBOARD'

* Main server functionality on
 app.prepare()  from ./server.js

* To test the server without shopify auth, comment this:
  server.use(verifyRequest()); on ./server.js

* Replace the MYSQL connection params from .env.

>> Sample endpoints <<
// Custom endpoints...
// Get sample data.
router.get('/getSampleDataWithAuth', verifyRequest(), async ctx => { ctx.body = endpoints.sampleData(); }); // Using the Shopify Auth Middleware.
router.get('/getSampleData', async ctx => { ctx.body = endpoints.sampleData(); }); // Open endpoint.
// Test MySQL connection.
router.get('/testMySQL', async ctx => { ctx.body = await MySQL.testConnection(); });
// Read from MySQL DB.
router.post('/selectSample', async ctx => { 
    let queryData = ctx.request.body;
    ctx.body = await MySQL.select(queryData);
});