amiranagram / inertia-codeigniter-4

MIT License
28 stars 11 forks source link

Usage or example in docs? #4

Open fcosrno opened 2 years ago

fcosrno commented 2 years ago

Is it possible to get a TLDR for Usage in the docs? Or is there a functioning example I can look at? I'd be happy to PR setup details to the README once I have a functioning demo. I tried something based loosely on the official Server-side setup (albeit for Laravel), but I feel like I'm missing something; I get a blank screen and am not sure how to proceed.

Here's what I tried on a fresh CI 4 install:

composer.json

...
  "require": {
    "codeigniter4/framework": "4.1.8",
    "amirami/inertia-codeigniter-4": "dev-master"
  }
...

packages.json

...
  "devDependencies": {
    "@inertiajs/inertia": "0.11.0",
    "@inertiajs/inertia-react": "^0.8.0",
...

Controllers/Home.php

<?php
namespace App\Controllers;
use Inertia\Services;

class Home extends BaseController
{
    public function index()
    {
        return Services::render('welcome_message', [
            'event' => ['id'=>1,'title'=>'My event'],
        ]);
    }
}

What should come next? InertiaJS's client-side documentation suggests adding the following to the main JavaScript file. Where would that go? I see there's "app" defined as rootView but tried pasting this in that view file to no avail, probably because it is Laravel-specific. What would be the CodeIgniter equivalent?

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />, el)
  },
})

Help? Thanks!

AlmostDigital commented 2 years ago

Is it possible to get a TLDR for Usage in the docs? Or is there a functioning example I can look at? I'd be happy to PR setup details to the README once I have a functioning demo. I tried something based loosely on the official Server-side setup (albeit for Laravel), but I feel like I'm missing something; I get a blank screen and am not sure how to proceed.

Here's what I tried on a fresh CI 4 install:

composer.json

...
  "require": {
    "codeigniter4/framework": "4.1.8",
    "amirami/inertia-codeigniter-4": "dev-master"
  }
...

packages.json

...
  "devDependencies": {
    "@inertiajs/inertia": "0.11.0",
    "@inertiajs/inertia-react": "^0.8.0",
...

Controllers/Home.php

<?php
namespace App\Controllers;
use Inertia\Services;

class Home extends BaseController
{
    public function index()
    {
        return Services::render('welcome_message', [
            'event' => ['id'=>1,'title'=>'My event'],
        ]);
    }
}

What should come next? InertiaJS's client-side documentation suggests adding the following to the main JavaScript file. Where would that go? I see there's "app" defined as rootView but tried pasting this in that view file to no avail, probably because it is Laravel-specific. What would be the CodeIgniter equivalent?

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />, el)
  },
})

Help? Thanks!

Same question

amiranagram commented 2 years ago

Hi @fcosrno , @AlmostDigital .

The root view needs to be named app. You need to place a script tag there pointing to your compiled JS code. In the body of the html you need to render the inertia div like:

<body>
    <?= inertia()->app($page) ?>
</body>

$page is passed through the inertia response so you don't have to worry about that. Just make sure you are returning inertia('Welcome', ['prop' => 'foo']) in your controllers.

You can get the front-end code from Inertia's official docs page.

Although, to be honest, I feel like this package is a little outdated, because I didn't have time to further work on it. I was hoping someone would jump in and help me maintain it since I don't actively work with CodeIgniter 4.