I create a server with LAMP in local and I want to use Laravel
for the backend and Angular 7
for the frontend.
I put this to my web.php
file:
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
View::addExtension('html', 'php');
return view('index');
});
And I put all my Angular files inside the /public/
folder, except the index.html
which is inside the /resources/views
.
And the reason is that: If you go to the site.com/ Angular will be loaded. If you click a link and go to the site.com/page for example, angular will load this page. Until here everything works as expected.
But if you just type site.com/page to your browser’s address bar, you are actually sending a request to site.com/page. As it doesn’t exist, web server will return a 404 and angular application will not work. Angular even didn’t get a chance to be loaded.
I know that it is caused because I have no route to /page
inside de web.php
file, but my question is how to solve this routing problem?
Thanks.
2
Answers
Use a fallback route.
Make sure to put it at the end of your routes file, so that any existing routes (such as your API endpoints) match normally.
Another common solution before the fallback route was added was to create a wildcard route using regular expression matching:
Sure, I’m going to walk you through the steps of setting up Laravel & Angular project,
First you need to build your angular application using ng build and pass any flag like –prod to create in production mode or just use –ng build Don’t forget to change the folder where angular creates the final files, you can do it going to the angular.json and modify the outputPath”: “../server/public/client/”, like this.
sencond: you need to go to to the public folder which was recenlty created by Angular and copy or move the index.html file to the view folder of laravel and paste it.
third: you need to modify the script of angular pointing to the angular client folder in the public folder of laravel and that’s it.
like this
enter image description here
my angular folder in this case is client
there ya gooo
you can also do this modifying the ng -build command or using an automation build tool such us Gulp, Grunt, and Webpack.
I hope i can help you