Shafi Imam 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 = {

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

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

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

Allow CORS

Install koa2-cors npm package

npm install koa2-cors

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

import cors from 'koa2-cors'

	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 : {},
	});

	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);

	'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);

	<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