Giter VIP home page Giter VIP logo

shopify-app-template-php's Introduction

Shopify App Template - PHP

This is a template for building a Shopify app using PHP and React. It contains the basics for building a Shopify app.

Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with these steps.

Benefits

Shopify apps are built on a variety of Shopify tools to create a great merchant experience. The create an app tutorial in our developer documentation will guide you through creating a Shopify app using this template.

The PHP app template comes with the following out-of-the-box functionality:

  • OAuth: Installing the app and granting permissions
  • GraphQL Admin API: Querying or mutating Shopify admin data
  • REST Admin API: Resource classes to interact with the API
  • Shopify-specific tooling:
    • AppBridge
    • Polaris
    • Webhooks

Tech Stack

This template combines a number of third party open source tools:

These third party tools are complemented by Shopify specific tools to ease app development:

  • Shopify API library adds OAuth to the Laravel backend. This lets users install the app and grant scope permissions.
  • App Bridge React adds authentication to API requests in the frontend and renders components outside of the embedded App’s iFrame.
  • Polaris React is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
  • Custom hooks make authenticated requests to the GraphQL Admin API.
  • File-based routing makes creating new pages easier.
  • @shopify/i18next-shopify is a plugin for i18next that allows translation files to follow the same JSON schema used by Shopify app extensions and themes.

Getting started

Requirements

  1. You must create a Shopify partner account if you don’t have one.
  2. You must create a store for testing if you don't have one, either a development store or a Shopify Plus sandbox store.
  3. You must have PHP installed.
  4. You must have Composer installed.
  5. You must have Node.js installed.

Installing the template

This template runs on Shopify CLI 3.0, which is a node package that can be included in projects. You can install it using your preferred Node.js package manager:

Using yarn:

yarn create @shopify/app --template php

Using npx:

npm init @shopify/app@latest -- --template php

Using pnpm:

pnpm create @shopify/app@latest --template php

This will clone the template and install the CLI in that project.

Setting up your Laravel app

Once the Shopify CLI clones the repo, you will be able to run commands on your app. However, the CLI will not manage your PHP dependencies automatically, so you will need to go through some steps to be able to run your app. These are the typical steps needed to set up a Laravel app once it's cloned:

  1. Start off by switching to the web folder:

    cd web
  2. Install your composer dependencies:

    composer install
  3. Create the .env file:

    cp .env.example .env
  4. Bootstrap the default SQLite database and add it to your .env file:

    touch storage/db.sqlite

    NOTE: Once you create the database file, make sure to update your DB_DATABASE variable in .env since Laravel requires a full path to the file.

  5. Generate an APP_KEY for your app:

    php artisan key:generate
  6. Create the necessary Shopify tables in your database:

    php artisan migrate

And your Laravel app is ready to run! You can now switch back to your app's root folder to continue:

cd ..

Local Development

The Shopify CLI connects to an app in your Partners dashboard. It provides environment variables, runs commands in parallel, and updates application URLs for easier development.

You can develop locally using your preferred Node.js package manager. Run one of the following commands from the root of your app:

Using yarn:

yarn dev

Using npm:

npm run dev

Using pnpm:

pnpm run dev

Open the URL generated in your console. Once you grant permission to the app, you can start development.

Deployment

Application Storage

This template uses Laravel's Eloquent framework to store Shopify session data. It provides migrations to create the necessary tables in your database, and it stores and loads session data from them.

The database that works best for you depends on the data your app needs and how it is queried. You can run your database of choice on a server yourself or host it with a SaaS company. Once you decide which database to use, you can update your Laravel app's DB_* environment variables to connect to it, and this template will start using that database for session storage.

Build

The frontend is a single page React app. It requires the SHOPIFY_API_KEY environment variable, which you can find on the page for your app in your partners dashboard. The CLI will set up the necessary environment variables for the build if you run its build command from your app's root:

Using yarn:

yarn build --api-key=REPLACE_ME

Using npm:

npm run build --api-key=REPLACE_ME

Using pnpm:

pnpm run build --api-key=REPLACE_ME

The app build command will build both the frontend and backend when running as above. If you're manually building (for instance when deploying the web folder to production), you'll need to build both of them:

cd web/frontend
SHOPIFY_API_KEY=REPLACE_ME yarn build
cd ..
composer build

Hosting

When you're ready to set up your app in production, you can follow our deployment documentation to host your app on a cloud provider like Heroku or Fly.io.

When you reach the step for setting up environment variables, you also need to set the following variables:

Variable Secret? Required Value Description
APP_KEY Yes Yes string Run php web/artisan key:generate --show to generate one.
APP_NAME Yes string App name for Laravel.
APP_ENV Yes "production"
DB_CONNECTION Yes string Set this to the database you want to use, e.g. "sqlite".
DB_DATABASE Yes string Set this to the connection string to your database, e.g. "/app/storage/db.sqlite"
DB_FOREIGN_KEYS true If your app is using foreign keys.

Known issues

Hot module replacement and Firefox

When running the app with the CLI in development mode on Firefox, you might see your app constantly reloading when you access it. That happened in previous versions of the CLI, because of the way HMR websocket requests work.

We fixed this issue with v3.4.0 of the CLI, so after updating it, you can make the following changes to your app's web/frontend/vite.config.js file:

  1. Change the definition hmrConfig object to be:

    const host = process.env.HOST
        ? process.env.HOST.replace(/https?:\/\//, "")
        : "localhost";
    
    let hmrConfig;
    if (host === "localhost") {
        hmrConfig = {
            protocol: "ws",
            host: "localhost",
            port: 64999,
            clientPort: 64999,
        };
    } else {
        hmrConfig = {
            protocol: "wss",
            host: host,
            port: process.env.FRONTEND_PORT,
            clientPort: 443,
        };
    }
  2. Change the server.host setting in the configs to "localhost":

    server: {
      host: "localhost",
      ...

I can't get past the ngrok "Visit site" page

When you’re previewing your app or extension, you might see an ngrok interstitial page with a warning:

You are about to visit <id>.ngrok.io: Visit Site

If you click the Visit Site button, but continue to see this page, then you should run dev using an alternate tunnel URL that you run using tunneling software. We've validated that Cloudflare Tunnel works with this template.

To do that, you can install the cloudflared CLI tool, and run:

# Note that you can also use a different port
cloudflared tunnel --url http://localhost:3000

In the output produced by cloudflared tunnel command, you will notice a https URL where the domain ends with trycloudflare.com. This is your tunnel URL. You need to copy this URL as you will need it in the next step.

2022-11-11T19:57:55Z INF Requesting new quick Tunnel on trycloudflare.com...
2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+
2022-11-11T19:57:58Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2022-11-11T19:57:58Z INF |  https://randomly-generated-hostname.trycloudflare.com                                     |
2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+

In a different terminal window, navigate to your app's root and run one of the following commands (replacing randomly-generated-hostname with the Cloudflare tunnel URL copied from the output of cloudflared command):

# Using yarn
yarn dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
# or using npm
npm run dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
# or using pnpm
pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000

Developer resources

shopify-app-template-php's People

Contributors

amcaplan avatar byrichardpowell avatar chris407x avatar cquemin avatar dependabot[bot] avatar elanalynn avatar gonzaloriestra avatar hheyhhay avatar isaacroldan avatar local-administrator avatar mkevinosullivan avatar mllemango avatar paulomarg avatar pepicrft avatar rachel-carvalho avatar surma avatar trishrempel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

shopify-app-template-php's Issues

npm init @shopify/app@latest --template php command failed

Issue summary

Error while setup template / command failed
npm init @shopify/app@latest --template php

Expected behavior

it should install template

Actual behavior

╭─ error ──────────────────────────────────────────────────────────────────────╮
│ │
│ Unexpected argument: php │
│ See more help with --help │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯

Different scopes

I have an application that performs certain tasks. It requires the following permissions:

write_shipping
read_orders
write_orders
As the app develops and new plans with new functionalities are added, the application requires additional permissions:

write_content
However, when executing the code:
$session = Utils::loadOfflineSession('');
we will not get a session.
The problem arises from the fact that in Session::isValid(), we verify the scopes that are stored in the db with the scopes from the configuration file:
Context::$SCOPES->equals($this->scope)
Should these be related to each other and should this validation be performed?

Connection between app and extension

Issue summary

Hello shopify development team. I am a development team leader, after learning about shopify I think that using the extension is very necessary for shopify developers from 3rd party like us. However, it still has many shortcomings. We are unable to communicate between the extension and our app.
for example: I am developing an application that allows adding code to an online store to make it more beautiful using PHP. I want free users to be able to use but less functionality than paid users. So the problem here is:

  1. We cannot use Shopify app cli.
  2. We can't communicate between the app and the extension to make payment or upgrade the account like I said above.

Expected behavior

  1. Hope you can make a video on how to install shopify app cli and create an app in php. (You already have a video about node but there is an error in PHP).
  2. If you have available communication methods between extensiopn and the app, please make a video tutorial or write more documents about it.

Actual behavior

What actually happens?

I am developing an application that allows adding code to an online store to make it more beautiful using PHP. I want free users to be able to use but less functionality than paid users. So the problem here is:

  1. We cannot use Shopify app cli.
  2. We can't communicate between the app and the extension to make payment or upgrade the account like I said above.

Unable to install template in dev store using provided instructions

Issue summary

After multiple attempts I have been unable to successfully install an app using this template in my shopify dev store.

Expected behavior

The steps should allow the app to be installed in the dev store

Actual behavior

Cannot get past Oauth error screens (see steps to reproduce)

Steps to reproduce the problem

From target directory I run:
npm init @shopify/app@latest -- --template php

cd /web

composer install

cp .env.example .env

touch storage/db.sqlite

Update .env file with full DB path

php artisan key:generate

php artisan migrate

cd ..

npm run dev
Yes, create it as a new app
name the app with same name as the project

Follow the provided grok URL and get the "You are about to visit ... grok warning page and click visit site to get this error:

Oauth error invalid_request: Could not find Shopify API application with api_key_not_defined

image

There doesn't appear to be any additional documentation after this step, so I'm winging it from here:
I go into my Shopify partners account and add the client ID and client secret into the .env as SHOPIFY_API_KEY and SHOPIFY_API_SECRET variables.

** note I also ran 'npm run shopify env show' to verify which values should be added.

re-run npm run dev
Selected Always by default to have Shopify automatically update app's URL for preview experience
follow the new ngrok URL and now get this error:

Oauth error invalid_scope: The access scope is invalid: not_defined

image

Now I have tried to get past this a couple ways:
I've logged into my dev store and created an app there with the same name, and set an initial scope and added that to the .env and I have tried simply adding the SCOPES variable with an initial value to the .env file (out of concern that creating an app with the same name in the dev store might end up with a different client id etc.), both paths ended with the same result.

I try npm run dev again and this time get

Oauth error invalid_request: The redirect_uri is not whitelisted
.

image

I go back into my Partners account and access the App setup and validate the URLs:

App URL: https://random-number.ngrok.io/

Allowed redirectionURL(s)
https://random-number.ngrok.io/auth/callback
https://random-number.ngrok.io/auth/shopify/callback
https://random-number.ngrok.io/api/auth/callback

I have tried removing the one with Shopify in the path, as that is something that has been referenced in other posts around the same whitelist error. I have also tried setting the auto update of the URLs in the app to never and manually entered them, I've tried only using the auth/callback redirect, all with the same result. I simply have not been able to get past this error and actually install the app in my dev store to work with it.

Any insight into how to get past these errors successfully would be appreciated. I have not gotten any responses or support from the Shopify community boards and have not found success via stack overflow other searches etc. I would very much like to use Laravel for this custom app as I am far more familiar with it than some of the other app options.

Accessing environment variable from the components

Issue summary

Failing to get environment variables from components after creating a new app from https://github.com/Shopify/shopify-app-template-php/tree/cli_three#setting-up-your-laravel-app.
Neither of the prefixes is working:

PUBLIC_MY_API_URL="example.com"
VITE_SOME_KEY=123
VITE_APP_TITLE="My App"
SHOPIFY_APP_XYZ="My App"

Expected behavior

With process.env. or import.meta.env. should return the environment variables.

Actual behavior

It is just returning undefined.

Steps to reproduce the problem

  1. Set environment variables in either or both of /.env and /web/.env
  2. Run the server with npm run dev
  3. Open the webpage with NGROK URL
  4. Check the environment variable in any component.

Reduced test case


Checklist

  • [x ] I have described this issue in a way that is actionable (if possible)

Shopify\Utils::sanitizeShopDomain(): Argument #1 ($shop) must be of type string, null given

Issue summary

PHP 8.1, no modifications to any file except .env

Can't install app in Shopify development store (get white page), get following error in storage/logs/laravel.log

[2022-08-22 15:01:47] local.ERROR: Shopify\Utils::sanitizeShopDomain(): Argument #1 ($shop) must be of type string, null given, called in /var/www/html/routes/web.php on line 29 {"exception":"[object] (TypeError(code: 0): Shopify\Utils::sanitizeShopDomain(): Argument #1 ($shop) must be of type string, null given, called in /var/www/html/routes/web.php on line 29 at /var/www/html/vendor/shopify/shopify-api/src/Utils.php:31)
[stacktrace]
#0 /var/www/html/routes/web.php(29): Shopify\Utils::sanitizeShopDomain(NULL)
#1 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Route.php(238): Illuminate\Routing\RouteFileRegistrar->{closure}(Object(Illuminate\Http\Request), 'js/app.js')
#2 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Route.php(208): Illuminate\Routing\Route->runCallable()
#3 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php(721): Illuminate\Routing\Route->run()
#4 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(128): Illuminate\Routing\Router->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#5 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(50): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#6 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Routing\Middleware\SubstituteBindings->handle(Object(Illuminate\Http\Request), Object(Closure))
#7 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php(78): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#8 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#9 /var/www/html/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php(49): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#10 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#11 /var/www/html/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(121): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#12 /var/www/html/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(64): Illuminate\Session\Middleware\StartSession->handleStatefulRequest(Object(Illuminate\Http\Request), Object(Illuminate\Session\Store), Object(Closure))
#13 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#14 /var/www/html/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php(37): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#15 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#16 /var/www/html/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php(67): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#17 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#18 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(103): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#19 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php(723): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#20 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php(698): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request))
#21 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php(662): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route))
#22 /var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php(651): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request))
#23 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(167): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request))
#24 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(128): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request))
#25 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#26 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ConvertEmptyStringsToNull.php(31): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#27 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull->handle(Object(Illuminate\Http\Request), Object(Closure))
#28 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#29 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TrimStrings.php(40): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#30 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TrimStrings->handle(Object(Illuminate\Http\Request), Object(Closure))
#31 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#32 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure))
#33 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/PreventRequestsDuringMaintenance.php(86): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#34 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Illuminate\Foundation\Http\Middleware\PreventRequestsDuringMaintenance->handle(Object(Illuminate\Http\Request), Object(Closure))
#35 /var/www/html/vendor/fruitcake/laravel-cors/src/HandleCors.php(38): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#36 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Fruitcake\Cors\HandleCors->handle(Object(Illuminate\Http\Request), Object(Closure))
#37 /var/www/html/vendor/fideloper/proxy/src/TrustProxies.php(57): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#38 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(167): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure))
#39 /var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(103): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#40 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(142): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#41 /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(111): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#42 /var/www/html/public/index.php(52): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#43 {main}
"}

Expected behavior

It should work

Actual behavior

What actually happens?

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

  1. Install library in PHP 8.1 container, share via ngrok.io and then try to install app

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.


Checklist

  • I have described this issue in a way that is actionable (if possible)

BULK_OPERATIONS_FINISH missing

In Webhooks/Topics.php BULK_OPERATIONS_FINISH is missing, just add
public const BULK_OPERATIONS_FINISH = 'BULK_OPERATIONS_FINISH';

Shopify Cli PHP Setup Error

Issue summary

I am a Shopify app developer and working on build a Shopify app in PHP. I have used this Shopify CLI Github setup to develop an app. But this setup has an a issue of the (Unable to install all 15 dependencies). The composer.lock file of this setup is not up to date with the changes in the composer.json file (see the image).

image-6-

I have also run the composer update but the things going same. Also, the setup is successfully cloning in the local system and create an app on the partner account. But this setup has not successfully due to error. So, that is why the app is not installing on the store.

Composer Version: 2.2.6
PHP Version: 8.1.2
Operation Systme: Windows

Expected behavior

Make a video, how to use this setup to develop the app in PHP.

Hope the developer team look into this and resolve this as soon as possible.

Enable Billing

To enable billing, I have made modifications to the shopify.php file located in the config directory. Specifically, I have set the amount and billing requirement to true. These changes successfully activate the billing functionality. However, my app has been rejected by Shopify due to an issue where, they said after payment it repeatedly redirects to the billing page, indicating that the billing process is not functioning correctly. Is there anyone here who might have insights or suggestions on how to resolve this problem?

Tasks

No tasks being tracked yet.

image

Tasks

No tasks being tracked yet.

Template need upgrades.

Overview

... If you guys can look at the composer.json and package.json there a lot of packages that can be upgraded including Laravel version.

=> Some dependencies are too much old Ex. Shopify Polaris template using 6 version while latest stable is 10.
=> Same goes with Laravel : template using 8.12 while latest stable is 9.**
-> And Laravel 8 support ends in January 24th, 2023 (After less then 2 months from today).

=> It uses app bridge version 2.** while latest recommended version is 3.**
=> It uses Laravel mix which was last latest released on Dec 22, 2020. Which is old and support is replaced with the Vite by the Laravel.

=> It uses app bridge 2.0 which is old and will also not work with the admin.shopify.com/{store_name} urls.

Shopify recommends app bridge version 3 and its first party template from Shopify and still its not using recommended version I am amazed.
Updating these things manually after cli has made the app is not a good way to build an app. Package must reduce this time of lot of people by upgrading the package.

When I hosted to cPanel the other routes are showing 404

Issue summary

  • I have hosted the app to cPanel inside a subdomain.
  • fallback route is working
    image

When I am attaching ?shop parameter it is redirecting to /login but showing 404

Expected behavior

It should ask to install the unlisted app and if app is installed then should redirect to store app page

How to add custom button in cart page from shopify custom App?

Hello All,
I'm a beginner in Shopify App development Shopify App Template - PHP
,

I have created one component form, in this form I have added a field like App was enabled or disabled, while it enabled then displays one custom button on the cart page,
but I'm confused How can I add that custom button using my Shopify ReactJS + PHP(laravel) app?

in the Shopify app, I can't find any file that, was used for the cart, where I put the code for the custom button.

image

Npm run dev ends without any error

Issue summary

When running npm run dev nothing happens. It only prints "shopify app dev" and stops without an error

_C:\Projects\sml\shopify-trial\shopify-trial-app>npm run dev

[email protected] dev C:\Projects\sml\shopify-trial\shopify-trial-app
shopify app dev

C:\Projects\sml\shopify-trial\shopify-trial-app>_

Expected behavior

What do you think should happen?

It should install dependencies and present url like described on
https://shopify.dev/apps/getting-started/create

Actual behavior

What actually happens? Only shopify app dev is printed and process stops without any error

I have installed ngrok and ngrok http 80 us running
i followed instructions on https://shopify.dev/apps/getting-started/create but npm run dev does nothing

ngrok (Ctrl+C to quit) Visit http://localhost:4040/ to inspect, replay, and modify your requests Session Status online Account koen peeters (Plan: Free) Version 3.1.0 Region Europe (eu) Latency 10ms Web Interface http://127.0.0.1:4040 Forwarding https://.eu.ngrok.io -> http://localhost:80 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00

App constantly refreshes using ngrok static domain

Issue summary

First of all, thanks for the great work done here. This report is similar to the section in the README.md about the old bug in Firefox where the screen constantly refreshed in the app.

I am using the latest version of the cli tool 3.8.0, but I've got this happening in Chrome when using an ngrok static domain (I got a static domain as I want to use an app poxy).

As a side note I used the static ngrok domain as I was struggling to get Cloudflare tunneling working, but I've since got that going (I misunderstood the config.yml file, I was putting the custom domain in the url setting rather than localhost).

This bug happens whether there is an environmental variable set for the HOST or not, ie;

HOST=my-static-domain.ngrok.io

Expected behavior

App should not constantly reload

Actual behavior

App constantly reloads

Steps to reproduce the problem

Start an ngrok tunnel using static domain in one terminal window;

ngrok http --region=us --hostname=my-static-domain.ngrok.io 3000

and then start the app using same custom domain in another;

yarn dev --tunnel-url https://my-static-domain.ngrok.com:3000

Workaround

Stop using static ngrok domain and use Cloudflare tunneling instead.

Not able to find any way to set Shopify API version

Overview/summary

I am developing Shopify public APP using PHP lib, but while setup on local and start development, I foond there is no way to set the API version same like API_KEY & API_SECRET_KEY

after check the main lib it set to default unstable, so is there is way to set it to particular stable version?

Thanks in advance

Install script not working

Issue summary

unable to run code -
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for doctrine/dbal 3.3.3 -> satisfiable by doctrine/dbal[3.3.3].
- doctrine/dbal 3.3.3 requires composer-runtime-api ^2 -> no matching package found.

Potential causes:

Write a short description of the issue here ↓

Expected behavior

What do you think should happen? app code run properly

Actual behavior

What actually happens?

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

  1. shopifi CLI $ shopify app create php
  2. composer install

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.


Checklist

  • I have described this issue in a way that is actionable (if possible)

npm run dev throws error while running app

Issue summary

I have installed the Shopify php app and when i run command npm run dev, it throws error related to port number.

Expected behavior

It should run locally without any error

Actual behavior

What actually happens?

Command failed with exit code 255: composer serve

Composer\Config::disableProcessTimeout
php artisan serve --port="${BACKEND_PORT:-$PORT}"
PHP Warning: require(C:\ABC\Practice\ShopifyApps\someone-product\web/vendor/autoload.php): failed to open stream: No such file or directory in C:\ABC\Practice\ShopifyApps\someone-purchased-product\web\artisan on line 18
PHP Warning: require(C:\ABC\Practice\ShopifyApps\someone-product\web/vendor/autoload.php): failed to open stream: No such file or directory in C:\ABC\Practice\ShopifyApps\someone-product\web\artisan on line 18
PHP Fatal error: require(): Failed opening required 'C:\ABC\Practice\ShopifyApps\someone-product\web/vendor/autoload.php' (include_path='.;C:\php\pear') in C:\ABC\Practice\ShopifyApps\someone-product\web\artisan on line 18
Script php artisan serve --port="${BACKEND_PORT:-$PORT}" handling the serve event returned with error code 255

Warning: require(C:\ABC\Practice\ShopifyApps\someone-product\web/vendor/autoload.php): failed to open stream: No such file or directory in C:\ABC\Practice\ShopifyApps\someone-product\web\artisan on line 18

Warning: require(C:\ABC\Practice\ShopifyApps\someone-product\web/vendor/autoload.php): failed to open stream: No such file or directory in C:\ABC\Practice\ShopifyApps\someone-product\web\artisan on line 18

Fatal error: require(): Failed opening required 'C:\ABC\Practice\ShopifyApps\someone-product\web/vendor/autoload.php' (include_path='.;C:\php\pear') in C:\ABC\Practice\ShopifyApps\someone-product\web\artisan on line 18

Steps to reproduce the problem

  1. Npm Init @Shopify/App@Latest
  2. select app as PHP
  3. navigate to app directory
  4. npm run dev

An unexpected error occured.

X An unexpected error occured.
        To submit an issue include the stack trace.

C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/system.rb:225:in `fetch': key not found: "PATHEXT" (KeyError)
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/system.rb:225:in `which'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/system.rb:219:in `resolve_path'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/system.rb:126:in `system'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/context.rb:428:in `system'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/project_types/php/commands/serve.rb:35:in `block in call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-ui/lib/cli/ui/frame.rb:103:in `open'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/project_types/php/commands/serve.rb:28:in `call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/sub_command.rb:13:in `call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/command.rb:19:in `call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/core/executor.rb:17:in `block (2 levels) in call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:37:in `block (2 levels) in with_logging'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-ui/lib/cli/ui/stdout_router.rb:169:in `with_id'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:36:in `block in with_logging'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-ui/lib/cli/ui.rb:176:in `log_output_to'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:35:in `with_logging'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/core/executor.rb:16:in `block in call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:45:in `block (2 levels) in with_traps'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:51:in `twrap'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:44:in `block in with_traps'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:51:in `twrap'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/executor.rb:43:in `with_traps'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/core/executor.rb:15:in `call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/core/entry_point.rb:24:in `block in call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/core/monorail.rb:30:in `log'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/lib/shopify_cli/core/entry_point.rb:23:in `call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/bin/shopify:37:in `block (2 levels) in <main>'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/error_handler.rb:75:in `handle_abort'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/vendor/deps/cli-kit/lib/cli/kit/error_handler.rb:21:in `call'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/bin/shopify:36:in `block in <main>'
        from C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/shopify-cli-2.6.5/bin/shopify:47:in `<main>

After running shopify php serve giving this error!!

Frontend directory is pointing to an outdated version of the frontend template repository

Issue summary

When trying to use some components from Polaris I got an error

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@shopify_polaris.js?v=4fb69a76' does not provide an export named 'Text'

After looking I noticed some of the frontend node dependencies are outdated.

"dependencies": {
    "@shopify/app-bridge": "^3.1.0", // 3.7.7 available
    "@shopify/app-bridge-react": "^3.1.0", // 3.7.7 available
    "@shopify/app-bridge-utils": "^3.1.0", // 3.7.7 available
    "@shopify/polaris": "^9.11.0", // 10.49.1 available
    "@vitejs/plugin-react": "1.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.19",
    "react-router-dom": "^6.3.0",
    "vite": "^2.8.6" // 4.3.9 available
  },

I realized the frontend directory is pointing to an outdated version of the frontend template repository frontend @ f720a83

Updating the frontend directory and installing the dependencies again fix the issue.

Current boot configuration will break if `php artisan config:cache` is run

Issue summary

The current Context initialization access env variables directly, this is not advised by the laravel documentation since after php artisan config:cache (a command normally run when deploying to production) the env file is never loaded.

Expected behavior

This environment variables should be added to a config file and by accessed using the config helper

Actual behavior

if you run php artisan config:cache the app will start throwing an error

Shopify\Context::initialize(): Argument #1 ($apiKey) must be of type string, null given, called in /home/damiane/shopify-app-php/app/Providers/AppServiceProvider.php on line 38

at vendor/shopify/shopify-api/src/Context.php:66
62▕ * it
63▕ *
64▕ * @throws \Shopify\Exception\MissingArgumentException
65▕ */
➜ 66▕ public static function initialize(
67▕ string $apiKey,
68▕ string $apiSecretKey,
69▕ $scopes,
70▕ string $hostName,

1 app/Providers/AppServiceProvider.php:38
Shopify\Context::initialize()

  +7 vendor frames 

9 [internal]:0
Illuminate\Foundation\Application::Illuminate\Foundation{closure}()

Steps to reproduce the problem

  1. Run php artisan config:cache
  2. run php artisan serve

Checklist

  • I have described this issue in a way that is actionable (if possible)

Enable public route that doesn't require authentication

Overview

Allow public routes to pass without having to go through Shopify's authentication/requirements

Type

  • Changes to existing features

Motivation

What inspired this feature request? What problems were you facing?

I'm trying to recreate Shopify Example App in Laravel from scratch since there seems to be only node version available.

I came across the feature where scanning the QR code as a public URL will redirect to our server to update the scan counter.

However, at the moment, it seems as if all routes created will go through Shopify's authentication process and requirements.
So even if I create a route without including the middleware shopify.auth it will still fail

Route::get('/qrcodes/{code}/scans', [ScanController::class, 'show']);

I will see the following error screen

Xnapper-2023-01-04-16 13 12

Would like to know what is the recommended way to create a public URL?

Thanks for your assistance in advance.

How to apply query filter in rest api using this package??

Here is my store theme asset rest api. I want to access layout/theme.liquid data using this query. But i don't get idea how to pass this query filter in in this rest api according to this package. Can some one help me, what is the right way to get theme.liquid file data?

$theme_data = $client->get('/admin/themes/' . $request['theme_id'] . '/assets.json',[],["query" => ["key" => "layout/theme.liquid"]]);

InertiaJS installation

Overview

Hello I'm thinking to add this inertiaJS as it will make the whole experience a lot better to render things on frontend react etc

Type

  • New feature

Motivation

What inspired this feature request? What problems were you facing?

Too hard to add forms and filtering on react with filtering on the backend of laravel when you can use inertiaJS is so much simpler and faster
https://inertiajs.com/

Area

  • Add any relevant Area: <area> labels to this issue

Checklist

  • I have described this feature request in a way that is actionable (if possible)

Tasks

No tasks being tracked yet.

How to run non embeded app

I am trying to setup non embedded app with the help shopify cli3 using php template.
I have disabled embedded app from the shopify section but app still not working as non embedded. Please help what change we need to do at script level under the laravel.

Issue when changing database to clearDB mysql in heroku

Issue summary

The template was working fine with sqlite locally and after moving it into heroku, I changed db to mysql and setup clearDB. Now the app return "could not find driver (SQL: select exists(select * from sessions where shop = xxxx.myshopify.com and access_token is not null) as exists)" error. PDO extension seems available.

Expected behavior

Expected to connect to database and run migration

Actual behavior

When running php artisan migrate, it reurns

Illuminate\Database\QueryException
could not find driver (SQL: select exists(select * from sessions where shop = xxxx.myshopify.com and access_token is not null) as exists)

POST request with csrf-token

How to make a post request with csrf-token

=======================================
Sending a post request while the action takes place in react front-end and receiving the laravel backend. With csrf-token and shop-auth.

btoa is not defined

Issue summary

yarn dev throws error: btoa is not defined

yarn run v1.22.15
$ shopify app dev
✔ Dependencies installed
✔ Fetching organization data

Using your previous dev settings:
Org:        Not so boring.
App:        boring-app
Dev store:  boring-store.myshopify.com

To reset your default dev config, run yarn dev --reset

✅ Success! The tunnel is running and you can now view your app.

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    btoa is not defined

    Stack trace:    at buildAppURL                …node_modules/@shopify/app/src/cli/services/dev/output.ts:69
    at outputAppURL               …/node_modules/@shopify/app/src/cli/services/dev/output.ts:6
    at dev                        …t-plus/node_modules/@shopify/app/src/cli/services/dev.ts:73
    at processTicksAndRejection…  internal/process/task_queues.js:95
    at run                        …us/node_modules/@shopify/app/src/cli/commands/app/dev.ts:73

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

It should show/open the app dev URL in browser

Actual behavior

yarn dev throws error:

btoa is not defined

Steps to reproduce the problem

  1. yarn dev

Signature verification failed

Issue summary

I used the CLI, and successfully created an app using npm run dev and ngrok into the local install. However, once I deployed to production I ran into both a "CSRF token mismatch" and "Firebase\JWT\SignatureInvalidException: Signature verification failed" error.

In order to resolve the CSRF issue I removed the middleware, which probably isn't the best solution.

However, I'm stumped on how to resolve the JWT issue.

Expected behavior

After following the official Shopify tutorial and deploying to production, the application should work successfully.

Actual behavior

Production installs result in CSRF and JWT issues.

Steps to reproduce the problem

  1. Run Shopify CLI and use the PHP template.
  2. Deploy to production server using composer install and SHOPIFY_API_KEY=** npm run build
  3. Install the app to a test store using Test your app > Select store.

Reduced test case

Deploy the Shopify CLI PHP template.


Checklist

  • I have described this issue in a way that is actionable (if possible)

Could not validate webhook HMAC.

Issue summary

Could not validate webhook HMAC.

This is via a web hook for when an order is created.

It looks like the HMAC is not being validated via the shopify-api package.

Expected behavior

I should see a process log in my error log when sending a test webhook from the Shopify admin.
image

Actual behavior

I am getting an error which suggests the validateProcessHmac function is not happy with the HMAC but I cannot see any docs on how to fix this.

image

image

I have not done anything with this from the admin -- could not see docs on this and please forgive me this is my first app install for Shopify.

image

Steps to reproduce the problem

  1. Install a fresh app
  2. and the webhook within settings > notifications like so https://example.co.uk/webhooks on the order creation event.
  3. Click Send test notification
  4. View logs and see output

Redirection bug after ngrok set-up

Problem

After running "npm run dev" and selecting the app and the store, we get redirected to the page "Nice work on build..."

(2) Dropshipping   Shopify | France | Facebook 2022-06-23 20-51-42

But 2 seconds after we get redirected to a "Page not found"

Shopify 2022-06-23 20-51-22

I have this issue only when choosing a store with the new "Checkout Exentisibility Preview".

It works well with other stores

Expected behavior

The page shouldn't redirect to a "page not found"

Actual behavior

We get the redirection to a page not found

Steps to reproduce the problem

  1. run "npm run dev" and select a store with the new checkout extensibility dev preview enabled
  2. use ngrok and open the link
  3. You'll get redirected

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.


Checklist

  • I have described this issue in a way that is actionable (if possible)

deploy in production Auth guard [] is not defined

when I deploy the app in production I get Auth guard[] is not defined

The app works well in dev mode. In production it seems that the commented guards in config/auth.php are causing the problem.
I tried to deploy on Laravel Forge and also i setup a custom Ubuntu on Digital Ocean and i got the same error.

Screenshot 2023-01-18 at 22 02 32

loadOfflineSession returns null

Issue summary

On local environment Utils::loadOfflineSession($shop)returns null

Expected behavior

should return offline session also on local environment

Actual behavior

If Utils::loadOfflineSession($shop) is called in ja job or console command, this function returns null

Steps to reproduce the problem

  1. Try to load offline session eg. in a job or command and execute

npm run build --api-key=REPLACE_ME not passing api_key into build

Issue summary

Running the yarn build command works, the npm run build command does not inject the api key as expected

Using yarn:
yarn build --api-key=REPLACE_ME

Using npm:
npm run build --api-key=REPLACE_ME

Expected behavior

What do you think should happen?
The npm run build command should inject the api key into the build

Actual behavior

What actually happens?
The build script reports

frontend         | Building the frontend app without an API key. The frontend build will not run without an API key. Set the SHOPIFY_API_KEY environment variable when running the build command.

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

  1. npm run build --api-key=REPLACE_ME
  2. Where REPLACE_ME is the API Key

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.


Checklist

  • I have described this issue in a way that is actionable (if possible)

`npm run dev` fails silently

Issue summary

Cannot run PHP template because npm run dev fails with no output.

Expected behavior

Some error message.

Actual behavior

Setup all returns as expected...

npm init @shopify/app@latest
> my-app
> php
cd my-app/web
composer install
cp .env.example .env
touch storage/db.sqlite
php artisan key:generate
php artisan migrate
cd ..
$ npm run dev

> [email protected] dev
> shopify app dev

✔ Dependencies installed
$

At this point I would expect to have a backend server on some port (maybe 80?), and the command telling me about URLs, ports, etc.

The CORS Issues

Issue summary

Can't make the CORS policy to work. I'm using a fresh install of the package. I've added this one fruitcake/laravel-cors to the project (which is working fine with a pure Laravel build). I've added a simple GET route /api/test and then made a fetch request from the Shopify store frontend to the route. Did I miss something?

Expected behavior

A request should go without CORS error returned.

Actual behavior

The cors middleware has been totally ignored. The request returns an error "Access to fetch at '{TARGETURL}' from origin '{ORIGINURL}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Headers of the Response
content-length: 1385
content-security-policy: default-src 'self' https://cdn.ngrok.com 'unsafe-eval' 'unsafe-inline'
content-type: text/html
date: Wed, 08 Feb 2023 21:46:20 GMT
ngrok-trace-id: 1760a8d470f1a0fc873743c7e8f6ab8f
referrer-policy: no-referrer
x-content-type-options: nosniff

Your embedded app needs to load in admin.shopify.com.

I use this package to create public app, when I submit the app for the review , review team reject with this error.
"Your embedded app needs to load in admin.shopify.com. Shopify is moving to this new domain and all merchants will have access to it, as of Jan 31st, refer to our changelog for details. To resolve this issue, reference our Setting up Iframe protection document as well as ensure your app is at minimum on App bridge 2.0, App bridge 3.0 is recommended. "


Screenshot_1

how to solve it. can anyone help me , may be this is package issue.

App thinks it's installed even though the OAuth process didn't finish

Issue summary

When installing the app with app create and then starting the Oauth process but aborting it, the app incorrectly assumes it's still installed. When trying to install again it won't redirect to /login. This also happens when uninstalling the app in a shop and installing it again.

Expected behavior

It should redirect to /login and begin the oauth process.

Actual behavior

See issue summary.

Steps to reproduce the problem

  1. Create the app and serve it with Shopify CLI
  2. Begin the app installation
  3. Abort the installation
  4. Try again

Reduced test case

n/a


Checklist

  • I have described this issue in a way that is actionable (if possible)

Database (storage/db.sqlite) does not exist.

Issue summary

Write a short description of the issue here ↓
I'am creating a new app. At first installation I'm getting this error
Database (storage/db.sqlite) does not exist. (SQL: PRAGMA foreign_keys = ON;)

Migrations ran perfectly and tinker is also working.
I'm using Laravel.
Note: All cache cleared and server restarted

Expected behavior

It should find database with default doc settings.

What do you think should happen?

Actual behavior

Throwing error db not found
What actually happens?

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.


Checklist

  • I have described this issue in a way that is actionable (if possible)

App install page not shown

Issue summary

Write a short description of the issue here ↓
The app installation page is not shown when setup with a linode server. the page is shown in ngrok/local as expected

Expected behavior

What do you think should happen?
It should show the app installation page

Actual behavior

What actually happens?
There’s no page at this address page is shown instead of app installation page.
I think its getting redirected to home route or something before installation.

Note : There are no rows in the db sessions table.

Steps to reproduce the problem

1.set up in a ubuntu server
2.deployed with npm build with key inside frontend & composer build inside web

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.


Checklist

  • I have described this issue in a way that is actionable (if possible)

How to create a POST request

How to make a POST request with CSRF-token and Shopify-auth

I'd try the following code, Please suggest any other method to solve this.


code

axios.get('sanctum/csrf-cookie').then(response => {
        axios.post(`/api/app-settings`,data).then(res => {
            console.log(res.data);
      });
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.