1).
i want to know why people use two servers to make a vuejs SPA with laravel. I think we can use the other way. Make a Route like this
Route::get('{any}', function () {
return view('index');
})->where('any' , ".*");
and let vue handle the page url..
why people are using 2 servers and then using laravel passport to authenticate when we dont need to do all this to make spa..
2).
Okay now suppose we have our spa readdy using 2 separate servers one for vue and one for laravel.
Now i don't know how to set two servers on a single remove server.?
how should i upload both vue and laravel applications on a single server on internet and make them work together.
I think this is a bit of religion of some sort, but there is no right or wrong answer. Both have benefits and disadvantages.
A few of the benefits I can think of on top of my head is:
Reusability. You've made an API now everyone and everything can use this API, wanna make an IOS app to your web application as well? Well, go right on you have a 100% functional and tested API already.
Expertise: It's easy for your team to split up and work on what they know.
Deployment: Frontend and backend can be deployed, and tested, separately which can give you a big amount of freedom.
So basically how you could set this up very fast. is install a laravel/lumen application where you have the API serve with your preferred choice homestead, nginx, artisan serve etc.
then take a new vuejs/ReactJS etc. server and set it up. then all your API calls referer to the localhost your Laravel application is running on.
Related
I am new with OctoberCMS. There are few tutorials in the internet. May I ask what is the best setup may I use or possible setup may I use with this web tech stacks?
We have a project and the requirement is we need to use octobercms so that's why we have to used this octobercms.
Possible Setup:
Micro Service Setup?
Two seperate folder for OctoberCMS and Vue.js. The communication would be an API Request calls.
Then for the deployment part for the production, we will use the dist folder from Vue.js Folder. I'm not 100% sure but I think this will be my initial thought that will be possible.
May I ask for any suggestions or clarifications on what will I use project setup. Thank you.
While it would be entirely possible to have two separate web properties with October providing the API, you can also just use Vue within an October CMS theme itself. See https://github.com/scottbedard/vuetober for more information on doing that.
If your project is more of a traditional CMS requirement then I would recommend at least trying the Vuetober approach. If it's a lot more complex and is mostly utilizing October for its powerful backend features, then the API-only approach could work fine too.
The main reason you'd want to go with running vuetober is if you were going to be utilizing the AJAX framework provided by October. You can still technically use it even when October is being run as a headless CMS just providing an API, but it gets more complicated with CORS and some other stuff you have to setup to make sure it works properly.
I'm starting a new large-scale application and after hearing a lot about VueJS + Laravel combination i thought of using it. I followed Laracasts' Learn Vue 2: Step By Step series and some tutorials to understand how it works.
But have few questions in mind:
Why do we even need to use Vue with Laravel. I understand that we can create component like <user-profile></user-profile> in Vue, and then use it in Laravel Blade. But it looks like over-complication things? Firstly we pass data from controller to blade, and then further pass it to vue. Why do we need to do that?
Laravel and Vue both have their own routing system. Which one to use?
How to structure an app using Laravel + Vue
PS. I'm making an application that will mostly be used on mobile devices.
moved from comment
Why do we even need to use Vue with Laravel.
Although you probably already knew, Vue is just one of many javascript frontend frameworks (libs?) You can consume the data send from the server any way you want. Vue is just the sister-framework of Laravel. The only thing you can probably say as to why they are mentioned together is that you can "talk" (interface) easily between them using json objects. Javascript is meant to make your page interactive, have behaviour. Use it when you need this.
Laravel and Vue both have their own routing system. Which one to use?
Whatever you want, do you want a "single page" (blade) that is rendered in 3 different pages by Vue, say like some kind of Wizard form. It really depends on where you want to put the load. I think you can think of use-cases where client side page rendering would be better, but most of the time server sided will be a great choice.
Single page applications are more snappy (faster) after initial load, but server side rendered applications are better for SEO in general. There are also ways to let a SPA render on the server to improve SEO however. And this we we can keep the discussion going for some while.
How to structure an app using Laravel + Vue
Laravel has already an example vue file under resources/assets/js/app.js. So it is safe to assume you can put everything there.
I have a Laravel application which is using Blade as the frontend. I'm feeling the better (more future proof) option would be to switch to Angular, Vue or React, (not entirely sure yet which one I will use but that's not the question of this post)
I've always thought that the backend code should expose an API in order for these JS frontend frameworks to work. I currently don't expose any sort of API.
I basically designed it in the normal way:
define route pointing to controller
create controller function and direct it to a view
create the Blade view
Couple of questions:
Should I redesign my backend to expose such an API?
Can I call Angular/Vue/React code from my controllers, similar to what I'm
doing with Blade?
In case the answer is yes to question 1,
shouldn't I consider changing to Lumen then?
using frontend framework means you would most likely build you backend as an API,
a common scenario is:
a single route the points to a controller which loads the angular/vue app
the angular/vue app would handle views and templates.
once the app is loaded you only need to communicate with the server through the exposed api's
you can't call you js code from laravel controller and you probably won't need to.
as for your question lumen vs laravel, I think it's up to you to decide that. both have pro's con's.
I would like to build an application using Laravel as backend and Yeoman to build and manage my frontend. I know quite a few of these technologies.
I did not found a lot of worflows that would explain how to communicate between separate Laravel app and yeoman app (on different servers e.g). Maybe CORS is a good option.
Is anyone ever try to separate backend and frontend (with these technologies)?
Yeoman is not a front end framework - rather an application scaffold for generating a starting point for your front end.
Angular JS is my preferred option when using Laravel as a backend. You can use Yeoman to set up an Angular front end using this:
https://github.com/yeoman/generator-angular
An excellent tutorial series that helped me a lot when setting AngularJS up to talk to Laravel is here:
https://github.com/davemo/end-to-end-with-angularjs
Included is quite an extensive explanation on AngularJS security.
The Laravel backend should be setup as an API in the first instance to accept requests, heres a starting point to setup a basic API in Laravel from Laracon 2013
https://github.com/akuzemchak/laracon-todo-api
Laracasts also has a great series for building API's:
https://laracasts.com/series/incremental-api-development
Laracasts is a paid subscription service but would fully recommend it to Laravel beginners/intermediates
I know it's a long time ago since the question was asked, but perhaps it helps someone on it's way..
I would start with this package:
https://github.com/jadjoubran/laravel5-angular-material-starter
Overview: http://www.laravel-angular.io/#/
which gives you:
Laravel 5.1
Angular
Angular Material
and much other stuff, preconfigurated, out of the box..
In short:
CORS is a bad option.
Issue all the requests to the frontend server and make it forward backend-specific requests to the backend server.
In production have all the stuff served exclusively by backend server.
Here's how to achieve that for Java-based frameworks and also for Django: https://stackoverflow.com/a/20680962/1432478
Should look similar for your framework & build system.
im trying to create a Single Page Website with DurandalJS in the frontend and Laravel as the Backend. Do you think this is a good Idea?
If yes how would I do the following:
What would your recommendation for the basic interaction between both frameworks be?
Would you rather have all the computation done in JS instead of Laravel sending calculated and styled returns?
How Do I setup Laravels controller in order to only get dynamic Data for, say a Div, instead of a whole page?
How can I adjust the browser URLs?
I hope I was specific enough, thank You in advance.
Laravel does not actually care about what framework you use to build the Frontend. Laravel is just a framework that helps you build your application with. It gives you great advantage with respect to the time spent and effort.
You can use any frontend framework that you want to build your app with. I have actually not used Durandal, but from the first look of it here is my opinion.
Durandal is built on top of jQuery, knockoutJS and requireJS. It also has a MV* architecture in place with support for eventing as well. So you could basically define routes on Laravel and initiate the communication between both the frameworks through events and ajax. Again this completely depends on the functionality that you are building.
In the overall flow of your app, consider Laravel as a Model that just gives data from a source to your app and Durandal as your views and controllers. This way, it will keep your data flow cleaner and easier to build. Computation of your functionality depends on how important and secretive the app is. If there are functionalities/implementations that you need to be secretive about, you can keep it on Laravel and just send computed data to Durandal. If its a web app that you are building, then keeping all implementation on the JS is just a right click away from knowing what and how you have built it. One can just see how the implementation is done just looking at the Javascript source of the web app. If you are building Mobile Device App, then the case is different.
Take a look at Restful Controllers. Will give you an idea on how to setup controllers to return only data. But if you need to return the div itself, then you can make use of the Basic Controllers of Laravel to perform them.
You can setup cleaner routes for the browser URL's. Take a look at Laravel Routing