Tailwind Resources Logo Tailwind Resources
Laravel React Typescript Boilerplate screenshot

Laravel React Typescript Boilerplate

Author Avatar Theme by Georgewritescode
Updated: 3 Sep 2021
56 Stars

Laravel 8 + React + Typescript + React Router v4 + Hot Module Reloading

Github

Categories

Laravel React Less Scss Ant design

Overview

The Laravel React Typescript Boilerplate is an opinionated boilerplate based on Laravel 8., React 16, and Typescript. It is designed to help developers get started quickly without spending time on configuration. This boilerplate includes various features and tools such as Laravel 8., React 16, Hot Module Reloading, Typescript, React Router 4, Axios, Lodash, PostCSS, PurgeCSS, Tailwind CSS, Tailwind Forms Plugin, Ant Design, FontAwesome 5, Emotion CSS-in-JS Library, Debugbar, Webpack Bundle Analyzer, Log Viewer, Laravel Telescope, and documentation.

Features

  • Laravel 8.*
  • React 16
  • Hot Module Reloading (npm run dev)
  • Admin Middleware
  • Typescript
  • Webpack 4
  • React Router 4
  • Axios
  • Lodash (lodash-es)
  • PostCSS
  • PurgeCSS
  • Tailwind CSS
  • Tailwind Forms Plugin
  • Ant Design
  • FontAwesome 5
  • Emotion CSS-in-JS Library
  • Debugbar
  • Webpack Bundle Analyzer
  • Log Viewer - /log-viewer (Protected by admin middleware)
  • Laravel Telescope

Installation

To install and use the Laravel React Typescript Boilerplate, follow these steps:

  1. Clone or download the boilerplate from the provided source.
  2. Navigate to the project directory.
  3. Open the terminal and run the following command to install the required dependencies:
npm install
  1. Configure the Laravel environment by setting the Laravel APP_ENV variable to production for using production built files.
  2. Configure the admin middleware by adding the emails of ‘Admins’ to the admins array in the config/auth.php file.
  3. Start the development server with Hot Module Reloading using the following command:
npm run dev
  1. Optionally, for production development, run the following command:
npm run production
  1. Access the application in the browser using the specified localhost URL.

Summary

The Laravel React Typescript Boilerplate is a comprehensive starting point for web development projects using Laravel 8.*, React 16, and Typescript. It provides a well-configured environment with various features and tools, allowing developers to quickly get started without spending time on manual configuration. The boilerplate includes features such as Hot Module Reloading, React Router, Axios, Lodash, Tailwind CSS, Ant Design, and many more. With the clear documentation provided, developers can easily understand and make use of the boilerplate to build robust web applications.