I have an application with Vue and laravel5.6 which is working fine on my virtual machine setup.
What is the way to host it on live shared hosting server.
I got 500 internal server error while accessing it from URL,as there is no routes defined as GET.
Note:The index is coming from the Vue project. Laravel is only API
Like #Gaurave Dave had suggested in the comment section,
you can insert a code in your web.php for all request to go to a view. An example is given below.
Route::get('/{any}', function(){
return view('index');
})->where('any', '.*');
so inside your index.blade.php, you can insert your Vue script code or component, this will serve as landing for your Vue app.
Related
I need to make laravel redirect to an Angular route.
I'm deploying my first project using Angular7 for front & laravel 5.8 for the API and it works fine in development. However when I build the Angular project and locate it in the public directory of laravel so that I can access it by http://127.0.0.1:8000/<my project name> angular route doesn't work if I request a specific link like http://127.0.0.1:8000/<my project name>/view/data/45. In this case laravel returns 404 response since this is Angular's route not laravel.
fixed it by adding a new route to Laravel routes which redirect whatever it got to the index page of Angular and added the <router-outlet></router-outlet> to my index.html page
Any help would be really appropriated on how to achieve this.
I have currently three separate applications, two front-ends running with vue.js and one backend app, with laravel tenancy, only serving API's, no front-end.
The main base URL or the backend url is set to example.com, this is the tenancy application. It auto-generate URL subdomain.example.com for tenants & databases, as the tenancy package works.
Another domain setup for secure.example.com that points to the another vue application, where we register. Works perfectly well.
Now I have a third application on vue.js, for the tenant's, that points to anything to *.example.com,
and the way the tenancy works, is that wildcards & directory must be set to the main application where tenancy is installed, for the tenancy to work with subdomains.
I cannot create *.example.com & point it to the vue application, as the API calls, then go to vue application not to the back-end, as the sub-domain *.example points to vue application
The whole point is to separate the Tenant UI entirely using a frontend framework like vue.js from the back-end.
Im using Quasar separated from the Laravel Api, with the Hyn Multitenant package..
brightmind-erp.com
demo.brightmind-erp.com
In public/panel from Laravel public folder I'm inserting the dist assets from Quasar, and redirecting '/' calls to that route where Vue Router enters in action:
Route::get('/', function() {
return redirect()->route('frontend');
});
// Route everything else to Vue
Route::get('panel/{any?}', function () {
return file_get_contents(public_path().'/panel/index.html');
})->where('any', '.*')->name('frontend');
If you're using Webpack you have to configure it to find the Vue assets from (in this case) '/panel' folder....
I fought with a lot of tutorials to configure .htaccess file or nginx config to make the api work in '/api' route and vue in '/' but I couldn't
I have a problem with defining routes for frontend portion of the application. It is Vue.js with Vue Router. Since it is SPA I think defining all routes in Laravel is not the correct answer but it seems I need to somehow because content is not served with current setup. Does Vue Router fetch the entire page and load it with each link? That would mean setting up a route for each link to load in Laravel routes. I think this is not intention of SPA decide.
So with route like
<route-link :to="{name: 'faq'}">FAQ</route-link>
Does this mean I must make a route
Route::get('faq', 'FaqController#index')->name('faq');
This is new architecture that is not well understand with me now. Thank you.
Generally, SPA setup will fallback to "index.html" when no matched route
In routes/web.php:
Route::get('{path}', function () {
return view('index');
})->where('path', '(.*)');
and vue-router will handle the rest
full setup: https://github.com/cretueusebiu/laravel-vue-spa/blob/master/routes/web.php
I would require a little help here if this method will work out well.
Firstly, I have a backend API server created using Laravel and Laravel Passport. Secondly, I have also created the frontend with Vuejs within the same project. As such, I will be required to use both the api.php and web.php routes. I am also redirecting these routes using vue-router.
Backend
Inside the web.php routes, I have used two different routes because I want to display generic contents on my landing site and the other as an authentication required dashboard.
Example:
web.php
As above, this is to capture the routes which are 404 Not Found that are directly manipulated in the address bar to redirect correctly to their respective pages. I also ended up having two different blade templates named as dashboard.blade.php and home.blade.php respectively. Is this an okay practice for a Laravel-Vuejs project? Or are there ways that you would like to recommend?
dashboard.blade.php
home.blade.php
Login related problem with login page using the layout of the landing page into another layout of the dashboard page
The problem that I am faced with when doing an API login with the password grant is that the login page does not redirect to the dashboard page properly. The URL route does change but the page is rendered as blank.
The login using axios here:
I have managed to fix the problem.
In web.php, since we have
Route::get('/dashboard/{any?}', function () {
return view('dashboard');
})->where('any', '^(?!.*api).*$[\/\w\.-]*');
Inside of my Login.vue redirect handler, I use location.href = '/dashboard' instead of this.$router.push('dashboard').
vue app is inside : C:\xampp\htdocs\booking
Laravel api is inside : C:\xampp\htdocs\booking-api
FYI : vue app is working on http://localhost:8080
If the folder structure is like above, then app works fine i can call the api like this,
axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);
But I want booking-api folder inside booking folder. If I place it and if I call the api like below,
axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);
It wont work and the console window is like this,
Request URL:http://localhost:8080/booking-api/public/Rooms
Request Method:GET
Status Code:404 Not Found
So, how can I place api project inside vue app and how to call the api from vue.
Okay i guess you used vue.js webpack build in your project.
Steps.
serve your vue.js projet using npm run dev
for npm run dev the default server for vue would be localhost:8080
Now your api-part
It doesn't matter where you put it. Install laravel using follow normal procedures;serve it using php artisan serve.
it will run normally on 127.0.0.1 or localhost:8000.
Lets assume: a script on a sample component axios.post('localhost:8000/api/postData',data).then((response) =>
{//do something here}
While posting here you should take care of the Cross Origin Resource Sharing, or may be csrf issues if you remove the existing component.