Last active
April 13, 2021 12:57
-
-
Save filhocodes/ae3b587ee8c868a04fbafe00d73f418b to your computer and use it in GitHub Desktop.
Inertia React + Laravel Setup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="{{ config('app.locale') }}"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>{{ config('app.name') }}</title> | |
| <link rel="stylesheet" href="{{ mix('styles.css', 'build') }}"> | |
| </head> | |
| <body> | |
| @inertia | |
| <div id="app-loading" class="loadscreen fade show"> | |
| <div class="loader-bubble loader-bubble-primary d-block"></div> | |
| </div> | |
| @routes | |
| <script src="{{ mix('main.js', 'build') }}"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { InertiaApp } from "@inertiajs/inertia-react" | |
| import { InertiaProgress } from "@inertiajs/progress" | |
| import React, { ReactNode } from "react" | |
| import { render } from "react-dom" | |
| import ExternalLayout from "./components/external-layout/ExternalLayout" | |
| import Layout from "./components/layout/Layout" | |
| const root = document.getElementById("app") | |
| if (root === null) { | |
| throw new Error( | |
| "Unable to find the element that will serve as shell for our Inertia App.", | |
| ) | |
| } | |
| if (typeof root.dataset.page === "undefined") { | |
| throw new Error("Unable to find the initial data for our Inertia App.") | |
| } | |
| InertiaProgress.init({ | |
| color: "#0000FF", | |
| includeCSS: true, | |
| }) | |
| render( | |
| <InertiaApp | |
| initialPage={JSON.parse(root.dataset.page)} | |
| resolveComponent={(path) => | |
| import( | |
| /* webpackChunkName: "[request]" */ `./views/${path}` | |
| ).then(({ default: page }) => { | |
| if (typeof page.layout === "undefined") { | |
| page.layout = path.startsWith("Auth/") | |
| ? (page: ReactNode) => <ExternalLayout children={page} /> | |
| : (page: ReactNode) => <Layout children={page} /> | |
| } | |
| return page | |
| }) | |
| } | |
| />, | |
| root, | |
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (Versions at the time this gist was created) | |
| Composer: | |
| "inertiajs/inertia-laravel": "^0.3.3", | |
| "intervention/image": "^2.5", | |
| NPM: | |
| "@babel/preset-react": "^7.12.1", | |
| "@babel/preset-typescript": "^7.12.1", | |
| "@inertiajs/inertia": "^0.8.2", | |
| "@inertiajs/inertia-react": "^0.5.0", | |
| "@inertiajs/progress": "^0.2.1", | |
| "@types/react": "^16.9.55", | |
| "@types/react-dom": "^16.9.9", | |
| "@types/ziggy-js": "^0.9.0", | |
| "@typescript-eslint/eslint-plugin": "^4.6.0", | |
| "@typescript-eslint/parser": "^4.6.0", | |
| "babel-eslint": "^10.1.0", | |
| "eslint": "^7.12.1", | |
| "eslint-config-prettier": "^6.15.0", | |
| "eslint-config-react-app": "^6.0.0", | |
| "eslint-plugin-flowtype": "^5.2.0", | |
| "eslint-plugin-import": "^2.22.1", | |
| "eslint-plugin-jsx-a11y": "^6.4.1", | |
| "eslint-plugin-react": "^7.21.5", | |
| "eslint-plugin-react-hooks": "^4.2.0", | |
| "eslint-webpack-plugin": "^2.1.0", | |
| "laravel-mix": "^5.0.7", | |
| "laravel-mix-react-typescript-extension": "^1.0.3", | |
| "postcss": "8.1", | |
| "react": "^17.0.1", | |
| "react-dev-utils": "^11.0.0", | |
| "react-dom": "^17.0.1", | |
| "resolve-url-loader": "^3.1.0", | |
| "sass": "^1.15.2", | |
| "sass-loader": "^8.0.0", | |
| "typescript": "^4.0.5", | |
| "use-media": "^1.4.0" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const ESLintPlugin = require("eslint-webpack-plugin") | |
| const mix = require("laravel-mix") | |
| const path = require("path") | |
| require("laravel-mix-react-typescript-extension") | |
| mix.setPublicPath("public/build/") | |
| mix.setResourceRoot("/build") | |
| mix.sourceMaps() | |
| mix.disableNotifications() | |
| mix.options({ | |
| cleanConsole: false, | |
| }) | |
| mix.override((config) => { | |
| config.entry = Object.fromEntries( | |
| Object.entries(config.entry) | |
| .map(([name, entries]) => [name.replace(/^[/\\]+/, ""), entries]) | |
| .sort(([a]) => (a === "mix" ? 1 : -1)) | |
| .values(), | |
| ) | |
| }) | |
| if (mix.inProduction()) { | |
| mix.version() | |
| } | |
| mix.webpackConfig({ | |
| output: { | |
| chunkFilename: mix.inProduction() | |
| ? "[name].js?id=[chunkhash]" | |
| : "[name].js", | |
| publicPath: "/build/", | |
| }, | |
| plugins: [ | |
| new ESLintPlugin({ | |
| context: path.join(__dirname, "inertia"), | |
| cwd: __dirname, | |
| extensions: ["ts", "tsx"], | |
| formatter: require.resolve("react-dev-utils/eslintFormatter"), | |
| baseConfig: { | |
| extends: [ | |
| require.resolve("eslint-config-react-app"), | |
| require.resolve("eslint-config-prettier"), | |
| ], | |
| }, | |
| }), | |
| ], | |
| }) | |
| mix.reactTypeScript("inertia/main.tsx", "public/build/main.js") | |
| mix.sass("inertia/assets/styles/app/styles.scss", "public/build/styles.css") |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment