- php
- composer
- mysql shell {https://dev.mysql.com/downloads/shell/}
- laravel
- nom
touch docker-compose.yml
echo 'version: "3.1"' >> docker-compose.yml
echo 'services:' >> docker-compose.yml
Adds a volume directory (See Config Below)
echo '/data' >> .gitignore
mkdir data
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8001
DB_DATABASE=myapp
DB_USERNAME=myapp
DB_PASSWORD=myapp
version: "3.1"
services:
mysql:
image: mysql:8.0
container_name: mysql
volumes:
- ./data/mysql:/var/lib/mysql
environment:
- MYSQL_ROOT_PASSWORD=myapp
- MYSQL_DATABASE=larvel-react-app-db
- MYSQL_USER=myapp
- MYSQL_PASSWORD=myapp
ports:
- "8001:3306"
'mysql' => [
'driver' => 'mysql',
'url' => env('DATABASE_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '8001'),
'database' => env('DB_DATABASE', 'laravel-react-app-db'),
'username' => env('DB_USERNAME', 'myapp'),
'password' => env('DB_PASSWORD', 'myapp'),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
]
php artisan serve
docker-compose up -d
https://dev.mysql.com/downloads/shell/
sudo mysqlsh --sql -h localhost -P 8001 -u myapp -pmyapp -D myapp
YOU MAY BE PROMPTED FOR DEVICE PASSWORD HERE
php artisan migrate
npm create vite
- Project name: … react
- Select a framework: › React
- Select a variant: › TypeScript + SWC
Now run
cd react
npm install
npm run dev
If you'd like, you can change the port that the front end is running on via the react/package.json file
...
"type": "module",
"scripts": {
"dev": "vite --port=3000",
"build": "tsc && vite build",
"preview": "vite preview"
},
...
npm install react-router-dom -S
https://www.youtube.com/watch?v=VaDZ4NS6dbY
npm add -D sass
mkdir styles
touch styles/_main.css
echo "h1 {color: red;}" > styles/_main.css
If styles are working, you are all set. Continue to install dev dependencies:
npm i normalize.css
Add import to _main.scss
/* _main.scss */
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/react-fontawesome@latest
Add import to _main.scss
@import "@fortawesome/fontawesome-free/css/all.css";
Add theme support https://javascript.plainenglish.io/building-a-custom-theme-provider-using-reacts-context-api-4e10de8eaf43] https://felixgerschau.com/react-typescript-context/
After installing styled-components, install @types for Typescript projects
npm install styled-components
npm i --save-dev @types/styled-components`
php artisan make:controller Api/AuthController
php artisan make:request LoginRequest
php artisan make:request SignupRequest
This command makes a User model and creates a migration for that model.
php artisan make:model Post -m
From here you can edit the generated migration to add specific columns.
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title'); // maxes out at 255
$table->text('excerpt'); // maxes out at 65,535
$table->text('body');
$table->timestamps();
$table->timestamp('published_at')->nullable();
});
}
To apply the changes to the database, run the migrate command
php artisan migrate
Build the nessessary files:
# Manages API endpint
php artisan make:controller Api/PostController --model=Post --resource --requests --api
# Converts from database to JSON Serializable
php artisan make:resource PostResource
php artisan make:migration add_first_and_last_to_users --table="users"
Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
- Simple, fast routing engine.
- Powerful dependency injection container.
- Multiple back-ends for session and cache storage.
- Expressive, intuitive database ORM.
- Database agnostic schema migrations.
- Robust background job processing.
- Real-time event broadcasting.
Laravel is accessible, powerful, and provides tools required for large, robust applications.
Laravel has the most extensive and thorough documentation and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
You may also try the Laravel Bootcamp, where you will be guided through building a modern Laravel application from scratch.
If you don't feel like reading, Laracasts can help. Laracasts contains over 2000 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel Patreon page.
- Vehikl
- Tighten Co.
- Kirschbaum Development Group
- 64 Robots
- Cubet Techno Labs
- Cyber-Duck
- Many
- Webdock, Fast VPS Hosting
- DevSquad
- Curotec
- OP.GG
- WebReinvent
- Lendio
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the Laravel documentation.
In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.
If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via taylor@laravel.com. All security vulnerabilities will be promptly addressed.
The Laravel framework is open-sourced software licensed under the MIT license.