React, Typescript with Laravel

olivertembo — Fri, 26 Nov 2021 10:38:13 +0000

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 onanytype }, "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

DEV Community: olivertembo

React, Typescript with Laravel