DEV Community

Cover image for Getting Started with the Laravel L.I.T.T.R Stack
Solomon Antoine
Solomon Antoine

Posted on

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

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>

Enter fullscreen mode Exit fullscreen mode

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,
],

Enter fullscreen mode Exit fullscreen mode

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"
    ]
}

Enter fullscreen mode Exit fullscreen mode

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)
    },
})

Enter fullscreen mode Exit fullscreen mode

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: [],
}

Enter fullscreen mode Exit fullscreen mode

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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'),
    ]);

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Route::inertia('foo', 'Foo');
Enter fullscreen mode Exit fullscreen mode

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

FYI, the page should look like this:
Screenshot

Discussion (1)

Collapse
crearesite profile image
WebsiteMarket

Nice ...