React, Typescript with Laravel

Sometimes it is much more convenient to build a monolith up.
I will take you through how I setup my Laravel app with React with Typescript.

For this we will make a simple Laravel, React, Typescript App. We will call it. Laravel-Guava
Technology Stack:

PHP/Laravel

Inertia/Breeze

React/Typescript

I am using a windows with WSL, ubuntu for this. using a mac should be the same experience. 😉

Feel free to fork it make improvements as you like.

Technology: Make sure you have composer, typescript, node, docker installed. If not I'll add a few lines to make it work.

Step One: Install the latest version of Laravel and run it.

curl -s https://laravel.build/<name-of-your-app> | bash
./vendor/bin/sail up later composer-docker up is enough
npm install
npm run install

Initialize typescript in your project. this will create a ts config file. If that doesn't work, install typescript here[https://www.typescriptlang.org/download]

npx tsc --init

these are my configuration for my typescript

{

  "compilerOptions": {

    "target": "es5",

    "module": "es2020",

    "moduleResolution": "node",

    "baseUrl": "./",

    "strict": true,                 // Enable strict type-checking options

    "skipLibCheck": true,           // Skip type checking of declaration files

    "noImplicitAny": false          // Bypass raising errors on

any

type

  },

  "include": ["resources/js/**/*"]  // Frontend paths pattern

}

Install the dependencies
npm install ts-loader typescript --save-dev
composer require laravel/breeze --dev
php artisan breeze:install react

Configure Laravel Mix
Initial Laravel installation comes with a boilerplate JavaScript entry point, which needs to get converted into TypeScript. All you need is to rename .js to .ts.



-resources/js/app.js

+resources/js/app.tsx

configure webpack.config.js to resolve typescript extensions
`
const path = require('path');

module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
// Add .ts and .tsx as a resolvable extension.
extensions: [".ts", ".tsx", ".js"]
},
};
`

Then, let Mix know that it should handle the JavaScript code as TypeScript. Laravel Mix comes with built-in TypeScript support.

webpack.mix.js

-mix.js('resources/js/app.js', 'public/js')
+mix.ts('resources/js/app.ts', 'public/js')

That is it; you are all set! You can keep writing code the way you used to and utilize some TypeScript features and improve your front-end experience.

Run npm install for any additioal mix dependancies

npm run watch

link to repo: https://github.com/olivertembo/laravel-react-typescript-inertia-boilerplate