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

Overview

Build Status License

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.

You might also like...
Laravel 8 boilerplate in docker-compose with Treafik and SSL setup and github workflow ready for CI/CD pipeline

Laravel8 boilerplate Laravel 8 boilerplate in docker-compose with Treafik and SSL setup with .github workflow ready To start the containers in prod en

Kick-start you next Laravel based API with this awesome boilerplate 🚀
Kick-start you next Laravel based API with this awesome boilerplate 🚀

Laravel API boilerplate 🚀 An awesome boilerplate for your next Laravel 9 based API. It's only goal is to simply kick-start your API development and p

Api first backend boilerplate build with laravel 🎯 you can use as a template 😉

Laravel Backend Template i use this as a starting point for my backend projects , it saves time with basic auth functionalities and has code examples

Base Laravel project with React and Laravel Sanctum authentication

About this project This is a base Laravel project with ReactJS frontend and Laravel Sanctum API authentication. You could read more about here. Instal

React laravel starter kit with tailwind css and vite js(laravel 9)

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Boilerplate between the Magento API and ImportExport, so that you can do fast Array/XMLRPC/SOAP based product imports.

Boilerplate between the Magento API and ImportExport, so that you can do fast Array/XMLRPC/SOAP based product imports.

Nue Boilerplate - A package for those of you who are tired of coding
Nue Boilerplate - A package for those of you who are tired of coding

Nue Boilerplate Baca Dokumentasi Disini Screenshot Documentation Requirements Installation Configuration Components Alert License Requirements Laravel

A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting

React Laravel Boilerplate This is the boilerplate that I personally use for getting projects off the ground quickly using my favourite stack of techno

Laravel, react, and inertiajs for LevelUp Feel-IT 2021

How To Install hehe Clone the repository: Create your environment file: cp .env.example .env The app key is used to salt passwords. If you need to wor

Owner
Lockhinator
Lockhinator
Symfony React Blank is a blank symfony and react project, use this template to start your app using Symfony as an backend api and React as a frontend library.

Symfony React Blank Symfony React Blank is a blank symfony and react project, use this template to start your app using Symfony as an backend api and

Antoine Kingue 2 Nov 5, 2021
WP React Plugin Boilerplate - WordPress Setting via React and Rest API

WP React Plugin Boilerplate is a starter WordPress plugin to develop WordPress Plugin via React and Rest API. WP React Plugin Boilerplate WP React Plu

Santosh Kunwar 30 Sep 20, 2022
:elephant: A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.

Laravel Vue Boilerplate A Laravel 6 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass and Pug with: A users

Alefe Souza 525 Sep 20, 2022
Laravel framework with integrated NuxtJs support, preconfigured for eslint, jest and vuetify.

Laravel framework with integrated NuxtJs support, preconfigured for eslint, jest and vuetify.

M² software development 52 Aug 6, 2022
🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step

Postlight's Headless WordPress + React Starter Kit is an automated toolset that will spin up three things: A WordPress backend that serves its data vi

Postlight 4.3k Sep 20, 2022
Laravel Starter With Laravel, Vite, Vue 2, Inertia.js, Ziggy, Typescript

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Oskars Germovs 1 Oct 29, 2021
A Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios & TypeScript starter template.

Laravel 9 + Vite + Svelte + Tailwind CSS This starter template includes: Laravel 9 Vite Svelte Tailwind CSS (w/ @tailwindcss/forms and @tailwindcss/as

Ronnie 11 Sep 18, 2022
Reverse proxy skeleton built for docker with traefik, showcasing a Symfony + React application

Decoupled Backend(Symfony) + Frontend(React ts) built with Traefik & Docker Reverse proxy skeleton built for docker with traefik, showcasing a decoupl

Sergiu 1 Dec 13, 2021
The Laravel Boilerplate Project - https://laravel-boilerplate.com

Laravel Boilerplate (Current: Laravel 8.*) (Demo) Demo Credentials Admin: [email protected] Password: secret User: [email protected] Password: secret Offici

Anthony Rappa 5.4k Sep 29, 2022