I am not an engineer
Must read:Is there a real future in data analysis for self-learners without a math degree?

How to use the Shopify-node-api npm module

Pre-requisites

  • You are using Express JS as framework for your app (the instructinos below might also work with other node.js frameworks though, but please don’t ask me how)
  • You therefore are familiar with the structure (views, routes, etc.) of an app built with Express JS and know how to use NPM
  • You have already set up/developed your Express JS app (which will be called n00bapp)
  • You have a Shopify Partners account (if you already have a shop where you customize the frontend, you still need a shopify partner account to develop your app)

Terminology

Let’s use the same terminology as Shopify:

  • Client = your app, which interacts with Shopify via the Shopify API
  • API = the Shopify API used by the client. It grants the client access to information related to the store, products, carts, etc.
  • User = the Shopify store which will interact with your app

What it is all about

Let’s say you want to create or modify metafields for your Shopify store from your frontend code. You would try to do that by using the regular Shopify API directly in your frontend code, written in JavaScript. But Shopify won’t let you play with its regular API with frontend code. As a matter of fact, Shopify has developed a certain number of “APIs”, among which you have the JavaScript Buy SDK and the Ajax API. Both can be used in frontend code, but not for the creation or modification of metafields.

Therefore, you will have to use a so-called public app. This means that you have to develop this public app, deploy and host it yourself, install it in your shop, install a proxy (see why below “Set up a public app”) and use your public app in your frontend code.

1) Set up a public app

The reason why you create a public app and NOT a private app is because you want to install a proxy to use your app from your frontend Javascript code. If your app is hosted at heroku for instance, its url might be something like myn00bapp.herokuapp.com.* Now if the purpose of your app is to return json files, you would not be able to make a synchronous or asynchronous request to it from your frontend code in Shopify. In other words, Shopify does not allow you to get files on other domains due to its restrictive cross domain policy. This is why you install an “app proxy”. Instead of accessing your app on another domain, you will be able to access it via a proxy url such as myshop.shopify.com/apps/myn00bapp/.

*no offense there. Personally, I take pride in being a n00b. It’s a bit like watching the world through children’s eyes. Every new discovery is a huge success!

2) Install required node packages

shopify-node-api

Huge thanks to the authors of the shopify-node-api package! You need this package in your node app to handle authentication and other interactions with the Shopify API Check on the NPM website how to install it, which is very simple with NPM. After installation, check whether your app.js file includes the following line: var shopifyAPI = require('shopify-node-api'); If it doesn’t, insert it in the “require section” at the beginning of the app.js file.

nonce

This package is a very basic one. It produces a random string, which will be required in the Shopify authentication process. You can install it simply by typing “npm install nonce” in your terminal.

3)Understand Shopify’s authentication process

You cannot simply develop an app and then used it in your frontend code. You have to install it first in your shop. This very installation process has to be handled by your app. This is what this post is all about: install your own public Node/Express app.

What basically happens is:

  1. you set up an endpoint (in this case "myn00bapp.herokuapp.com/install/" which initiates the installation of your app
  2. You call the install endpoint, which sends a request to Shopify. Shopify then redirects to another endpoint (in this case "myn00bapp.herokuapp.com/finish_auth/"). At that point, Shopify passes on a few parameters by adding it to the redirection url.
  3. The finish_auth picks up these parameters and… finishes the authentication process, at the end of which you have a permanent access token. This means that your app is installed.

After the installation process, you can set up the proxy in the shopify admin panel of your shop. But first follow these few, simple steps!

4) Set up the installation process

Set up the routes for the ‘install‘ endpoint

First of all, set up a new route for the installation process by adding the following lines to your app.js file: var route_install = require('./routes/install'); –> as you might already know, this line simply requires the install.js file in your routes folder, which we have yet to create

Now link your new “install” route to
app.use('/install', route_install);

Create the js file handling the ‘install‘ endpoint

As for your other routes, create the install.js file in your routes folder. This file defines what happens when you navigate to myn00bapp.herokuapp.com/install/.

var express = require('express');
var router = express.Router();

var shopifyAPI = require('shopify-node-api');//it looks like you actually have to require the shopify-node-api package again here...

//DEFINE LOCAL VARIABLES
var ldb_uri_base = "http://myn00bapp.herokuapp.com";//THIS IS ONLY AN EXAMPLE!!
var shopify_hidden_ss = "SHARED SECRET OF YOUR APP HERE";
var shopify_hidden_ak = "API KEY HERE";
var shopify_hidden_shopname = "Shopify subdomain here";
var noncerequired = require('nonce')();
var noncestring = noncerequired();

//THIS ONE WRITES METAFIELDS
// Shopify authentication process
router.get('/', function(req, res, next) {
  var Shopify = new shopifyAPI({
    shop: shopify_hidden_shopname, // MYSHOP.myshopify.com
    shopify_api_key: shopify_hidden_ak, // Your API key
    shopify_shared_secret: shopify_hidden_ss, // Your Shared Secret
    shopify_scope: 'write_products',// define the scope according to your needs!
    redirect_uri: ldb_uri_base+'/finish_auth',
    nonce: noncestring // you must provide a randomly selected value unique for each authorization request
  });
  var auth_url = Shopify.buildAuthURL();
  res.redirect(auth_url);//this is where Shopify redirects you to ".../finish_auth/"!
});

module.exports = router;

5) Set up the finishing process

Set up the routes for the ‘finish_auth‘ endpoint

First of all, set up a new route for the finishing process by adding the following lines to your app.js file: var route_install = require('./routes/finish_auth');

Link your new “finish_auth” route to
app.use('/finish_auth', route_finish_auth);

Create the js file handling the ‘finish_auth‘ endpoint

As for your other routes, create the finish_auth.js file in your routes folder. This file defines what happens when Shopify redirects to myn00bapp.herokuapp.com/finish_auth/.

var express = require('express');//requires Express
var router = express.Router();//creates router object

var shopifyAPI = require('shopify-node-api');//SHOPIFY

//DEFINE LOCAL VARIABLES
var shopify_hidden_at = "";//define empty variable for access token
var ldb_uri_base = "http://myn00bapp.herokuapp.com";//THIS IS ONLY AN EXAMPLE!!
var shopify_hidden_ss = "SHARED SECRET OF YOUR APP HERE";
var shopify_hidden_ak = "API KEY HERE";
var shopify_hidden_shopname = "SHOPIFY SUBDOMAIN HERE";


router.get('/', function(req, res){
    //This is where it all happens: this is what happens you access "myn00bapp.herokuapp.com/install/"
    
    var query_params = req.query;
    
    //define the configs for your connection
    var config = {
        shop: shopify_hidden_shopname, // MYSHOP.myshopify.com
        shopify_api_key: shopify_hidden_ak, // Your API key
        shopify_shared_secret: shopify_hidden_ss, // Your Shared Secret
        shopify_scope: 'write_products',//you might want to adapt the scope to your needs
        redirect_uri: ldb_uri_base+'/finish_auth',//not sure whether you have to specify that, but hey it works
        nonce: query_params.state//this is where you grab the random string created before
    };
    
    //create new shopify object for the next step
    var Shopify = new shopifyAPI(config);
    
    Shopify.exchange_temporary_token(query_params, function(err, data){
        shopify_hidden_at=data['access_token'];
        // YOU HAVE SAVED YOUR ACCESS_TOKEN YAY!
    });
});

module.exports = router;

6) Check your code

You have correctly followed the steps above and adapted the following variables in the code: * ldb_uri_base (e.g.http://myn00bapp.herokuapp.com) * shopify_hidden_ss –> Shared secret of your app. You find this in the app details in the admin panel of your Shopify partner account, where you created your public app, ’member? * shopify_hidden_ak –> The API key of your app goes here * shopify_hidden_shopname –> Insert the subdomain of your Shopify shop (e.g. myn00bshop for a shop located at myn00bshop.myshopify.com)

7) Test your installation

Save your changes with your favorite versioning system, deploy your app (in our case on heroku).

Open a browser and connect as shop owner to shopify (not as shopify partner!).

Then follow the URL of the install endpoint of your app (in our case http://myn00bapp.herokuapp.com/install).

If everything is working fine, you should be redirected to Shopify asking you to confirm the installation of your app.

Hit okay and you should be redirected to the finish_auth endpoint. In our case, we have not defined any further actions. Therefore, the app will keep loading and Shopify eventually show an error message. However, if you connect to your shop admin pannel, you should now see your app installed among other public app. Congratulations!

8) Set up a proxy and start using your app in frontend

If your app works fine on your server (or in this case heroku) and if it is correctly installed in your shop, you can set up a proxy to your app in the admin panel of your shop (not in the partners panel).

If you don’t see the point in setting up a proxy, you should read this post again from the beginning or have a cup of freshly brewed Moka Harrar…

For instance, the endpoints might be accessible through a proxy like this: myshop.shopify.com/apps/myn00bapp/. Now, Shopify won’t block your API calls anymore as you have appeased the wrath of the CORS-god!

Comments

  1. By Beth

  2. By Deb

  3. By Joel

  4. By ldebrot

  5. By ldebrot

  6. By ldebrot

Leave a Reply

Your email address will not be published. Required fields are marked *