A preconfigured Laravel, React, Typescript, Docker boilerplate to save you time!

Laravel - React - Docker - Boilerplate

This repo is built with the following:

• Laravel 9
• React 17
• Vite 3
• ESLint 8
• TypeScript 4.7
• Husky/Commit lint
• PHP CS Fixer v3
• Redis 7
• Postgres 14.4
• Nginx 1.23

I put together this repo in an effort to have a solid starting place to begin a React/Docker/Laravel project from. While I understand monolithic repos may not be everyone's bread and butter, it makes sense for a good number of my projects. If you find any bugs or see anything that needs to be changed/updated feel free to put up a PR!

Get started

1. Install Docker Desktop
2. Clone this repo
   1. git clone [email protected]:lockhinator/laravel-react-docker-boilerplate.git
3. CD into the directory
   1. cd laravel-react-docker-boilerplate
4. Copy the .env.example to .env
   1. cp .env.example .env
5. Update your .env to reflect the database you want to connect to. If using the default docker-compose.yml then you can copy the blow and paste it over the initial values.

   1.     DB_CONNECTION=pgsql
          DB_HOST=pgsql
          DB_PORT=5432
          DB_DATABASE=laravel
          DB_USERNAME=localuser
          DB_PASSWORD=supersecretpassword
      

6. Run the following commands to run the repo in docker
   1. docker-compose build fpm node web
   2. docker-compose run --rm fpm php artisan key generate
   3. docker-compose run --rm fpm php artisan migrate
   4. docker-compose run --rm fpm composer install
   5. docker-compose run --rm node yarn
   6. docker-compose up -d
7. Start making changes to the boiler plate

Usage

Linters and test suites are available for the boilerplate. You are free to change the configs how you want.

Running tests/linters

You can run tests/linters for both React and Laravel/PHP independently. These are the commands to do so:

1. React
   1. Jest tests
      1. docker-compose run --rm node yarn test
   2. Prettier
      1. docker-compose run node yarn prettier:check
      2. docker-compose run node yarn prettier:fix
2. Laravel
   1. docker-compose run --rm fpm php artisan test --coverage --min=85
3. PHP CS Fixer
   1. docker-compose run --rm fpm composer fix-cs-check
   2. docker-compose run --rm fpm composer fix-cs

The Jest configuration is defined in the package.json file under the jest key. The reason for this is that using jest.config.ts results in coverage not correctly running and no files will be found. If you want to make changes to the Jest configuration then do it in the package.json or risk not having coverage run correctly.

Committing changes

In order to keep commits looking good this repository uses commitlint in conjunction with husky.

Because of this the commit process ends up being:

• Create your branch
• Make changes to the code base
• Add your changes via git add
• Commit your changes using yarn commit
  • Fill out the interactive prompts
• Push your changes to your branch
  • git push

Todo

• Configure Jest code coverage to run correctly (currently not working)
• Fill out the jest tests more to cover the different default Laravel Auth pages

License

This boilerplate is open-sourced software licensed under the MIT license.