How I can combining laravel and create-react-app kit?
I want to change the entry point from root/react/public/index.html, to root/resources/views/index.blade.php, how can I do this without using npm run eject?
Thank you!
I know it's a question from two years ago, but in case someone stumbles upon this in search for answers, it is now possible to use Create React App in Laravel: https://github.com/mjsarfatti/create-react-app-laravel/
You basically need to copy the contents from index.html to index.blade.php and make sure to update the app.js and app.css paths so they point to the correct paths
However, with this approach you will have issues using the full set of features that react offers when served via node.js (like react-router for example) so your best bet for any real like application would be to use react with node for frontend and then connect it to Laravel via a REST api to make backend calls
Related
Hi im not an advanced coder just a hobbyist with 1% javascript experience, only laravel and rubyrails.
I have build a admin dashboard with crud and everything in 100% laravel-8...
Now i want to replace all the crud tables i got with Vue.js.
Unfortunately i have found it to be quite confusing to understand. I see a lot of people be replacing there blade view with vue components and routes too. Can someone explain me the flow of the whole process of replacing and folder managing in vue?
If u know a good site that would be helpful too.
Please do not send orginal Vue documentation site, thank u.
I would suggest creating another project for the client side, for example, VueCli or NuxtJs. And use the Laravel project as a RestFull API that provides all the data needed in the client side.
That will provide you much more scalability, rather than having it all together in the Laravel project.
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.
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 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.