Level 50
- Have you built the production bundles using
npm run build? - Check your browser's dev tools console for any error messages.
Sep 3, 2024
16
Level 1
Laravel Inertia React Js Blank Page in Production
Help! It works really fine in local but on the production I'm getting blank pages
app.jsx
import "../css/homepage.css";
import "../css/app.css";
import "./bootstrap";
// scroll bar
import "simplebar/dist/simplebar.css";
// lightbox
import "react-18-image-lightbox/style.css";
// editor
import "react-quill/dist/quill.snow.css";
// slick-carousel
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
// lazy image
// import 'react-lazy-load-image-component/src/effects/blur.css';
import { createRoot } from "react-dom/client";
import { createInertiaApp, router } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import SnackbarProvider from "./Components/snackbar/SnackbarProvider";
import ThemeProvider from "./theme";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
const appName = import.meta.env.VITE_APP_NAME || "AppName";
const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
router.on("before", (event) => {
event.detail.visit.headers["X-User-Timezone"] = userTimezoneName;
});
createInertiaApp({
title: (title) => `${appName} | ${title || "Home"}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob("./Pages/**/*.jsx")
),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(
<LocalizationProvider dateAdapter={AdapterDateFns}>
<ThemeProvider>
<SnackbarProvider>
<App {...props} />
</SnackbarProvider>
</ThemeProvider>
</LocalizationProvider>
);
},
progress: {
color: "#012970",
},
});
app blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
{{-- <link rel="preconnect" href="https://fonts.bunny.net"> --}}
{{-- <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> --}}
<link rel="icon" type="image/x-icon" href="{{ asset('/assets/logo/pinoycare.png') }}">
<!-- Google Fonts -->
{{-- <link href="https://fonts.gstatic.com" rel="preconnect"> --}}
<link
href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<style>
body { font-family: 'Nunito', sans-serif; }
</style>
<!-- Scripts -->
@routes
@viteReactRefresh
@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
@inertiaHead
</head>
<body class="antialiased" style="font-family: 'Nunito', sans-serif;">
@inertia
</body>
</html>
Level 1
@JussiMannisto yes sir I run the build command many times but still getting a blank pages
error getting status 500 in all pages and I compare the route lists local and production its the same
Level 50
@noirtempest The 500 status code means a server error. Check the backend logs (storage/logs/laravel.log by default).
Level 1
@JussiMannisto I checked it but there is no error being logged
Level 50
@noirtempest If there are no logs inside the Laravel storage, it might mean a couple of things.
The web server might not have write permissions to the log files. This could explain why your app isn't working to begin with. The web server is running as some user (e.g. www-data, nginx or apache) and it should own the files of your app. This way it can create session and cache files, write to the sqlite database file etc.
If you have shell access, your can modify the owner by running this command in the root of your project:
sudo chown yourWebServerUser:yourWebServerGroup -R .
Replace yourWebServerUser and yourWebServerGroup with the correct user and group.
Another possibility is that there's something wrong with your server configuration and Laravel fails to even boot up. Check the server logs. If it's your own server, they might be under /var/log/nginx, /var/log/apache2, /var/log/httpd or similar.
Level 1
@JussiMannisto my bad there is logs but there is no error that indicates about the issue
Level 50
@noirtempest Does the web server have write access to the log files?
There's no way that the server throws a 500 error without any logging. If it's not in laravel.log, then it's in the web server's logs.
Level 1
@JussiMannisto this is the error on the web server
[proxy_fcgi:error [pid xxxxxxx:tid xxxxxxx [client xxx.xx.xx.xxx:x Premature end of script headers: index.php, referer: https://unified.cloudways.com/
Level 1
@JussiMannisto the server have a permissions but base on the error logs :
[proxy_fcgi:error [pid xxxxxxx:tid xxxxxxx [client xxx.xx.xx.xxx:x Premature end of script headers: index.php, referer: https://unified.cloudways.com/
Level 50
@noirtempest Likely bad file permissions or bad server configuration. I don't know how you're hosting the app so I can't say more.
Level 1
@JussiMannisto, I’m not the one who hosted the applications, but after pushing my updates (without installing any new packages), I ran the build and got blank pages. Even after removing my updates, the error persisted.
Level 1
@JussiMannisto I checked permissions folders 775 and files 664
Level 50
I checked permissions folders 775 and files 664
But who owns the files? The app won't work if they belong to the wrong user. 0664 means that only the file owner and group members have write access. Run this command at the root of your project to see the user and group:
stat -c "%U %G" storage/
You should see the web server's username, e.g. www-data, nginx or apache. If you see your own username, that's the issue. Also everything inside storage must be owned by the web server user.
after pushing my updates (without installing any new packages), I ran the build and got blank pages
How did you push the updates?
Level 1
@JussiMannisto I just checked the web servers username is correct.... and to answer the question I push via desktop github then pull it from the server then run some commands
Level 29
Check if there's a hot file in your public folder and if so delete it.
Level 1
@gych I checked and there is no hot file and I use vite
Please or to participate in this conversation.