Vite showing default page

@Sneed Its propably because in your ENV file localhost is set as APP_URL if you update it to http://localhost:8000 it will show that URL instead.

Visit your application on this URL http://localhost:8000 after running npm run dev & php artisan serve

@gych After updating the ENV file the URL redirects me to the default Laravel page. If I change the port in the ENV file to something like 8001 for example I get the error page couldn't be loaded from the browser.

@Sneed It won't work on port 8001 because 8000 is the default port when running php artisan serve

You mentioned that you've already built the application. How did you work on it before if you can't view your changes in the browser?

Are you using Laravel with Blade or with Livewire or Inertia?

@gych Probably wasn't a smart idea, but I was on a tight schedule So I was just blindly following the tutorial. As for the second part of the question I don't believe I was using either of those. I am not sure if Vite/Vue fall in the same category as the things you listed above, but that's what I was using.

@Sneed Its always better to test things while you're following tutorials. It could be that several things now will not work as expected and it will take more time to debug and fix it compared to when you would have tested the application while following the tutorial.

@gych Do you think the issue could be caused by the fact that when I run php artisan serve it just says " INFO Server running on [URL]." while on the tutorial the terminal reads "Starting development server:" and "PHP development server (URL) started", or is that just due to different versions?

@Sneed No its not caused by that but propably a route that's not rendering the right view.

Which Laravel version is used in the Tutorial and which version do you use?

@gych The version I'm using is Laravel v9.52.16 (PHP v8.0.30) , while the one used in the tutorial is v8.76.2 (PHP v 7.4.12).

@Sneed Ok might be some differences between those but I don't think that this is the cause of the issue you're having. Check the routes you have created and test if they work as expected.

@gych By cloning the GitHub Source code for the tutorial I got the app running (through the source code), so the issue is probably caused by either my code or different versions.

@Sneed This issue is propably caused by a mistake in your code

@gych I tried going from the beginning of the video and the issue still persists. Maybe I installed it incorrectly or just missed something.

@Sneed Can you share your routes file

@gych This?:import { createRouter, createWebHistory } from "vue-router"; import Dashboard from "../views/Dashboard.vue"; import Surveys from "../views/Surveys.vue"; import SurveyView from "../views/SurveyView.vue"; import Login from "../views/Login.vue"; import Register from "../views/Register.vue"; import NotFound from "../views/NotFound.vue"; import SurveyPublicView from "../views/SurveyPublicView.vue"; import DefaultLayout from "../components/DefaultLayout.vue"; import AuthLayout from "../components/AuthLayout.vue"; import store from "../store";

const routes = [ { path: "/", redirect: "/dashboard", component: DefaultLayout, meta: { requiresAuth: true }, children: [ { path: "/dashboard", name: "Dashboard", component: Dashboard }, { path: "/surveys", name: "Surveys", component: Surveys }, { path: "/surveys/create", name: "SurveyCreate", component: SurveyView }, { path: "/surveys/:id", name: "SurveyView", component: SurveyView }, ], }, { path: "/view/survey/:slug", name: 'SurveyPublicView', component: SurveyPublicView }, { path: "/auth", redirect: "/login", name: "Auth", component: AuthLayout, meta: {isGuest: true}, children: [ { path: "/login", name: "Login", component: Login, }, { path: "/register", name: "Register", component: Register, }, ], }, { path: '/404', name: 'NotFound', component: NotFound } ];

const router = createRouter({ history: createWebHistory(), routes, });

router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !store.state.user.token) { next({ name: "Login" }); } else if (store.state.user.token && to.meta.isGuest) { next({ name: "Dashboard" }); } else { next(); } });

export default router;

@Sneed I run into the same problem. Issue is, "npm run dev" runs the vite server on port 5173 which serves the default page of the laravel-vite-plugin page. Whereby "php artisan serve" runs on port 8000 by default and serve the laravel welcome blade page. Now i would want the vite server to serve my blade stuff or in case i have vue components, the vue components. Starting point for me was, that i wanted the hot reload feature of Vite. But it does not work. With "npm run dev" no changes are detected, but with "npm run build". Well i guess i dont understand a concept here...so you have a vite server and artisan server not playing together....

@Sneed Did you run php artisan serve ? Which URL are you using when you see this msg? Propably not localhost:8000

@gych localhost:3000. I ran both npm run dev and serve.

@Sneed I see that you're not using Laravel router, are you using Vue as separata SPA or with Inertia ? Can you send me the link of the tutorial's GIT repo

@gych It's not allowing me to post links, but it's called thecodeholic /laravel-vue-survey.

@Sneed Are you running npm run dev inside the vue folder ?

@gych Yes