shafiimam

Allow CORS

1. Install koa2-cors npm package

npm install koa2-cors

2.In the server.js file Import koa2-cors

import cors from 'koa2-cors'

shafiimam

Shopify NextJs App Route Propagation

In shopify next js app page are generated in the server and then served to client side. Under the hood next js uses react's routing to dynamically update the browser URL without reloading the page again and again.

To make this work and change the URL without loading the page inside a shopify embedded app's iframe follow these steps

1. Create a file named RoutePropagator.js.
2. Paste this code inside RoutePropagator.js

import React from "react";
import Router, { useRouter } from "next/router";

shafiimam

I have added an assetPrefix: http://localhost:8081 in the next.config file. Due to this the application gets the assets directly from the localhost bypassing the tunnel. Also the hmr reloading happens directly form localhost server.

Only the requests directed to the shopify api go through the tunnel.

const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
const host = JSON.stringify(process.env.HOST);
module.exports = {

shafiimam

                                    <div class="productGrid__formItem">
                                      {%- liquid
                                         assign current_variant = product.selected_or_first_available_variant | default: product.variants.first
                                         assign current_selling_plan_allocation = current_variant.selected_selling_plan_allocation

                                         if current_selling_plan_allocation == nil and current_variant.requires_selling_plan
                                          assign current_selling_plan_allocation = current_variant.selling_plan_allocations | first
                                         endif

                                         assign offer = current_selling_plan_allocation | default: current_variant

shafiimam

'use strict';
(function () {
  const originalAddEventListener = EventTarget.prototype.addEventListener;
  const originalRemoveEventListener = EventTarget.prototype.removeEventListener;

  const {hostname, pathname} = self.location
  const safeFetchHandlers = new WeakMap();
  let currentOnFetch = null;
 
  const matches = /^\/(apps|a|community|tools)\/[^\/]+/.exec(pathname);

shafiimam

  function debounce(func, wait=700, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);

shafiimam

const ErrorHandler = (err, req, res, next) => {
  console.log('Middleware Error Hadnling');
  const errStatus = err.statusCode || 500;
  const errMsg = err.message || 'Something went wrong';
  res.status(errStatus).json({
    success: false,
    status: errStatus,
    message: errMsg,
    stack: process.env.NODE_ENV === 'development' ? err.stack : {},
  });