Is it better to have Angular and Laravel as separate applications or should Laravel serve the Angular app?

I have a new project in the works, aiming to create a large SAAS application. Although I come from a CakePHP background, I've decided to use Laravel and Angular for this venture.

As I navigate through unfamiliar territory with these technologies, I am faced with a decision: should I maintain separate projects for Laravel and Angular, with Laravel functioning solely as an API? Or should I integrate the two, potentially serving Angular templates from within Laravel?

Additionally, I will eventually need to develop a mobile application for this project, adding another layer of complexity to consider.

While I understand if this question may not be directly related to this platform, any advice or guidance on this matter would be greatly appreciated.

Answer №1

My suggestion would be to completely separate them. By doing so, your projects or repositories will only have one distinct "environment" or context, leading to a cleaner setup overall. This approach also enhances reusability, as your API can be utilized by any app without dependencies. You can still deploy them from the same server for convenience.

When components are separated, it becomes easier to conduct testing in a Continuous Integration (CI) environment since you'll only need to focus on one component at a time.

I highly recommend implementing version control for the API, especially in the initial stages of development. This practice allows different versions of the app to target specific API versions. Adopting an "API first" approach during iterations helps minimize compatibility issues between the two components, as long as there are minimal breaking changes on the API side.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best techniques for maintaining state in Xstate state machines within a React application?

I'm currently using a functioning cart state machine in reactjs to add items to the cart. However, I've noticed that when refreshing the page, the context is not persisted. As someone new to state machines, I would appreciate any assistance in fi ...

javascript reactjs state-machine xstate

To effectively execute a JQuery / Javascript function, it is essential to incorporate both $(document).ready and $(document).ajaxSucces

I have a JavaScript function that is used for basic UI functionality across my site. Some elements affected by this function are injected via Ajax, while others are static HTML. Currently, I have duplicated the function and applied it to both $(document). ...

javascript jquery ajax

Iterating through data to showcase vertical columns for a specific time span of 3 years, highlighting only the months with available data

If data has been available for every month over the past 3 years, I need it to be displayed in a specific format. You can refer to this example fiddle for reference: https://jsfiddle.net/bthorn/ncqn0jwy/ However, there are times when certain months may no ...

javascript jquery html css

Preventing an Angular update in the view

I am currently using ngRepeat with interval pushes, however I am facing an issue where the same model updates with changing values. Is there a way to prevent ngRepeat from updating values when the model changes? For example: $scope.example = 5; $scope.exa ...

angularjs angularjs-scope angularjs-ng-repeat

Tips for addressing Navbar collision with body content or other pages using CSS

I have successfully created a navigation bar using CSS and JS. The image below illustrates the example of my navigation bar: https://i.sstatic.net/2l4gj.png The issue I am facing is that when I select "MY ACCOUNT," it displays some content. However, upon ...

javascript html css

Discover the ultimate guide on developing a personalized file management system using the powerful node.js platform!

I have undertaken a rather ambitious project for myself. There exists a comprehensive tutorial on the website that outlines the process of establishing an online environment (resembling a user panel) where registered users can effortlessly upload various ...

javascript node.js ajax

Is there a way to personalize the header outline of the mui-material datagrid?

Can someone help me modify the appearance of the Mui Datagrid outline to something different than its default setting? I'm having trouble uploading my code. Are there any reference materials or sample code snippets available for this modification? ...

javascript reactjs material-ui

Attempting to deploy a GitHub repository onto Railway.app has led to an Application Error. It seems like the issue may lie in whether your app is

I encountered an Application Error while deploying my project to railway.app. The error message prompts, "Is your app correctly listening on $PORT?". Initially, my project was a combination of JS and jQuery. However, I later integrated webpack.config.js t ...

javascript node.js webpack webpack-dev-server railway.js

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

I am facing an issue where only one element is getting affected when trying to remove classes from multiple elements if certain email input requirements are met. Can someone help me understand why this is happening? Here is the code snippet: const emailI ...

javascript html css validation

Using jQuery to specifically target elements of a specific class that are nested within another element

I am currently using a jQuery function that toggles a drop-down navigation menu by changing its class when clicked: $(function () { $('.nav-titles').on('click', function() { $('.nav-dropdown').toggleClass(& ...

javascript jquery dom

Message displaying successful AJAX response

I'm currently updating my AJAX request to make it asynchronous, but I am wondering if there is an equivalent to var response = $.ajax({ in the success function. Previously, my code looked like this: var response = $.ajax({ type : "GET ...

javascript jquery ajax

Determine the presence of a value within a specific column of an HTML table using jquery

When I input an ID number into a textbox, it shows me the corresponding location on a scale in another textbox. You can see an example of this functionality in action on this jsFiddle: http://jsfiddle.net/JoaoFelipePego/SdBBy/310/ If I enter a User ID num ...

javascript jquery html

Automatically collapse the responsive menu upon selecting a menu item

I have implemented a custom JavaScript code for a basic open/close menu movement on multi-page websites. The code works by closing the menu only when the user clicks the menu symbol. However, I now need to incorporate this code into a one-page website and ...

javascript jquery html css responsive-design

Error message due to an undefined function in Angular datatables Fixed Columns

I recently implemented angular datatables with fixed column in my application. Here is the HTML code I used for the view: <div class="row" ng-controller="PerformanceCtrl"> <table id="example" datatable="" class="stripe row-border or ...

javascript jquery angularjs datatable angular-datatables

Discovering discrepancies between an empty array and undefined in Mongoose

How can I distinguish between an empty array and a null/undefined value when retrieving data from MongoDB using Mongoose? Mongoose treats both as empty arrays, but the actual meanings in the database are different. For example: var Mongoose = require(&apo ...

javascript node.js mongodb mongoose

Enhance your Angular2 Directive

Looking to customize the angular2-clipboard npm package by extending its functionalities. Specifically, I aim to access and modify its ngOnInit() function to cater to a specific copying use case. Being new to angular2, I am uncertain about the process of ...

javascript angular clipboard extend

Creating dynamic values in data-tables using Vuetify

As I work with JSON data, my current task involves formatting it using Vuetify's Data Tables. The official documentation provides guidance on defining table headers as shown below: import data from './data.json' export default { data ...

javascript vue.js vuejs2 vuetify.js

What is the best method for storing pug-formatted data in a database?

I am currently developing a JavaScript application where I utilize pug for templates and diskdb for storing data. Within my content, I have implemented pug syntax which may appear in the following format: p some content here p some more content here p: # ...

javascript node.js pug

What is the best way to create a unit test for a controller that utilizes $state?

Currently working on creating a unit test for my controller: app.controller('StartGameCtrl', function ($scope, $timeout,$state) { $scope.startGame = function () { $scope.snap = false; $scope.dealCards(); debugger; ...

angularjs unit-testing angular-ui-router karma-jasmine

How can you prevent JQuery AJAX from automatically redirecting after a successful form submission?

Encountered an issue with loading http://example.com/signup.ashx: The redirect from 'http://example.com/signup.ashx' to '' was blocked by the CORS policy. This is due to the absence of 'Access-Control-Allow-Origin' header on t ...

javascript jquery ajax cors

JavaScripter Q&A