I am using angular 6 project in a laravel backend. I build the project with --prod and -base-href = /public/angular/dist/ and everything is great. Now i load the index html file from public/angular/dist/index.html inside a laravel blade:
include base_path()./public/angular/dist/index.html';
The blade loads perfectly the static angular deployed html file but my only problem is that the url turn into
mydomain.com/public/angular/dist
I tried with htaccess to rewrite the url but I couldn't make it. Is there any way u can help me?
As I understand, the combination of Angular 2+ and Laravel are meant to be separated projects.
In the backend you make an api with Laravel and then you can consume it from any front end: angular, react, android, etc.
In the frontend you make a service that fetch the api urls in the backend and that url responses a json, it may be in example, a list of users.
it will works :
1. Build your angular app with following cmd :
ng build --prod --output-path pwa-app--base-href /pwa-app/
Copy paste angular project build to your laravel application
3.Go to resources > views . Create app.php and paste the following code
<?php readfile("./pwa-app/index.html"); ?>
4.Add the following route inside web.php
Route::any('/pwa-app/{any?}',function() { return view('app'); });
5.Try !!!
yourdomain/pwa-app
I hope this will works ...
Related
I have a very broad project, developed in codeigniter, I want to integrate Vue and I do not know how to do it.
Is it better to create a new project based on Vue and try to migrate things?
Modify my JS of my current project and replace it with Vue?
What do you recommend?
i have sucessfully use vue to replace codeigniter view layer, i use laravel mixin to compile vue SFC then include built file to the codeigniter view template
FrontEnd frameworks has nothing to do backend frameworks. They communicate via http-request responses.
You may use backend of your choice and render the content on the page.
However, if you want to integrate vue with existing project (which is already working), I recommend new project based on Vue and migrate back end code on need basis
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
Me and my co-worker both are freshers and I'm doing the front-end using VueJS and he is doing back-end using Laravel.
But How do we connect both back-end and front-end to deploy the final product?
We are struggling to put VueJS project files inside the laravel project files.
We don't have idea where to put main.js, where to put routers.js store.js App.vue inside the laravel
Install Vue Js inside Laravel Project using npm,Then in your resource/assets foleder you will see the app.js, vue component. Then compile it, laravel mix will place your app.js file inside public/js/app.js. Then include it in view file.
I asked this question when I start my career as a junior software engineer. Now I saw this again randomly. We had no idea how to connect back-end and the front-end. But eventually we learned we are developing a restAPI so we host back-end and front-end separately as two projects and connect them using the restAPI. Back-end and the front-end was two identical projects. =)
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.
how to combine Laravel and React? I mean, Laravel uses blade for its view, how to change it to React instead of blade ? There have been so many Laravel and Angular tutorial, but I can't find any for React and Laravel?
Any references of Laravel and ReactJS tutorial ?
If you are using Laravel to build a REST web service (API), then you might not need Blade. You just return JSON data. Your React App can then make calls to the Laravel API for data and process it right in the browser. You don't need Blade for this.
You would use Laravel to provide the base view (index.blade.php) which would include the React JS app, but then after that all the views and routing would be handled by React.
Here's a link to get you started.
https://medium.com/#rajikaimal/laravel-loves-reactjs-8c02f8b9d1d5
I have created laravel reactjs starter project .. refer the github project below.
I am not using the mix api of laravel since I want reactjs app to be portable to any other server or standalone app
refer the link below
https://medium.com/#padmanabhavn/bringing-laravel-and-reactjs-together-8c970cb0f65d
This question seems old but I will still share my experience for others.
This tutorial and project sample may be found useful.
https://blog.pusher.com/react-laravel-application/
https://github.com/maarcz/taskman
As well as that, the solution below has worked for me in webpack.mix.js without using app.js to be mixed up with other requirements (laravel 8):
mix.js('resources/assets/js/react', 'public/js/reactJs').react()
in blade:
<script src="{{ asset('js/reactJs/react.js') }}"></script>