Back to Homepage

Deploying React with Laravel

3 min read


Deploying React with Laravel

Both React and Laravel are powerhouses in their own right. React has an excellent front-end library for creating single-page applications, while Laravel is an excellent PHP framework that is perfect for developing server-side logic. Combining these two can result in highly efficient web applications. If this is your first time deploying React with Laravel backend, it might seem tricky. Here's a guide to help you.

Prerequisites for React with Laravel

Before diving in, make sure you have the following installed:

  1. PHP >= 7.3

  2. Composer

  3. Node.js and npm

  4. Laravel CLI

  5. Git

Create Laravel Project

Begin by creating a new Laravel project:

composer create-project laravel/laravel .

Install React

Laravel provides an easy way to scaffold a React setup using its frontend preset:

composer require laravel/ui
php artisan ui react

Now, install the dependencies:

npm install --save-dev react react-dom

To make this usable throughout your entire application, you'll have to include this in your JavaScript code bundle. To do so, open the resoureces/js/app.js file and update its code as follows:

// resoureces/js/app.js


// React Components

You'll have to change the Laravel Mix configuration so that it can compile the React component properly. To do so, open the webpack.mix.js file from the project root and update its code as follows:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [

Build Your React App

You'll find a resources/js directory where you can build your React application. The entry point is resources/js/app.js.

Here's an example of a simple React component (resources/js/components/Example.js):

import React from 'react';

const Example = () => {
    return (
        <div className="container">
            <h1>Hello, React!</h1>

export default Example;

Compile Assets

Compile your React and Laravel assets using Laravel Mix:

npm run dev

Laravel Routing

To make Laravel work with React Router, you need to ensure that all routes point to your Laravel entry point (public/index.php). In your routes/web.php file, add:

Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

Deploying React with Laravel

Once you're satisfied with your local setup, it's time to deploy. You can use various methods for deploying a Laravel app, such as:

  1. Shared Hosting: Zip your project and upload it via cPanel, then link your database.

  2. AWS EC2: Provision an EC2 instance and deploy your application using Git and Composer.

  3. Heroku: Use the Heroku CLI to deploy both the React frontend and Laravel backend easily.

  4. Docker: Containerize your application for a consistent environment.


  • Run composer install for installing PHP dependencies.

  • Run npm install and npm run prod for your frontend dependencies and build.

  • Adjust your .env settings according to your production environment.


Integrating a React frontend with a Laravel backend is a powerful way to build modern web applications. By following this guide, you should be equipped with the basic steps required to deploy this stack successfully.

Follow @LaravelSage on X → Follow @LaravelSage on Facebook →
Aniket Singh

Aniket Singh

View All Articles

Full-stack developer with a knack for Merging creativity with technical expertise for standout solutions.

Related Articles

data_forget Helper for Laravel

data_forget Helper for Laravel

Since Laravel version 10.15, there is a new utility function called data_forget that allows you to remove keys from an array or object using a "dot" notation.

Laravel Tenant Application with Tenancy

Laravel Tenant Application with Tenancy

You can make your Laravel app multi-tenant using the Tenancy for Laravel Tenant package. This tenancy package lets you make any Laravel application multi-tenant without rewriting it.

Top Laravel Packages for Building Powerful Applications

Top Laravel Packages for Building Powerful Applications

Are you ready to take your Laravel skills to the next level and build extraordinary applications? Look no further! In this blog post, we will unveil a treasure trove of top packages that will revolutionize your development process.

Subscribe for 20+ new Laravel tutorials every week

You can unsubscribe at any time. You'll also get -20% off my courses!

© 2024


Laravel Sage

   |    Privacy Policy