Posted on Jan 18, 2022

Getting Started with the Laravel L.I.T.T.R Stack

#laravel #tailwindcss #react #typescript

In the past months, I’ve noticed a trend where I download the same exact packages to my freshly installed Laravel application — which I’ve decided to coin as the L.I.T.T.R stack. LITTR standing for Laravel - Inertia - Tailwind - Typescript - React. Yes, I can already hear your sigh of yet another acronym being introduced to the Laravel stack. However, I feel this write up is necessary because I’ve noticed a common theme of having to reference my other projects just to get this combination of packages to work together. In this blog post, I will show you how to quickly get started with the L.I.T.T.R stack.

1. Install Laravel

In order to get started, we need a Laravel project to work with. That can be done with a quick composer command like so:

$ composer create-project --prefer-dist laravel/laravel littr-stack

2. Install Server Side Inertia

First we want to set up Inertia on the server side by adding it as a composer dependency like so:

$ composer require inertiajs/inertia-laravel

Then create the file resources/views/app.blade.php

and add the following code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link href="{{ mix('/css/app.css') }}" rel="stylesheet" /> <script src="{{ mix('/js/app.js') }}" defer></script> @inertiaHead </head> <body> @inertia </body> </html>

Then create the middleware by running:

$ php artisan inertia:middleware

and then add the following to the App/Http/Kernel.php file:

'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class, ],

3. Install React Typescript

Next, we want to prepare React by first installing our npm packages:

$ npm install react react-dom @types/react @types/react-dom

then add Typescript by running:

$ npm install ts-loader typescript @babel/preset-react --dev

after that we want to create the tsconfig.json file and add the following:

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": false, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "baseUrl": ".", "paths": { "@/*": [ "resources/js/*" ] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules", "public" ] }

4. Install Client Side Inertia

Next we want to set up Inertia on the client side by adding it as a npm dependency like so:

$ npm install @inertiajs/inertia @inertiajs/inertia-react

then delete the file by running:

$ rm resources/js/bootstrap.js

and convert our app.js file to typescript by running

$ mv resources/js/app.js resources/js/app.tsx

then add the following code to your app.tsx

import React from 'react' import {render} from 'react-dom' import {createInertiaApp} from '@inertiajs/inertia-react' createInertiaApp({ resolve: name => require(`./Pages/${name}`), setup({el, App, props}) { render(<App {...props} />, el) }, })

5. Install Tailwind

Lastly, we want to install Tailwind by running the following commands:

$ npm install -D tailwindcss postcss autoprefixer

then initialize your config file like so:

$ npx tailwindcss init

then update your tailwind.config.js with the following code

module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.jsx", "./resources/**/*.tsx", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [], }

and then update your resources/css/app.css with the following code

@tailwind base; @tailwind components; @tailwind utilities;

and lastly update your webpack.mix.js with the following code

mix.ts('resources/js/app.tsx', 'public/js') .react() .postCss('resources/css/app.css', 'public/css', [ require('tailwindcss'), require('autoprefixer'), ]);

6. Test Our Code

Create a new file resources/js/Pages/Foo.tsx then add the following code:

import {FunctionComponent} from "react"; const Foo: FunctionComponent = () => { return ( <div className="h-screen bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 flex items-center justify-center"> <h1 className="text-white text-center text-6xl font-extrabold tracking-tight">LITTR Stack Works!</h1> </div> ) } export default Foo;