Laravel 9 + Inertia.js + React + TypeScript

Create New Project

$ composer create-project laravel/laravel demo "9.0.0"

Resources

Server Side

Follow Inertia official docs to setup server-side.

Client Side

$ npm install react react-dom @types/react @types/react-dom
$ npm i @inertiajs/inertia @inertiajs/inertia-react
$ npm i -D ts-loader typescript
$ npx tsc --init --jsx react
  • Modify resources/js/*.js to *.tsx
import './bootstrap';
import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';

InertiaProgress.init();

createInertiaApp({
resolve: (name) => import(`./Page/${name}`),
setup({ el, App, props }) {
render(<App {...props} />, el)
}
});
  • Modify webpack.mix.js
mix.ts('resources/js/app.tsx', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
])
.webpackConfig({
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]'
}
});
  • To support code split modify tsconfig.json
{
// ...
"module": "esnext",
"moduleResolution": "node",
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Data Types in JavaScript

[Tech Blog] State management in Angular: Part 2

https://youtu.be/-1-qAp4kSlc

Deploy your first Node.js CRUD Application on cPanel with Newsys Managed Service

Creating Animations in React Native just got easier!

Managing multiple environment configurations in React App

Managing multiple environment configurations in React App

Create a React application from scratch (Part 7): Setting up React and Best Practices

What the Hell are Feature Flags?

Good looking Asian man thinking

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
andyyou

andyyou

More from Medium

How to migrate Javascript web apps to Typescript

Receive and Parse a CSV file with NestJs — Part 1

Detecting user presence using Firebase firestore, real-time database, and cloud functions in a…

Middleware Authentication(JWT TOKEN) using hooks in CodeIgniter 3