I’m a beginner in Shopify and trouble with Shopify proxy
Front Store: https://bhavin.myshopify.com
App Store: https://myapp.ngrok.io
(Laravel)
I want to add two files (custom js and manifest.json) in my front store.
Install and authentication is working fine
I’m adding manifest.json
something like that
var link = document.createElement('link');
link.rel = 'manifest';
link.href = 'https://myapp.ngrok.io/manifest.json';
document.head.appendChild(link);
1. Without proxy
manifest.json
file added properly but throw error something like that
Access to resource at 'https://myapp.ngrok.io/manifest.json' from origin 'https://bhavin.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. With Proxy
Subpath prefix: apps
Subpath: cnv
Proxy URL: https://myapp.ngrok.io/proxy
Now my manifest.json
file path is https://bhavincb.myshopify.io/apps/cnv/manifest.json
Url is working fine if I’m logged in the admin panel
If I open that URL when I’m not logged in then it returns
This page isn’t working with HTTP ERROR 401
In my front store while load manifest file it is showing something like that (when logged in)
Manifest: Line: 1, column: 1, Unexpected token.
There is not any error in manifest.json
I’m using Laravel Shopify package
As of I know, I guess I’m doing something wrong with a proxy configuration.
Does anyone have a solution?
Any help will appreciate
2
Answers
I resolved to issue my self (ref. 2. With Proxy)
The issue with my store actually I'm using free trial and in free trial you can't disable password protection
If your password protection is enabled and you are trying to access proxy URL without logged in, in that case, Shopify won't allow accessing.
After purchase plan, it's working fine
The better recipe to follow might be this. One, you use your App to access the assets of the shop theme, and upload your manifest.json text file as an asset. That means it is accessible in Liquid, in the theme, and the shop can therefore render it and make it useful.
Second, use your App to install custom.js as a ScriptTag asset. That is the usual way to accomplish running your own JS.
The App Proxy is not really meant for use the way you are using it.