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;