Laravel, Docker, Breeze and ReactJS easy startup

As I am sure everybody is aware setup with Laravel can be fairly easy with the help of dependencies. So for this tutorial we will be setting up a basic user login and dashboard.

• Laravel 10
• Laravel/breeze
• Laravel/sail
• Tailwind css
• Intertia.js
• ReactJS
• Docker link

Here are the steps of the tutorial.

1. Create a Laravel app
2. Create database settings and docker via sail
3. Add user and password
4. Create the Login and Dashboard pages

Source code can be found at github - here is the link.

Step 1. Create a Laravel app

So lets start by creating a new project by first choosing your default directory.

cd /Users/[your-username]/Sites 

Then setup Laravel in a folder named laravel-inertia-docker-breeze-react-app.

composer create-project laravel/laravel laravel-inertia-docker-breeze-react-app

cd /Users/[your-username]/Sites/laravel-inertia-docker-breeze-react-app

Step 2. Create database settings and docker via sail

NOTE: Make sure the Docker desktop app is running first

For this project we will be integrating Docker via sail.

composer require laravel/sail --dev

Then let sail setup the Docker instance.

php artisan sail:install

For now choose the default 0 for mysql - we can add additional services to it later.

 Which services would you like to install? [mysql]:
  [0] mysql
  [1] pgsql
  [2] mariadb
  [3] redis
  [4] memcached
  [5] meilisearch
  [6] minio
  [7] mailpit
  [8] selenium
  [9] soketi
 > 

NOTE: This initial setup will take longer

Let's get the docker instance up and running.

./vendor/bin/sail up -d 

You shoud be able to make sure it's working.

http://localhost

And see the following default page.

Now by default you should already have the .env created and keys generated. So now lets migrate the initial setup.

./vendor/bin/sail php artisan migrate

Step 3. Add user and password

We now need to add add a user to login into the dashboard - so let's go back in the terminal start adding it with tinker.

./vendor/bin/sail php artisan tinker

Add whatever details you want to use.

$user = new App\Models\User();
$user->password = Hash::make('the-password-of-choice');
$user->email = 'the-email@example.com';
$user->name = 'Admin User';
$user->save();

exit

Step 4. Create the Login and Dashboard pages

Now we need to add the Login and Dashboard pages so for this we will use the startup kit via Laravel/breeze.

composer require laravel/breeze --dev

For this setup we will be integrating react.js for the frontend framework (but it could be react etc) and running the below terminal input. This should add inertiajs and tailwind by default plus add inertia's default middleware to the routes.

./vendor/bin/sail php artisan breeze:install react
npm install
npm run dev

Once done you will notice Vite will startup in the terminal.

  VITE v4.4.3  ready in 3545 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

  LARAVEL v10.15.0  plugin v0.7.8

  ➜  APP_URL: http://localhost

So lets go back to the browser. You should notice the added navigation for 'Login In' and 'Register'.

So login to see if your user details work.

... if so you will be redirected to the dashboard.

Hope this has been helpful!