Tutorial: Build a Basic CRUD App with Laravel and Angular

Tutorial: Build a Basic CRUD App with Laravel and Angular

This tutorial teaches you how to build a simple CRUD application with a Laravel backend API and an Angular frontend.

Ani Munachimso

Should the angular app be installed inside the Laravel application?

Krasimir Hristozov

No, if you look at the GitHub repository (https://github.com/oktadeve… ), you will see that the Laravel and Angular applications are separated. It’s the recommended approach so you can deploy them separately.

Sergio Fernandez

VueJS > Angular, no entiendo porque tanto codigo con angular, de algo sencillo lo hacen muy tedioso de codificar, realmente me frustró el solo intentar hacer esta aplicacion.

Matt Raible

If you don’t like Angular, don’t use it! :wink:

If you’d rather use Vue, we have a tutorial for that: Build a Basic CRUD App with Laravel and Vue.

Krasimir Hristozov

And a React version, if you want to give that a try:


Coustas Serge

Hello @@krasimirhristozov
very good tutorial
but in production how can i connect e.g the laravel api.
basically angular will run in example.com
but laravel should run in example.com/api but how this can be done ?

Krasimir Hristozov


Just set the API_URL constant to the location of the API. In the example, it’s set to:

const API_URL: string = ‘http://localhost:8000’;

When deploying, if the api is at example.com/api, you will set it to:

const API_URL: string = ‘http://example.com/api’;

Of course, you should use https connection in production.


Hey, having some troubles with this step Secure the Backend API with Okta.

Can anyone help me with that?

Here’s the link

mehul12345 .

hi i am creating this on my linux ssh server, how would i run the website as my university server is mi-linux.wlv.ac.uk/~132848/ and so on?

Sutapa Mondal

Hello Krasimir ,
Thanks for sharing this method. This is probably a concise guide on developing a CRUD app with Laravel and Angular.


hello, one question, is that when executing the code with ng serve the program reaches 10% and does not compile I don’t know why :frowning:


hello did the whole tutorial work for you?,

Matt Raible

You might try comparing your code to the example on GitHub. SmartSynchronize and Beyond Compare work well for this.


i checked it

Matt Raible

Were you able to figure out the problem? If not, I’d suggest posting your question to Stack Overflow since this seems like a problem with your environment and the Angular CLI.

Akash khan

Very nice article on CRUD on AngularJs

Shaaban Mwanjoge

how to to make the angular app as a mobile app

Matt Raible

You could make a PWA (progressive web app) and deploy it like a regular webapp. That’s what a lot of developers are doing these days. Another option would be to use something like Ionic to write your app. See this blog post to learn more about using Ionic with Okta.

Lex Soft

This is for API. How about a standalone web app, where the routes are defined in web.php instead of api.php file ?
Is the same front-end scaffolding Laravel provides for Vue or React, using MIx tools, can be used for Angular ?
As we know, Angular has its own build system, so I am not sure how it can be integrated with Laravel Mix tools which uses webpack under the hood.

For instance, for React, in webpack.mix.js file we use the following statement :
mix.react(‘resources/js/app.jsx’, ‘public/js’)