Bienvenidos.
Vamos a comenzar el desarrollo de una aplicación con Laravel 5.4 y Angular 4.
En esta entrada comenzaremos por instalar Laravel, corregirlo para poder ser utilizado por el servidor Virtualmin y configuraremos el IIS para que acepte toda esta estructura. También instalaremos angular 4 para poder hacer el desarrollo de la parte frontend.
Tras mucho bucear por internet y por tutoriales y preguntas en stackoverflow y sitios similares, al final voy a optar por un entorno separado. La parte frontend (con AngularJS) es la que irá en la dirección principal, y la parte backend (con Laravel) se encontrará en un subdominio «api». Así cada proyecto está separado y no se pegan entre ellos y simplifica los cambios y despliegues de cada parte.
Instalando Laravel 5.4.
Lo más sencillo (al menos en mi caso) es utilizar Composer para que se instale laravel en el directorio que voy a utilizar para desarrollar.
Lo primero es elegir la carpeta dónde se va a desarrollar.
Por lo tanto, en una terminal, dentro de la carpeta del proyecto, comenzaremos con la instalación de Laravel.
laravel new nombre_laravel
Con lo que se nos instalará la base del framework.
Una vez conseguido, voy a seguir las instrucciones que ya detallé aquí para tener el entorno listo para virtualmin, y que en resumidas cuentas vienen a ser:
- Mover la carpeta «public» dentro de «nombre_laravel» a la raíz de nuestro proyecto.
- Renombrar «public» a «public_html» dentro de su nueva ubicación.
- Cambiar las líneas 22 y 36 de «public_html/index.php».
En mi caso han quedado así (sí, he puesto «laravel» a la carpeta de Laravel, original 😉 ):
require __DIR__.'/../laravel/bootstrap/autoload.php'; $app = require_once __DIR__.'/../laravel/bootstrap/app.php';
- Tener una carpeta para el proyecto.
- Copiar las carpetas public_html y laravel a la carpeta del proyecto dentro del servidor IIS (se acepta el método preferido de cada uno)
- Importante: Asegurarse de que el usuario IUSR tiene control total (al menos de momento para desarrollar) en la carpeta del proyecto y todos sus archivos y carpetas dependientes.
- Crear un nuevo sitio en IIS que apunte a la carpeta «public_html» dentro de nuestro proyecto.
- Probar en el navegador.
Si todo ha ido bien tendremos instalado Laravel listo para comenzar.
Para desplegarlo en el sitio remoto (con virtualmin y apache), será necesario subir por ftp las dos carpetas, laravel y public_html a la raíz del subdominio donde se va a ejecutar.
Instalando Angular 4.
Ha llegado el momento de instalar la base de Angular 4 para comenzar a trabajar.
Para ello, y siguiendo con la terminal de VS code, lo mejor es seguir los siguientes pasos.
- Asegurarse de que tenemos node instalado con «node -v».
- Después ver si se tiene instalado el Angular-CLI con el comando «ng -v». De no ser así ejecutar «npm install -g @angular/cli» para instalarlo globalmente y que nos sirva para otros desarrollos.
- Efectuar la instalación de una aplicación AngularJS con el comando «ng new web» (nombre para el proyecto original otra vez jeje).
- al finalizar tendremos una estructura de carpetas parecida a la siguiente, en el ordenador de desarrollo.
Para probar que está en marcha, lo mejor es utilizar una nueva terminal de consola o powershell, y probar a arrancar angularjs con el comando «npm start» dentro de la carpeta «angular» de nuestro proyecto. Y acceder con un navegador a la url http://localhost:4200
Para poder probar esta primera instalación en el sitio remoto, será necesario seguir estos pasos:
- Ejecutar en la carpeta de angular (web) el comando ng build –prod para que se generen y compilen las fuentes.
- Esto creara un directorio «dist» dentro de la carpeta del proyecto de Angular.
- Subir por ftp el contenido de la carpeta «dist» a la carpeta «public_html» del dominio remoto.
- Probar en el sitio remoto.
Y con todo esto ya tendremos las dos herramientas funcionando y listas para comenzar.
He elegido esta separación de carpetas por dos motivos: Para poder enviar al servidor virtualmin lo necesario para los proyectos y que la parte privada siga funcionando correctamente, y para poder tener cada desarrollo totalmente separado, dado que utilizaré Laravel para formar la parte backend y angular para la parte frontend.
Nos vemos en la siguiente parte.