npm init @shopify/app@latest -- --template php
cd web
composer install
Create the .env file:
php artisan key:generate
php artisan migrate
Local development
Config nginx for the web app
server {
listen 8021;
listen [::]:8021;
server_name 127.0.0.1;
# root /home/thuy/work/temp_remix/shoppable_quizz/shoppable-quizz/web/public;
root /home/thuy/work/temp_remix/kolaffiliate/koaffiliate/web/public;
index index.php index.html index.htm;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.ht {
deny all;
}
}
Ngrok
ngrok http --domain=colab.ngrok.app 8021
Extension
Deploy on server
How to submit to the marketplace.
How the framework works.
Laravel
php artisan make:migration alter_scope_length_in_sessions_table --table=sessions
And php for it
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AlterScopeLengthInSessionsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('sessions', function (Blueprint $table) {
$table->string('scope', 500)->nullable()->change();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('sessions', function (Blueprint $table) {
$table->string('scope')->nullable()->change();
});
}
}
php artisan migrate
it use
Trait
and xml to create api service
if it is a simple form
if it need to connect to products or collections from Shopify store
if it need to connect to the existing tables on the app.
If it need to connect to the tables in the app but
form
React component
install the component
npm install react-beautiful-dnd
return (
{routeComponents}
);
replace above code with this
Add in file /web/frontend/vite.config
and in this file path, add the file
web/frontend/components/providers/ShopProvider.jsx
Main component of the the js is Route.jsx
Look at these code