People in the modern world need fast, innovative solutions for many things. When it comes to web application development, some apps are developed as SPAs (Single-Page Applications) while others are MPAs (Multi-Page Applications). SPAs are typically built with client-side programming languages like React, Vue, and Svelte, while MPAs are developed with server-side languages like PHP and Java.
What if someone needs to combine these approaches to build an app quickly? This might seem overwhelming. However, with the new features of Laravel 12 framework and InertiaJS, it's now very easy to integrate with React, Vue, and most other client-side languages.
This tutorial will teach you how to set up a Laravel app with InertiaJS and ReactJS for SPA or MPA web applications.
Installation Prerequisites
- PHP 8.3 or above
- Laravel installer (or Composer for Laravel installation)
- Latest NodeJS version
Step 1: Create a Laravel Project
laravel new dineshstack.blog
During the installation, you'll be prompted with several options. Here's what to choose:
Choose React for the Frontend
Select the React option when prompted to set up the Laravel, Inertia, and React stack:
Select Authentication System
Choose Laravel's built-in authentication for the default Starter Kit of React Laravel:
Pick Testing Framework
Select either PHPUnit or Pest as your testing framework. After this selection, Laravel will install all the required dependencies for your application:
Install Frontend Dependencies
When asked whether to install npm dependencies, choose yes. This will install all the React dependencies and other frontend packages:
Step 2: Verify Installation and Run the Application
If you've completed all steps correctly, you now have a fully installed application. Navigate to your project directory:
cd dineshstack.blog/
Start the development server:
php artisan serve
You'll see output similar to this:
Your application will be available at:
http://127.0.0.1:8000
🎉 And You're Done!
You now have a fully functional Laravel application with InertiaJS and ReactJS integration. This setup provides you with:
A powerful Laravel backend
React frontend with InertiaJS for seamless integration
Built-in authentication system
Modern development tooling
You can start building amazing web applications with this powerful stack. The combination gives you the best of both worlds: Laravel's robust backend capabilities with React's dynamic frontend experience.
Next Steps:
Explore the generated authentication pages
Check out the React components in the resources/js/Pages directory
Review the Laravel routes that connect to your React components
Start building your custom features!
Happy coding! 🚀
Enjoyed this tutorial? Check out more Laravel content on Dinesh Stack and follow me for more web development tips!
Top comments (0)