Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Full React Support for Inertia in Jetstream #1534

Open
wants to merge 14 commits into
base: 5.x
Choose a base branch
from

Conversation

HichemTab-tech
Copy link

@HichemTab-tech HichemTab-tech commented Sep 12, 2024

Title: Add Full React Support for Inertia in Jetstream

Description:

This PR introduces full support for React as a stack option for Jetstream when using Inertia. While Jetstream originally supported Vue with Inertia, this update brings React into the fold, allowing developers to leverage their preferred frontend framework within the Jetstream ecosystem.

Key changes:

  • New installation commands:
    • For Vue: php artisan jetstream:install inertia-vue --teams
    • For React: php artisan jetstream:install inertia-react --teams
  • All functionality previously available with Vue (authentication, teams, profile management, etc.) is now available with React, making the switch seamless for developers who prefer React for their applications.
  • Updated the tests workflow to ensure compatibility for new changes.

Why the Community Needs This:

The Laravel community is diverse, with many developers opting for React in their projects. By adding official support for React, Jetstream becomes more flexible and adaptable to a wider audience. This change will not only attract more React developers to use Jetstream but will also enhance the development experience for those already familiar with React.

Testing the PR:

To test this PR locally:

  1. Check out the PR and rename the package in your local environment (e.g., my/jetstream).
  2. Update your composer.json:
    "repositories": [
        {
            "type": "path",
            "url": "../path/to/this-checked-out-PR"
        }
    ]
  3. In your project, run the following commands:
    • laravel new test-app
    • composer require my/jetstream:@dev
    • php artisan jetstream:install inertia-react --teams
  4. Proceed with your usual development workflow.

This addition to Jetstream is an essential enhancement that aligns with the community’s growing demand for React support within Laravel applications. Looking forward to your feedback and contribution!

This commit introduces several new components to support Inertia React. These include ActionMessage, HandleInertiaRequests middleware, ApplicationLogo, and more. Each of these components will be essential for building a consistent and functional frontend with Inertia.js and React.
Updated the CI workflow to test against `inertia-react` and `inertia-vue` in addition to the existing stacks. This ensures broader compatibility and reliability of the application across different Inertia.js configurations.
Copy link

Thanks for submitting a PR!

Note that draft PR's are not reviewed. If you would like a review, please mark your pull request as ready for review in the GitHub user interface.

Pull requests that are abandoned in draft may be closed due to inactivity.

HichemTab-tech and others added 11 commits September 12, 2024 02:32
Streamline button and layout components by removing redundant dark mode classes and improving prop handling. Added `usePage` import and adjusted Slot tags for better integration with JET stream properties. Updated layout components for API and team pages to ensure consistent styling.
Added a timeout of 30 minutes for the 'stub-tests' job in the GitHub Actions workflow to prevent indefinite runs. This ensures jobs that exceed the set duration are terminated automatically.
Lowered the timeout for the stub-tests job in GitHub Actions from 30 minutes to 2 minutes. This change aims to prevent prolonged hangs and expedite feedback during CI runs.
Deleted the timeout-minutes parameter from the stub-tests job in the tests.yml workflow file. This change allows the job to run without the previously set 2-minute limit.
Changed the required version of PestPHP and its Laravel plugin from 2.0 to 3.0 in the InstallCommand. This takes advantage of the latest features and improvements from these updated versions.
Modified the InstallCommand to require specific versions (^3.0) of the pestphp/pest and pestphp/pest-plugin-laravel packages. This ensures compatibility with the latest features and improvements in Pest version 3.0.
Updated the package versions for pestphp and its Laravel plugin in the InstallCommand. Added temporary debug print statements to trace the execution flow.
This commit cleans up the InstallCommand by removing unnecessary debug print statements. These changes help keep the codebase clear and maintainable.
Applied consistent formatting standards for imports, JSX element wrapping, and inline styles. This enhances code readability and maintainability across various components.
Applied consistent formatting standards for imports, JSX element wrapping, and inline styles. This enhances code readability and maintainability across various components.
@HichemTab-tech HichemTab-tech marked this pull request as ready for review September 12, 2024 02:36
@taylorotwell taylorotwell marked this pull request as draft September 12, 2024 14:41
@taylorotwell
Copy link
Member

While I really appreciate this effort, we are focused on rebuilding our starter kits this fall using popular UI component libraries, etc.

@SergioTGSerra
Copy link

While I really appreciate this effort, we are focused on rebuilding our starter kits this fall using popular UI component libraries, etc.

Is the development of the rebuilding being done in-house? Why not make project development open?

@Diddyy
Copy link

Diddyy commented Nov 14, 2024

@HichemTab-tech Awesome PR! :)

While I really appreciate this effort, we are focused on rebuilding our starter kits this fall using popular UI component libraries, etc.

I understand the Laravel team is focused on rebuilding the starter kits with popular UI libraries this fall—exciting stuff! Any details on how React might fit into these future plans would be great to know. Appreciate the hard work from everyone involved!

@HichemTab-tech
Copy link
Author

HichemTab-tech commented Nov 23, 2024

@Diddyy Thanks so much for the kind words and support, really means a lot!

@taylorotwell Hey Taylor, I hope all is well! I've resolved the latest conflicts, and I'm excited to mark this PR as ready for review again. I completely understand the direction you're taking with rebuilding the starter kits this fall—sounds like an amazing step forward for Laravel.

However, I do feel that adding React support in Jetstream could make it even more versatile for the community, given the number of developers already using React (including me :) ). This PR aims to fill that gap and provide a seamless experience for React users who love Laravel's ecosystem (including me :) ).

Would love to get your thoughts, and I hope this can still be a consideration in Jetstream's roadmap. Thanks again for all your incredible work, and for taking the time to review this!

BTW: If this PR is approved and everything goes well—I'd gladly offer to contribute the required parts to the documentation repository ( jetstream )

@HichemTab-tech HichemTab-tech marked this pull request as ready for review November 23, 2024 00:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants