Laravel-Inertia-React Boilerplate Documentation

Project Setup

Follow these steps to set up the boilerplate for your Shopify app (embedded and non-embedded).

1. Clone the Project

First, clone the repository to your local machine:

git clone <repository-url> Copy cd <project-directory> Copy

2. Database Configuration

- Database Type: MySQL

- Configure your .env file with your database credentials:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=your_database_name DB_USERNAME=your_username DB_PASSWORD=your_password Copy

3. Install Composer Dependencies

Next, install the PHP dependencies using Composer:

composer install Copy

4. Install NPM Packages

After that, install the JavaScript dependencies with NPM:

npm install Copy

5. Run Database Migrations

Set up your database by running the migrations:

php artisan migrate Copy

6. Queue Configuration

By default, this project uses a database queue connection. If you're using Cloudways, you should change the queue connection to Redis:

1. Update your .env file:
QUEUE_CONNECTION=redis Copy
2. In the config/queue.php file, ensure your settings look like this:
'connections' => [ 'redis' => [ 'driver' => 'database', 'connection' => env('DB_QUEUE_CONNECTION'), 'table' => env('DB_QUEUE_TABLE', 'jobs'), 'queue' => env('DB_QUEUE', 'default'), 'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90), 'after_commit' => false, ], 'database' => [ 'driver' => 'redis', 'connection' => env('REDIS_QUEUE_CONNECTION', 'default'), 'queue' => env('REDIS_QUEUE', 'default'), 'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90), 'block_for' => null, 'after_commit' => false, ], ], Copy

7. Shopify App Credentials

Add your Shopify app credentials to the .env file:

SHOPIFY_API_VERSION="2024-10" SHOPIFY_APP_NAME="${APP_NAME}" SHOPIFY_API_KEY=<your_api_key> SHOPIFY_API_SECRET=<your_api_secret> SHOPIFY_APPBRIDGE_ENABLED=1 # Set to 1 if your app is embedded; set to 0 if your app is non-embedded SHOPIFY_BILLING_ENABLED=0 SHOPIFY_API_SCOPES=<the_scopes_you_required_to_access_by_your_app> Copy

8. Session Settings for Embedded Apps

For embedded apps, add the following session settings to your .env file to preserve logged-in user details:

SESSION_SECURE_COOKIE=true SESSION_SAME_SITE='None' Copy

9. Routes Setup

To set up the routes for your application:

1. If your app is embedded, copy the code from routes/embedded_example_web.php to routes/web.php.
2. If your app is non-embedded, copy the code from routes/non_embedded_example_web.php to routes/web.php.

10. Additional Steps for Shopify Integration

In your Shopify app configuration:

1. Add the App URL:
https://your_app_url.com Copy
2. In the Allowed redirection URL(s), add:
https://your_app_url.com/authenticate Copy
3. Check Embedded App as true for embedded apps and false for non-embedded apps.
4. Save the changes.

11. React Code Integration

In your React components, if your app is embedded, make sure to import the necessary hook from Inertia:

import { usePage } from '@inertiajs/react'; Copy

You can then extract the query parameters like this:

const page = usePage().props; const { query } = page.ziggy; Copy

Use the extracted query with every route you call in your app. For example:

<Link href={route('dashboard', query)}> Dashboard </Link> Copy

Note: For non-embedded apps, there is no need for this integration.

12. Running the Application

To start the development server, run:

php artisan serve Copy

Then, in a separate terminal, run:

npm run dev Copy

13. Accessing the Application

You can access your application at:

http://localhost:8000 Copy

Notes

• Ensure your local development environment meets the requirements for Laravel and Node.js.
• Regularly check for updates in both Laravel and the dependencies used in your project.
• Monitor your queues using Laravel's built-in tools or by querying the database directly.