LaravelReact后台启动器

laravel9-inertiajs-reactjs-starter — Laravel 后台模板

作者 agungksidik

基于 Laravel、Inertia 与 React 的后台启动器，内置多套布局、登录注册与用户管理页面。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

服务端 Laravel 与前端 React 通过 Inertia 连接，无需单独维护 API 层

02

内置 Guest、Base、Auth 三套布局，区分访客页与登录后页面

03

包含登录、注册与 Google 登录三种认证入口

04

提供用户管理页与个人资料页等后台基础界面

05

整合 Bootstrap 5 与 Argon Dashboard 2 的界面样式

06

Roadmap 中 Activity Log 与 Roles and Permissions 尚未实现

模板详细介绍

这是一个后台启动器代码库，用于在 Laravel 与 React 组合下快速搭建带管理界面的项目。服务端使用 Laravel 处理路由、数据库迁移与认证，前端通过 Inertia 在 React 中渲染页面，样式基于 Bootstrap 5，并整合了 Argon Dashboard 2 的界面模板。

仓库已实现的功能包括：多套布局（Guest、Base、Auth）、登录、注册、Google 登录、用户管理以及个人资料页。README 的 Roadmap 中，Activity Log 与 Roles and Permissions 仍标注为未完成，说明权限与操作日志尚未包含在内。

安装流程为克隆仓库后执行 composer install 与 npm install，配置 .env 中的数据库连接，运行 php artisan migrate --seed 建表并填充数据；Google 登录需要额外填写客户端 ID、密钥与回调地址。默认用户密码在 UserFactory 中设置，README 标注为 123456。项目采用 MIT 许可，可免费使用、修改与分发，但演示图片、字体、图标等第三方素材需单独核对许可。

LaravelReact后台启动器

适合你的项目吗？

适用场景

  • 需要以 Laravel 为后端、React 为前端搭建后台管理界面时作为起点
  • 希望直接获得登录、注册与 Google 登录等认证页面的项目
  • 需要区分访客布局与登录后布局的多页面后台结构
  • 需要用户列表管理与个人资料编辑等基础页面的场景

适合人群

  • 熟悉 Laravel 与 React、希望减少后台基础页面搭建工作的开发者
  • 需要带认证与用户管理界面的内部管理系统原型
  • 以 Bootstrap 5 与 Argon Dashboard 风格为界面基线的项目
  • 接受 MIT 许可并自行核对第三方素材授权的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    需先安装 Composer 与 Node.js，再克隆仓库并执行 composer install 与 npm install

  2. 2

    在 .env 中配置数据库名称、用户名与密码，然后运行 php artisan migrate --seed 建表并填充数据

  3. 3

    Google 登录需在 .env 中填写 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET 与 GOOGLE_REDIRECT

  4. 4

    开发时用 php artisan serve 启动服务端，用 npm run hot 启动前端热更新

  5. 5

    默认用户密码在 UserFactory 中设置，README 标注为 123456，使用前应修改

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • Google 登录功能需自行申请并配置 Google OAuth 凭据（GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、GOOGLE_REDIRECT），依赖外部服务与账号。
  • 使用前必须自行准备并配置数据库连接（数据库名、用户名、密码），项目本身不附带数据库服务。
  • 运行需预先安装 Composer 与 Node.js 环境，并执行 composer install 与 npm install 安装依赖。
  • 界面基于第三方 Argon Dashboard 2 模板整合，该模板素材的授权需单独核对，不随本项目 MIT 许可一并授予。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Google Sign In (Insert to your .env)

README 原文

DB_DATABASE=yourdatabase_name

README 原文

install Composer & NodeJs

README 原文

Integrations Argon Dashboard 2 HTML template to ReactJs

README 原文
https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/blob/master/LICENSE.txthttps://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-09-30。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 69 / 100
技术栈
Laravel · React
网站类型
后台 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2022-02-24
截图检查日期
2026-09-30

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 Laravel。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: d8a79e9ae6b934c95dfd33f2f482b83696dd6919e5b38eae8f868a32a88e3cee

2026-09-30T09:28:43.107Z

来源文件 / 仓库
<div id="top"></div>
<!--
*** Thanks for checking out the Best-README-Template. If you have a suggestion
*** that would make this better, please fork the repo and create a pull request
*** or simply open an issue with the tag "enhancement".
*** Don't forget to give the project a star!
*** Thanks again! Now go create something AMAZING! :D
-->



<!-- PROJECT SHIELDS -->
<!--
*** I'm using markdown "reference style" links for readability.
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
*** See the bottom of this document for the declaration of the reference variables
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
-->
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]



<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter">
    <img src="https://raw.githubusercontent.com/agungksidik/public-assets/master/logo/laravel-logo.png" alt="Logo" width="90" height="90">
  </a>
  <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter">
    <img src="https://raw.githubusercontent.com/agungksidik/public-assets/master/logo/inertiajs-logo.png" alt="Logo" width="90" height="90">
  </a>
  <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter">
    <img src="https://raw.githubusercontent.com/agungksidik/public-assets/master/logo/reactjs-logo.png" alt="Logo" width="90" height="90">
  </a>

<h3 align="center">Laravel Inertia ReactJs Starter</h3>

  <p align="center">
    This is a starter code to start the project, which already includes multiple layout admin templates with login for authentication
    <br />
    <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter"><strong>Explore the docs »</strong></a>
    <br />
    <br />
    <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter">View Demo</a>
    ·
    <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/issues">Report Bug</a>
    ·
    <a href="https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/issues">Request Feature</a>
  </p>
</div>



<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li><a href="#screenshoot">Screenshoot</a></li>
    <li><a href="#roadmap">Roadmap</a></li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>



<!-- ABOUT THE PROJECT -->
## About The Project

<p align="center">
  <img src="https://raw.githubusercontent.com/agungksidik/laravel9-inertiajs-reactjs-starter/master/images/screenshoot1.png" />
</p>

<p align="right">(<a href="#top">back to top</a>)</p>

### Built With

* [Laravel 9](https://laravel.com)
* [React.js](https://reactjs.org/)
* [Bootstrap 5](https://getbootstrap.com)
* [Inertia](https://inertiajs.com/)
* [Argon Dashboard 2](https://www.creative-tim.com/product/argon-dashboard)
* [Laravel Socialite](https://github.com/laravel/socialite)

<p align="right">(<a href="#top">back to top</a>)</p>

## Screenshoot

| Login | Register | Landing Page |
| --- | --- | --- |
| [![Login](https://raw.githubusercontent.com/agungksidik/public-assets/master/laravel9-inertiajs-reactjs-starter/login_page.png)](#) | [![Register](https://raw.githubusercontent.com/agungksidik/public-assets/master/laravel9-inertiajs-reactjs-starter/register_page.png)](#) | [![Landing Page](https://raw.githubusercontent.com/agungksidik/public-assets/master/laravel9-inertiajs-reactjs-starter/home_page.png)](#) |

| Dashboard | Manage User | Profile Page |
| --- | --- | --- |
| [![Dashboard](https://raw.githubusercontent.com/agungksidik/public-assets/master/laravel9-inertiajs-reactjs-starter/dashboard_page.png)](#) | [![Manage User](https://raw.githubusercontent.com/agungksidik/public-assets/master/laravel9-inertiajs-reactjs-starter/manage_user.png)](#) | [![Profile Page](https://raw.githubusercontent.com/agungksidik/public-assets/master/laravel9-inertiajs-reactjs-starter/profile_page.png)](#) |

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- ROADMAP -->
## Roadmap

- [x] Integrations Argon Dashboard 2 HTML template to ReactJs
- [x] Multiple layout (Guest, Base, Auth)
- [x] Authentication
    - [x] Sign in
    - [x] Register 
    - [x] Google Sign in 
- [x] User Management
- [x] Profile
- [ ] Activity Log
- [ ] Roles and Permissions

See the [open issues](https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/issues) for a full list of proposed features (and known issues).

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- GETTING STARTED -->
## Getting Started

Get a local copy (clone the repo)

### Prerequisites

install Composer & NodeJs 

- [Composer](https://getcomposer.org/doc/00-intro.md)
- [Node Js](https://nodejs.org/en/download/)

### Installation

1. Clone the repo
   ```sh
   git clone https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter.git
   ```
2. Install dependency Laravel
   ```sh
   composer install
   ```
3. Install NPM packages
   ```sh
   npm install
   npm run dev
   ```
4. Create table corresponds to .env
    ```js    
    DB_DATABASE=yourdatabase_name
    DB_USERNAME=your_username
    DB_PASSWORD=your_password
   ```
5. Run migration & Seeder
   ```sh
   php artisan migrate --seed
   ```
6. Google Sign In (Insert to your .env)
   ```sh
    GOOGLE_CLIENT_ID='your_client_id'
    GOOGLE_CLIENT_SECRET='your_client_secret'
    GOOGLE_REDIRECT='your_callback_url'
   ```
<p align="right">(<a href="#top">back to top</a>)</p>



<!-- USAGE EXAMPLES -->
## Usage

1. run server-side (Laravel)
   ```sh
   php artisan serve
   ```
2. See webpack.min js 
   ```sh
   mix.browserSync('your_url.test'); //if using Laravel Valet
   mix.browserSync('127.0.0.1:8000'); //if using artisan serve
   ```
3. run client-side (ReactJs)
   ```sh
   npm run hot
   ```
4. Default password
   ```sh
   setup in UserFactory
   default '123456'
   ```
   

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- CONTRIBUTING -->
## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

<p align="right">(<a href="#top">back to top</a>)</p>



<!-- LICENSE -->
## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

<p align="right">(<a href="#top">back to top</a>)</p>



<!-- CONTACT -->
## Contact

Agung Sidik Muhamad - [@agungksidik](https://twitter.com/agungksidik) - [email protected]

Project Link: [https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter](https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter)

<p align="right">(<a href="#top">back to top</a>)</p>



<!-- ACKNOWLEDGMENTS -->
## Acknowledgments

<p align="right">(<a href="#top">back to top</a>)</p>



<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
[contributors-shield]: https://img.shields.io/github/contributors/agungksidik/laravel9-inertiajs-reactjs-starter.svg?style=for-the-badge
[contributors-url]: https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/agungksidik/laravel9-inertiajs-reactjs-starter.svg?style=for-the-badge
[forks-url]: https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/network/members
[stars-shield]: https://img.shields.io/github/stars/agungksidik/laravel9-inertiajs-reactjs-starter.svg?style=for-the-badge
[stars-url]: https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/stargazers
[issues-shield]: https://img.shields.io/github/issues/agungksidik/laravel9-inertiajs-reactjs-starter.svg?style=for-the-badge
[issues-url]: https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/issues
[license-shield]: https://img.shields.io/github/license/agungksidik/laravel9-inertiajs-reactjs-starter.svg?style=for-the-badge
[license-url]: https://github.com/agungksidik/laravel9-inertiajs-reactjs-starter/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/agung-sidik-muhamad-5b427620b/
[product-screenshot]: https://raw.githubusercontent.com/agungksidik/laravel9-inertiajs-reactjs-starter/master/images/screenshoot1.png
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

sage

sage

WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and block editor support

Laravel · 启动器

wave

wave

Wave - The Software as a Service Starter Kit, designed to help you build the SAAS of your dreams 🚀 💰

Laravel · SaaS

coreui-free-laravel-admin-template

coreui-free-laravel-admin-template

CoreUI Free Laravel Bootstrap Admin Template

Laravel · 后台

sneat-bootstrap-html-laravel-admin-template-free

sneat-bootstrap-html-laravel-admin-template-free

Most Powerful & Comprehensive Free Bootstrap 5 HTML Laravel Admin Dashboard Template built for developers!

Laravel · 后台

filament-starter

filament-starter

A beautiful starting point for your next TALL stack project using Filament. ⚡

Laravel · 启动器

electrik

electrik

Laravel SaaS starter kit: auth, teams, Stripe billing, and Slate 3 — Composer package for Laravel 12

Laravel · SaaS