/inertia-react-laravel-template

Primary LanguagePHP

Laravel Inertia Template


This is the starter template for Inertia js + React for fullstack project.

Stack / Features

  1. Laravel 9.x

  2. Inertia (server-side: 0.5.4 & client-side: 0.11.0)

  3. React 17.x

  4. Vite 2.x

  5. Ziggy (Laravel named routes on frontend)

  6. TailwindCSS 3.x (plugins included: nesting, auto-imports, autoprefixer)

  7. lodash 4.x

  8. clsx 1.x

Quick Start

git clone

composer install 
cp .en.example .env
php artisan key:generate

npm install or yarn 

npm run dev

Documentation

Use jsDocs for documentation

Example:

/**
 * @param {object} params
 * @description Used to handle the request
 * @returns {object}
*/
function (params) {
 // API request

 return {};
}

Naming convention

Read about Programming Case Types

  • For folders use camel-case.
  • For React components (.jsx) use PascalCase.
  • For JavaScript files use camelCase.

Folder structure

folder tree

Folder Definitions:

assets folder : Add images or icons.

constants : Add reuseable constant.

constants -> globals.js : Add reuseable enums.

store : Create store / reducers and actions for the app.

utils : Add utility functions.

Styling & tailwindcss

css -> app.css : Use this file just for imports.

css -> utilities.css : Use this create your custom utility classes.

css -> index.css : Use this to add custom styling for your pages / components.

css -> {ui_library_name}Defaults : Use this file to override UI component library styling. e.g: for antd the file name is antdDefaults.scss.



For common-components and pages make sure to add the styling file in the same folder as the component.

Contribution

For contribution fork the project and make a PR.