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.

Cross-Browser Crazy

Using ngx-bootstrap on Stackblitz with Angular 8

Your dad told you all methods must defined via prototype, but you use class property?

React and React native Fetch Template

Creating a production Build in React

Build mobile and web apps using AngularJS Development Services

A small change with big consequences or why did I start open-source.

After the successful PRESALE GIVE AWAY!!!! The $MILKY Snapshot data is IN 🕹️🪐

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

Dev IRL : How to add React components to an Express powered website using Create React App…

Best way of making HTTP Request in React.js

Patreon_clone with React

Setting up TailwindCSS in React App project.