Separar proyecto laravel en backend y frontend, y asignar a diferentes personas

Como podria separar un proyecto laravel en backend y frontend....para que digamos el programador backend haga su trabajo, y luego el programador front consuma eso.....tendria que tener 2 proyectos? y que el front consuma con la api del backend? o como haria?

Pedro Araujo (112 xp)jul 15, 2019

En mi humilde experiencia podrías crearte dos carpetas y darles le nombre "Frontend" y "Backend" respectivamente; en el frontend puedes utilizar la tecnología que sea de tu preferencia como por ejemplo: VueJS, si utiliza este puede emplear el CLI de VueJS para crearte todo la estructura del frontend.

Por otro lado, el desarrollo del backend, lo puedes trabajar normalmente sólo que el consumo de los recursos puedes ponerlo a disposición del frontend por medios de API. 

Todo esto dependerá mucho de la metodología y lógica de programación que selecciones. 

Espero que esto pueda orientarte. Tengas un excelente día.

Andres Garcia (28 xp)dic 09, 2019

Pedro el consumo del API por ejemplo voy a trabajar con VUE usando AXIOS como seria? 
cuando pida la url en caso local se pone localhost:puerto/ruta_a_consumir, nunca he trabajado back y front separado, me podria explicar brevemente. gracias

Jorge Davila (838 xp)dic 09, 2019

Simplemente tendrias que crear componentes para realizar las pruebas. Tu backend( Laravel) puede ir donde sea. Por estandar deberas usar las rutas api, que por prefijo llevan el segmento api, es decir , proyecto.test/api/tu-ruta.

Tu front end lo puedes tener en el mismo proyecto o externamente. Este seria un ejemplo burdo de un componente de vuejs que funciona de esa manera:

<template>
    <div class="container-fluid">
        <div class="row m-0 mt-4">
                        <div class="card col-6 offset-2 border-0 shadow-sm">
                            <input type="text" class="bg-transparent border-0 shadow-none" placeholder="userId" id="userId">
                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary btn-md mx-2" type="button" @click="searchUser">
                                Search
                            </button>
                        </div>
        </div>
        <div class="code mt-4">
            <div class="card col-3 mx-auto" v-if="user">
               <div class="card-header">
                   <h4 class="display-5 text-primary">
                       {{user.name}}
                       <span class="badge badge-danger">
                        {{user.id}}
                       </span>
                   </h4>
               </div>
                <div class="card-body">
                    <li v-for="(items,index) in user" :key="index">
                        {{index}}:{{items}}
                    </li>
                </div>
            </div>
        </div>
        <div class="row" v-if="error">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        mounted() {
            console.log('mounted');
        },
        data(){
            return{
                user:null,
                hasError:false
            }
        },
        methods:{
            searchUser:function(){
                let id=document.getElementById('userId').value;
                axios.get('https://jsonplaceholder.typicode.com/users',
                    {params:{id:id}})
                .then(response=>{
                    this.user=response.data[0];
                    console.log(this.user);
                })
                .catch(error=>{
                   this.error=true;
                });
            }
        },
        computed:{
            error:function(){
                return this.hasError;
            }
        }
    }

</script>
<style lang="scss" scoped>
    .navbar-icon{
        font-size:20px;
    }
    input{
        border:none;
        outline:none !important;
        height:3em;
        box-shadow:none !important;
        background-color:transparent !important;
    }
    .code {
        position:relative;
        min-height:250px;
        font-family: monospace;
        width:80%;
        margin:0 auto;
        background:rgba(0,0,0,0.12  );
    }
</style>

Cabe resaltar que las rutas de laravel funcionan como api de manera predeterminada ,ya que devuelven un response. Para usarlas como api en tu controlador simplemente devuelve la respuesta de la siguiente manera:

return response()->json(['id'=>$user->id,'name'=>$user->name],200);

Este componente simplemente hace una peticion a jsonplaceholder basado en el id que tu le pasas( si se que le faltan validaciones). Te recomiendo que revises este curso, es bastante bueno y funciona como estas pidiendo:

https://aprendible.com/series/red-social-laravel-tdd

Andres Garcia (28 xp)dic 10, 2019

Gracias entendido, usted es muy amable. Pienso hacer una app con Quasar Framework y Laravel. Quiero separar el Back y el Front.

Jorge Davila (838 xp)dic 10, 2019

Tambien podrias usar Lumen, aunque te quita ciertas cosas de laravel. El lado de bueno de las API's es que puedes tener tu front end en un servidor y el back en otro. Por estandar se usan las rutas "api" para manejarlo de esta manera y las rutas "web" para devolver vistas,etc.  En tu RouteServiceProvider  puedes modificar el prefijo de las rutas api. Te recomiendo que investigues de Responsable Exceptions en Laravel y revises dicho service provider para poder customizar mejor tu aplicacion. Suerte con tu proyecto.

Andres Garcia (28 xp)dic 11, 2019

Al tener el back separado, como se haría para que las rutas al momento de subir la app. A producción me sirve, ejemplo en el server de desarrollo es localhost:8080/api/clientes/registrar pero cuando vaya subir a producción debo cambiar esas rutas en toda la app. Es es mi duda. Gracias quedo atento