Todo App

A Todo demo application to illustrate Laravel with Inertia/React.

Backend Framework:

• Laravel v10.40.0 (PHP v8.3.1): https://laravel.com/docs/10.x/installation#docker-installation-using-sail with Breeze, Inertia, React, and PHP Unit testing scaffolding

Frontend Framework:

• React v8.2.0: https://react.dev/
• Node v20.11.0
• Npm v10.3.0

Frontend installed packages:

• Prop Types (typechecking): https://legacy.reactjs.org/docs/typechecking-with-proptypes.html
• React Transition Group (defining entering and exiting transitions): https://reactcommunity.org/react-transition-group/
• Zustand (global state management): https://github.com/pmndrs/zustand

Note:

• using server-side mysql database to save todo data
• using react zustand for props state management
• Docker/Sail is installed

Local Dev Installation

Clone the repo locally:

git clone https://github.com/wayjay4/todo_laravel_react_app.git todoapp

Go into todoapp dir:

cd todoapp

Install PHP dependencies (composer v2.6.6):

composer install

Install NPM dependencies (node v20.11.0, npm v10.3.0):

Node

nvm install <version>

nvm use <version>

• https://stackoverflow.com/questions/7718313/how-to-change-to-an-older-version-of-node-js

Npm

npm install npm@x.x.x -g

• https://stackoverflow.com/questions/9755841/how-can-i-change-the-version-of-npm-using-nvm

Build assets:

npm install

npm run dev

Two options to serve the Todo Application

• 1.) using php artisan serve and local database (see instructions below)
• 2.) using docker service container (see instructions below)

---

1.) Serve application with php artisan and local database

Setup configuration:

cp .env.example .env

Generate application key:

php artisan key:generate

Create a local MySql database. You can also use another database (SQLite, Postgres), simply update your configuration accordingly.

• open .env file and change db settings as needed
• make database as needed

Run database migrations and seeder:

php artisan migrate:fresh --seed

Run the dev server (the output will give the address):

php artisan serve

You're ready to go! Visit Todo App in your browser!

---

2.) Serve application with Docker/Sail

Setup configuration:

cp .env.docker .env

Generate application key:

php artisan key:generate

Install Docker

Make sure you have installed and started Docker Desktop Application:

• https://www.docker.com/

Start Docker/Sail:

./vendor/bin/sail up

Configuring A Shell Alias for 'sail' (optional)

• https://laravel.com/docs/10.x/sail#configuring-a-shell-alias

sail up

Run database migrations and seeder for db service container:

sail artisan migrate:fresh --seed

You're ready to go! Visit Todo App in your browser!:

http://localhost/