My Web App on Render keep showing Not Found after performing "GET"

Question

So I have finally deployed my full stack Java Spring Boot app (my backend server) and frontend on Render, with database runing on Railway.

Here is the link: https://shoppinglistapp-k7td.onrender.com/

My problem is the app runs fine on my local machine but after delpoyed, almost all the buttons that I clinck lead to a "Not Found" page. I have to go back, refresh, click the button again to see the content.

For example, after logging in, if you click logout, it should take you back to the login page but instead, it takes you to a "Not Found" page. You have to go back and refresh, otherwise the login page wont load.

I am only a recent graduate and I would love to get some help.

I have tried upgrading my free Render webservice to a paid plan as I thought it was because the server was responding too slow, but the problem remains.

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
  {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: {
        requiresAuth: false
      }
    },
    {
      path: "/logout",
      name: "logout",
      component: Logout,
      meta: {
        requiresAuth: false
      }
    }
 ]
})

Answer 1

I believe this is due to the configuration of the front-end server (nginx or Apache etc...) on which you have deployed your Vue app. That's the reason, it is working on your local & not working when you deploy it. You might need to configure your frontend deployed server configuration.

Please check this link out: Vue Router return 404 when revisit to the url

I can help you out more if you provide me with your deployed frontend server details.