I’ve been working with Vue Storefront for the past few months and it’s been a great experience. It’s one of the few open-source solutions available to implement PWAs using Magento 2 (and many other e-commerce platforms) in the backend so it brings modern solutions out of the box to a lot of common requirements for web based applications (offline support, lazy loading, small bundle size, server side rendering, etc).

To get a basic understanding of how Vue Storefront works I thought it would be a good idea to document how to implement an Instragram feed in your store. It’s a relatively simple tasks but it involves many core concepts of Vue Storefront so it can be a useful case of “learn by doing”.

Before we start

It’s important to understand the Vue Storefront is a collection of multiple “pieces” working together, not a single big entity. The most significant ones would be:

vue-storefront: handles the frontend of the store, it’s powered by (you guessed it) VueJS and many other packages that determine how the data should be displayed.

vue-storefront-api: since Vue Storefront is 100% platform agnostic this service is needed to act as a middle layer between the frontend and the backend. In most cases we’ll use it to connect to Magento but it can interact with any number of providers, eg: WordPress, MailChimp, or in this case Instagram.

If you’re interested in knowing more about Vue Storefront architecture I recommend giving the official technical screencast a watch as it does a better job at explaining all the tools behind it that I ever could in this article.

Setting up the API endpoint

To get a user’s Instagram feed we need to use an access token to query Facebook’s Graph API. It’s not ideal to expose this kind of information in the front-end as it can lead to security vulnerabilities so we should do this server-side.

Luckily we can easily extend vue-storefront-api with custom endpoints that return the data we need. 🎉

We’ll start by creating the following index.js file in src/api/extensions/instagram-api/ :

Basically what this does is extend Vue Storefront’s express Router with a new /feed endpoint that will make a request to Facebook’s Graph API with our page ID and access token. If there’s any error it will return a 500 status code with the error response, if not it will return the user’s Instagram feed as a JSON array.

It also accepts an optional “limit” parameter to specify the maximum number of items to return.

As you can see we didn’t hardcode the page ID or the access token, as they will be project-specific these should be stored in the config/local.json file.

Open the local.json file and add an instagram key to the extensions list with the following information:

"instagram": {

"pageId": "FB PAGE ID",

"accessToken": "FB PAGE ACCESS TOKEN"

}

To get your page ID follow these instructions: facebook.com/help/community/question/?id=378910098941520

To get a “never expire” access token follow this SO answer: stackoverflow.com/a/35481577/455319

Now to enable our extension add “instagram-api” to the list of registeredExtensions in your local.json config file as well.