55
loading...
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.
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:
Technology Stack:
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 enoughnpm installnpm run installInitialize 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 --initthese 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');
`
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
// Add
extensions: [".ts", ".tsx", ".js"]
},
};
`
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')
+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
55