Laravel Inertia Template
This is the starter template for Inertia js + React for fullstack project.
Stack / Features
-
Laravel 9.x
-
Inertia (server-side: 0.5.4 & client-side: 0.11.0)
-
React 17.x
-
Vite 2.x
-
Ziggy (Laravel named routes on frontend)
-
TailwindCSS 3.x (plugins included: nesting, auto-imports, autoprefixer)
-
lodash 4.x
-
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 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.