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
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
I have a Laravel project, which should contain different Vue apps.
Some of these apps are quite-complex (stand-alone app.js file with its own components).
How can Laravel manage different vue apps, each one with its own app.js file and components?
One approach to solve this problem is to write vue apps as SEPARATE projects (using only frontend technologies) which connect with laravel using RESTful API.
This is in fact simple micro-services architecture (which include the hard separation between frontend and backend code). If you decide to do it, you will face CORS problem (but don't worry - you will find many solutions on internet e.g. this) because the vue app will be on different domain/subdomain that your RESTful laravel API.
Laravel support create restful API controllers - cmd:
php artisan make:controller API/MovieController --api --model=Movie
routing routes/api.php:
Route::group(['prefix'=>'v1'], function() {
Route::apiResource('movies', 'API\MovieController');
...
});
It is good to use for api authentication Laravel Passport (oauth2)
You should also build your separate vue applications using some modern frontend technologies like webpack, nmp (here is some example but you will probably find better)... long story - but this is good direction :)
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.
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 want to create some project and use there Laravel as API and Angular 4 to represent my site.
Since I have no money for experiments, I found hostinger.co.uk where I can set up php framework and do that I need.
I started configuring Laravel and get confused - where to place my site on angular? I'll have the only one site address. So I'd like to make it combined, because I need Laravel the only for working with DB.
Best practice would be to keep api & frontend seperate.
If you insist on using single domain, such as example.com you can use subdomain api.example.com for API, and main domain for presenting your site.
On a shared hosting you can place folders something like these:
/api -- laravel installation(with subdomain api.example.com)
<angular build files>
index.php
script.bundle.js
style.bundle.js
etc.
......
.....
.....
.....
For development you can keep your angular files anywhere on your local system, and upload only build distribution to the main domain.