Deploying Laravel 7 and Vue SPA application into shared hosting

Question

Experts, My application has Vue front-end and Laravel 7 back-end. The issue was, I can't redirect to the login page and it shows me a blank screen. All the Vue files are residing in resource/js folder. There is no separate folder for front-end and back-end.

Network tab

console log

Folder structure:

root directory has quickpack folder
inside the public_html folder has the public files of my Laravel application

What I have done so far:

AppServiceProvider.php

public function boot()
{
    $this->app->bind('path.public', function() {
      return base_path().'/../public_html/netlinkler/quickpack';
    });
}

app.js

require('./bootstrap');
window.Vue = require('vue')
import store from './store'
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css'; 
Vue.use(ViewUI);
import common from './common';
Vue.mixin(common);

Vue.component('mainapp', require('./components/mainapp.vue').default)


const app = new Vue({
    el: '#hmp',
    router,
    store
});

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Delivery App</title>
        <link rel="stylesheet" href="{{asset('/css/all.css')}}">
    </head>
    <body>
       <div id="hmp">
         @if(Auth::guard('employee')->check())
           <mainapp :user="{{Auth::guard('employee')->user()}}"></mainapp>
         @else
           <mainapp :user="false"></mainapp>
         @endif
       </div>
    </body>

<script src="{{ mix('/js/app.js') }}"> </script>
</html>

EmployeeControler.php

public function index(Request $request){
        
               if(!Auth::guard('employee')->check() && $request->path() != 'login'){
                  return redirect('/login');
               }
        
               if(!Auth::guard('employee')->check() && $request->path() == 'login'){
                 return view('welcome');
               }
        
               return view('welcome');
}

web.php

Route::get('/', 'EmployeesController@index');
Auth::routes();

router.js

    const routes = [
    
        {
            path: '/home',
            component: home 
        },
        {
            path: '/login',
            component: login 
        }
    ]

export default new Router({
    mode: "history",
    baseurl: "/api/v1",
    base: 'deliverywebapp',
    routes
})

Anything in laravel.log? Could you also post the XHR request for the login POST? — lost.design
– lost.design, Commented Aug 11, 2020 at 15:34
What's in your console? There are 4 errors from what you can tell in the first screenshot. — lost.design
– lost.design, Commented Aug 11, 2020 at 15:40

Engr Ebuka Orioha · Accepted Answer · 2020-08-13 07:21:27Z

1

You need to add your application folder to your route path

Or you can add a base path

export default new Router({

mode: "history",
baseurl: "/api/v1",
base: 'deliverywebapp',

const routes = [

{
    path: '/home',
    component: home 
},
{
    path: '/login',
    component: login 
}

]

})

or

export default new Router({

mode: "history",
baseurl: "/api/v1",

const routes = [

{
    path: '/deliverywebapp/home',
    component: home 
},
{
    path: '/deliverywebapp/login',
    component: login 
}

]

})

edited Aug 13, 2020 at 7:21

answered Aug 13, 2020 at 7:10

Engr Ebuka Orioha

346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

asela daskon Over a year ago

I have set in AppServiceProvider.php the public folder path. Wasn't that enough?

Collectives™ on Stack Overflow

Deploying Laravel 7 and Vue SPA application into shared hosting

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related