I want to add next.js framework to Laravel
In preset we have
[php artisan preset react]
But I'm not sure how to do with next.js
How can I add next.js to laravel clean and correct as adding React with preset?
Adding a strong and sophisticated framework such as Next.js to laravel, would be very long long way to code and debug, and IMHO wouldn't be the optimal or feasible solution, specially if we came to SSR
Instead, you can use it as if you are making an SPA in react, which use Laravel as api or use Lumen; and then pass the data to Next.js through ajax, while using Next router.
To do this, there is a routing gotcha you need to make sure you don't fall in its trap, which is server routing and Next routing; you just pass this to Laravel route/web.php
Route::fallback(function () {
return view('your-react-page');
});
passing this will make sure that all routes are falling back to this page, if you want any other links to be served by Laravel, just make sure to add them before the fallback.
or if you want to specify a route, you can always use regex.
Related
I'm developing a personal project using Laravel with Inertia.js. I tried retrieving data from back-end to front-end through HandleInertiaRequests Middleware. I was wondering how will malicious people could get advantage of the data I show up in front-end. Inertia.js webpage discourages retrieving sensible data in this way, but I can't figure out how that will be possible. I apologize if my answer sound a little naive, still pretty new to Laravel ad never used Inertia before. Thanks for your time!
The HandleInertiaRequests Middleware is nothing but a way to merge data into the array that will be available to your JavaScript components (Vue, React, Svelte) on the client side.
It is just a way to avoid repeating yourself on every controller for things that you'll probably need on a lot of pages. For example, instead of getting the data for a Menu component on every controller, you do this only in the HandleInertiaRequests Middleware.
So, they only warn you to be careful with what type of data you put into it. For example, you probably don't want to pass the user password through this in the same way you wouldn't do that using a Blade view instead of Inertia.
I have a question about the use of the Laravel API.
I have a simple application where logged in users can post messages with VueJS and the Laravel API.
What is the best practice to do it?
Use the web.php router with a standard controller, example:
Route::get('/posts', 'PostController#index')->middleware('auth');
The api.php router where I insert the user token with every VueJS request, eg.
Route::get('/posts', 'PostController#index')->middleware('auth:api');
In my opinion, the use of the api.php router is only a good solution for external use (if another application wants to use my application).
Is that correct?
Yes, the api.php routes are meant to be used for any other front end that is not built in the same folder where that laravel instance is (even though there is nothing wrong using the api.php like that also)
So if you are using the views you have built in resources/views/ or as vue components inside the same app then use web.php for routes, and for "external front end" use api.php.
True. From my experience api.php is really best place in Laravel to write api end points to be consumed from external apps like android app or even for AJAX calls from within the same Laravel App using external js frameworks such as jquery, vue etc.
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.
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.