DEV Community: Dinesh Wijethunga

How to build Modern Web Apps: Laravel 12 + InertiaJS + ReactJS

Dinesh Wijethunga — Sat, 13 Dec 2025 07:49:00 +0000

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!

How to Set-Up MySQL with DBngin for Laravel 12 Development

Dinesh Wijethunga — Thu, 23 Oct 2025 19:59:03 +0000

Setting Up MySQL with DBngin for Laravel 12 Development

Welcome back to our Laravel 12 setup series! In the previous post, we got our PHP environment set up using Herd (or MAMP) and successfully installed a fresh Laravel 12 project. In this lesson, we're going to create a dedicated home for our application data.

While tools like MAMP include MySQL, they can present some workflow challenges. In this guide, we'll configure DBngin—a streamlined and user-friendly database server manager for macOS and Windows. It enables you to run multiple versions of MySQL, PostgreSQL, and Redis simultaneously, without version conflicts.

By the end of this tutorial, you'll have a clean, isolated database server configured for your Laravel 12 application. This setup will work seamlessly with any application that requires database connectivity, not just Laravel.

🎯 What You'll Learn

How to install and configure DBngin
Setting up MySQL for Laravel development
Creating databases and managing connections
Connecting Laravel 12 to your database
Testing the database connection

📋 Prerequisites

Laravel 12 project set up (Part 1)
Basic terminal knowledge
macOS or Windows machine

🚀 Step 1: Download and Install DBngin

1.1 Get DBngin

Visit the official DBngin website at dbngin.com
Click the 'Download For Mac' button (or 'Download For Windows' if you're on Windows)

1.2 Install the Application

Drag the DBngin app into your Applications folder
Double-click the DBngin icon in Applications to launch it

That's all there is to it! You've successfully installed DBngin.

🗄️ Step 2: Starting Your Database Server

2.1 Launch and Configure

Open the DBngin application—you'll see a clean, intuitive interface
By default, DBngin offers the latest versions of MySQL and PostgreSQL
For Laravel projects, MySQL is the popular choice

2.2 Create MySQL Connection

Click the plus icon (+) at the top
Select MySQL from the options
Choose the version compatible with your processor
Give it a memorable name (e.g., "Laravel Dev")
Keep the default port (3306)

2.3 Start the Server

Click "Create" - DBngin will download MySQL and set up the connection
Click "Start" - you'll see it switch to "Stop" with a green indicator

Congratulations! Your database server is now running! But we're not done yet—let's connect to it and create our database.

🔌 Step 3: Connecting and Creating Your Database

Think of DBngin as a brand-new apartment building with no individual apartments. Let's create a room (database) for our Laravel app.

3.1 Find MySQL Client Path

After starting your MySQL connection, click the right arrow (→) button
Select the second option to open terminal with the correct path

The path will look something like:

/Users/Shared/DBngin/mysql/8.0.33/bin

3.2 Access MySQL Shell

# Navigate to MySQL bin directory
cd /Users/Shared/DBngin/mysql/8.0.33/bin

# Access MySQL shell
./mysql -u root -p

When prompted for a password, press Enter (DBngin's root user has no password by default).

Your terminal prompt should change to mysql>, indicating you're now inside the MySQL monitor.

3.3 Create Database for Laravel

-- Create database for your Laravel project
CREATE DATABASE laravel_12_app;

-- Verify the database was created
SHOW DATATBASES;

You should see your new database in the list!

🔗 Step 4: Connecting Laravel 12 to Your Database

4.1 Update Environment Configuration

Navigate to your Laravel 12 project and open the .env file. Find the database configuration section:

Before:

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

After:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_12_app
DB_USERNAME=root
DB_PASSWORD=

Note: DB_PASSWORD is left empty as DBngin's root user has no password by default.

✅ Step 5: Testing the Connection

5.1 Check Database Status

Laravel provides Artisan commands to check database status and run migrations.

# Navigate to your project root
cd path/to/your/laravel-project

# Check database connection and info
php artisan db:show

You should see output showing your database connection is successful!

Run Migrations

# Run database migrations
php artisan migrate

If this command runs without errors, congratulations! You've officially set up your database and connected it to Laravel 12 perfectly.

🎉 You're All Set!

You've just leveled up your local development setup! 🎉 By using DBngin, you now have a clean, manageable, and powerful database server dedicated to your projects. Combined with Herd for PHP and the Laravel installer, you're all set with a professional-grade local environment for building amazing things with Laravel 12!

📝 Quick Recap
✅ Downloaded and installed DBngin

✅ Started the MySQL server

✅ Created a database via command line

✅ Updated Laravel's .env file

✅ Tested the connection with Artisan

🚀 What's Next?
In the next part of our series, we'll dive into:

Choosing and setting up a code editor
Essential tools for modern Laravel development
Configuring your development workflow.

💬 Questions?
Got stuck or have a question? Feel free to drop a comment below—I'd love to help! 😊

Enjoyed this tutorial? Check out more Laravel content on Dinesh Stack and follow me for more web development tips!

Coming Soon: Dinesh Stack - Practical Web Development Tutorials

Dinesh Wijethunga — Sat, 18 Oct 2025 17:42:25 +0000

Hello DEV community! 👋

I'm Dinesh, a full-stack developer with 10+ years of experience, and I'm excited to announce that I'm launching Dinesh Stack next week!

For years, I've noticed that many tutorials focus on toy examples rather than real-world applications. That's why I'm creating content that bridges that gap.

What to expect:
• Production-ready code examples
• Real project walkthroughs
• Career advice from experience
• Open source contributions

I'd love to hear from this amazing community - what topics would help you most in your development journey?

Stay tuned for the launch! 🚀