I am new to shopify, I want to create a public app which can communicate with store.
I have created a shopify partner account, an app and setup a Codeigniter project. Also added app url using ngrok.
Can anyone guide me with what should be the next step?
When you say public app I believe that you want to set a view or functionality available to your customers, and that will communicate with your store. Let's say your store is:
https://mystore.myshopify.com
Your App should consider an URL for backend and frontend. Probably the App that you have now is the backend and will be embedded in your Admin Dashboard after you have installed. By now, I'm assuming that you got it done.
Backend: https://4b67b991.ngrok.io/backend
Frontend: https://4b67b991.ngrok.io/frontend
The App you created should have the scope "Online Store" so that you can set up a Proxy App.
Once you set up a Proxy app, with let's say:
Sub path prefix: apps
Subpath: myapp
Proxy URL: https://4b67b991.ngrok.io/frontend
Now, when you go to: https://mystore.myshopify.com/apps/myapp, the proxy URL will be embedded in your store using the header and footer of your theme and in the middle area, you can create your custom functionality using the Shopify API.
Before your app can be embedded in the frontend (with header and footer), you should change the content type of your document. In Laravel I use the following code:
$response = Response::make($contents, 200);
$response->header('Content-Type', 'application/liquid');
Your question is quite general and I'm 100% sure about what you want to achieve, but I believe that it's a starting point.
Related
I am new here and new to Laravel, sorry if I am posting in the wrong place or if I should ask it in another place. I have a Laravel application I want to deploy on Google Cloud Platform - App Engine. However I want a setup with a landing page and the laravel app in a different directory, so I can have something like mydomain.com poiting for my landing page and dashboard.mydomain.com poiting to my Laravel app. How is the best approach to make it:
1 - Two Laravel apps one for the landing page and one for the dashboard application in a subdirectory?
2 - A simple static html landing in the main directory and the laravel dashboard appication in a subdirectory?
3 - Two separeted google cloud platform projects, one for the landing page and the other for the dashboard app?
I have no idea how is the best and professional method of doing it here. I really appreciate some opinions here.
I need a bit of expert feedback on this please as I do not want to start my project in the wrong way.
I would like to keep my Vue code separated from Laravel, the reason being, I may use this vue app later on on Cordova.
First question:
I understand how to host the Laravel API and Vue app on 2 different domains, no problems at all but I am unsure on how to setup the folder when both apps are on the same domain.
I know that Laravel should be hosted below the public_html folder and have a symlink to the public folder for security purpose. But where should my vue app goes?
Second question:
When I save images from Vue(as I am creating a blog) the images are going to the Laravel store/images folder, so each time I want to show an article in my vue app, the API must each time request the content(text and images) from the Laravel API, is this fine? Will the Google bot be able to trigger the API request when requesting the content?(I actually never thought of this...)
Thank you so much!
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
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.
My Laravel 5.6 app has a Vue.js frontend. The Vue.js app is in the resources directory. I have gone through several articles that use Prerender SPA plugins. These articles are for the stand alone vue.js app and have an index.html file. In Laravel's case we have index.php. How do I make my Laravel Vue.js App SEO freindly. At a minimum I would like to make the front/home page of the app SEO friendly.
I think, as an alternative solution, you can use https://prerender.io/ service (up to 250 pages Free for caching) to do the pre-rendering for your SPA application.
If you are going to implement https://prerender.io/ service, you would require to generate all the sitemap URL paths and upload them to this service via their npm plugin (prerender-spa-plugin) and configure your .htaccess file for search engine crawlers. So search engine crawlers will redirect to this pre-render service and picked your website, cached static web page for service engine indexing, and show that cached page as the search result.
For more info, you can refer below;
https://prerender.io/documentation
https://snipcart.com/blog/vue-js-seo-prerender-example
Cheers!
Definitely recommend checking out Nuxt.js! It is a production-ready framework built on top of VueJS. With Nuxt.js You can create 100% SEO-friendly app with SPA-like routing.
Check this awesome Toptal article about "Creating Server-side Rendered Vue.js Apps Using Nuxt.js"
I am a new php developer. Am developing my website using codeigniter and got stuck when i tried to make the backend. Am using CMS backend that comes with its own folder with everything (.htaccess, its own MVC etc) so I put all my frontend folders into one folder called frontend withinn the application folder but now I cannt view my frontend pages. I get this: The configuration file does not exist. Please help me step by step.
check out this link to know the MVC pattern Codeigniter.
controller and model ----- Backend
Views --- Frontend