Getting Started with the Laravel L.I.T.T.R Stack 
Tags: laravel, tailwindcss, react, typescript
Published: 2022-01-18 14:03:27

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:

```html
<!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:

```php
'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:

```json
{
    "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`

```jsx
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

```jsx
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

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

```jsx
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:

```jsx
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;
```

Then update `routes/web.php` to include the following:

```php
Route::inertia('foo', 'Foo');
```

Then compile our client side code by running:

`$ npm run dev`

After that we can start our server by running:

`$ php artisan serve`

and then visit [http://127.0.0.1/foo](http://127.0.0.1/foo)

FYI, the page should look like this:
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52yeb2cjhuwzdbb18i61.png)