- configure compile React assets
yarn add adonis-mix-asset && yarn add -D laravel-mix laravel-mix-tailwind;
- setup provider, commands, webpack.mix.js for adonis
node ace invoke adonis-mix-asset;
- install package for hot loading,
yarn add -D @babel/preset-react babel-loader @pmmmwh/react-refresh-webpack-plugin react-refresh;
- config webpack.mix.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const webpack = require('webpack')
const mix = require('laravel-mix')
require('laravel-mix-tailwind')
const isDevelopment = process.env.NODE_ENV !== 'production'
mix
.setPublicPath('public')
.js('resources/client/index.js', 'public/js/')
.react()
.sass('resources/assets/scss/index.scss', 'public/css/')
.tailwind()
.options({
processCssUrls: false
})
if (isDevelopment) {
mix.sourceMaps()
}
mix.webpackConfig({
mode: isDevelopment ? 'development' : 'production',
context: __dirname,
node: {
__filename: true,
__dirname: true,
},
module: {
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: ['@babel/preset-react'],
plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
},
},
],
},
],
},
plugins: [
isDevelopment && new webpack.HotModuleReplacementPlugin(),
isDevelopment && new ReactRefreshWebpackPlugin(),
new webpack.ProvidePlugin({
React: 'react',
}),
].filter(Boolean),
})
- add .gitignore
# other settings...
mix-manifest.json
hot
public/js/*
public/css/*
public/**/*_js*
- Configure Tailwind
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 sass-loader@8.* sass postcss@^8.1;
mkdir -p resources/assets/scss && touch resources/assets/scss/index.scss;
npx tailwindcss init
tailwind.config.js
module.exports = {
purge: ['./resources/client/**/*.{js,jsx,ts,tsx}', './resources/views/**/*.edge'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
resources/assets/scss/index.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
- Create Client React App
yarn add react react-dom;
mkdir -p resources/client && touch resources/client/index.js resources/client/App.js;
resources/client/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
resources/client/App.js
import React from 'react'
export default function App() {
return (
<div>
Hello World!
</div>
)
}
using index.js in resources/views/index.edge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/index.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/js/index.js"></script>
</body>
</html>
package.json
"start": "node build/server.js",
"server": "node ace serve --watch",
"client": "node ace mix:watch",
"build": "yarn client:build && yarn server:build",
"server:build": "node ace build --production",
"client:build": "node ace mix:build --production",
"dev": "concurrently \"yarn server\" \"yarn client\"",
=> watch client: yarn client
Reference: guide
Thank you.
No comments:
Post a Comment