UPGRADE LARAVEL 9.45 AND VITE

pull/11/head
ajikamaludin 1 year ago
parent fc8ef03d8e
commit 7ccafd4bc2
Signed by: ajikamaludin
GPG Key ID: 476C9A2B4B794EBB

@ -48,5 +48,5 @@ PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

@ -17,7 +17,6 @@ database use sqlite
```bash
$ cp .env.example .env
$ touch database/database.sqlite # if you use .env.example with default sqlite database
$ composer install
$ php artisan migrate
$ php artisan serve

@ -8,7 +8,7 @@
"php": "^7.3|^8.0",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"inertiajs/inertia-laravel": "^0.5.4",
"inertiajs/inertia-laravel": "^0.6.4",
"laravel/framework": "^9.0",
"laravel/sanctum": "^2.6",
"laravel/telescope": "^4.6",

2212
composer.lock generated

File diff suppressed because it is too large Load Diff

Binary file not shown.

20659
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,13 +1,8 @@
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@babel/preset-react": "^7.13.13",
@ -16,15 +11,17 @@
"@inertiajs/inertia-react": "^0.8.0",
"@inertiajs/progress": "^0.2.7",
"@tailwindcss/forms": "^0.3.2",
"@vitejs/plugin-react": "^3.0.0",
"autoprefixer": "^10.2.4",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-vite-plugin": "^0.7.3",
"lodash": "^4.17.19",
"postcss": "^8.2.13",
"postcss-import": "^14.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^2.1.2"
"tailwindcss": "^2.1.2",
"vite": "^4.0.3"
},
"dependencies": {
"classnames": "^2.3.1",

6
postcss.config.js vendored

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

File diff suppressed because one or more lines are too long

@ -1,5 +1,5 @@
{
"/app.js": "/app.js?id=d3ff915bff3de87b87cc",
"/app-dark.css": "/app-dark.css?id=3ae28ef5f7b987d68dc6",
"/app.css": "/app.css?id=7c970f699ed9cf60d80b"
"/app.js": "/app.js?id=08317cb3c83c7035246fe3d474db3454",
"/app-dark.css": "/app-dark.css?id=3ae28ef5f7b987d68dc611118c646308",
"/app.css": "/app.css?id=7c970f699ed9cf60d80b273b4ad2ad61"
}

@ -147,7 +147,6 @@ export default function Category(props) {
<span className="label-text">Amount</span>
</label>
<NumberFormat
thousandSeparator={true}
className={`input input-bordered ${
errors.amount ? 'input-error' : ''
}`}

@ -406,7 +406,6 @@ export default function Transaction(props) {
<span className="label-text">Amount</span>
</label>
<NumberFormat
thousandSeparator={true}
className={`input input-bordered ${
errors.amount ? 'input-error' : ''
}`}

@ -1,19 +0,0 @@
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';
import 'react-toastify/dist/ReactToastify.css';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}`),
setup({ el, App, props }) {
return render(<App {...props} />, el);
},
});
InertiaProgress.init({ color: '#570df8' });

@ -0,0 +1,22 @@
import "./bootstrap"
import "../css/app.css"
import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import "react-toastify/dist/ReactToastify.css";
const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
return render(<App {...props} />, el);
},
});
InertiaProgress.init({ color: "#570df8" });

@ -1,4 +1,5 @@
window._ = require('lodash');
import _ from "lodash";
window._ = _;
/**
* We'll load the axios HTTP library which allows us to easily issue requests
@ -6,9 +7,10 @@ window._ = require('lodash');
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
import axios from "axios";
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
/**
* Echo exposes an expressive API for subscribing to channels and listening
@ -18,11 +20,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// import Pusher from 'pusher-js';
// window.Pusher = Pusher;
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// key: import.meta.env.VITE_PUSHER_APP_KEY,
// wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
// enabledTransports: ['ws', 'wss'],
// });

@ -10,12 +10,10 @@
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
@routes
<script src="{{ mix('js/app.js') }}" defer></script>
@viteReactRefresh
@vite('resources/js/app.jsx')
</head>
<body class="font-sans antialiased">
@inertia

@ -6,7 +6,7 @@ module.exports = {
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.js',
'./resources/js/**/*.jsx',
],
theme: {

15
vite.config.js vendored

@ -0,0 +1,15 @@
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel(["resources/css/app.css", "resources/js/app.jsx"]),
react(),
],
resolve: {
alias: {
"@": "/resources/js",
},
},
});

27
webpack.mix.js vendored

@ -1,27 +0,0 @@
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.react()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'))
.disableSuccessNotifications();
if (mix.inProduction()) {
mix.version();
}
Loading…
Cancel
Save