Docker + Laravel + React + TypeScript

Docker で React × TypeScript × Laravel の環境を構築する

流れ

laravel のリポジトリを clone する。main ブランチには node が入っていないので、 1.x ブランチから clone する。

git clone -b 1.x https://github.com/ucan-lab/docker-laravel.git
cd docker-laravel
make create-project

React 環境構築

make npm
docker-compose exec app composer require laravel/ui
docker-compose exec app php artisan ui react --auth

ビルド

make npm-install
make npm-dev

TypeScript インストール

cd backend
npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev
touch tsconfig.json
{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es2015",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "moduleResolution": "node",
        "target": "es6",
        "lib": ["es2016", "dom"],
        "allowSyntheticDefaultImports": true
    },
    "include": ["resources/ts/**/*"]
}

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="{{ mix('css/app.css') }}" />
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="{{ mix('/js/index.js') }}"></script>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

const App: React.FC = () => {
    return (
        <div>
            <p>こんにちは</p>
        </div>
    )
}

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

npm run watch