Posts Tagged

Tutorial

Configuración Entorno de Desarrollo: Symfony 4 + Angular 7 [TUTORIAL Windows]

Antes de empezar considero importante explicar de manera resumida cómo funciona la arquitectura de este proyecto. Lo interesante de este entorno es que podemos construir una web app con el fronted y backend claramente separados.

Para el backend se contara con Apache como servidor web, Php 7 como lenguaje de programación y MySql como servidor de base de datos. Para el desarrollo usaremos Symfony 4, un framework de PHP que nos permitirá construir una API que tiene como tarea comunicarse con nuestra base de datos.

Para el fronted usaremos Angular 7, un framework desarrollado en Javascript, que nos permite utilizar la potencia del superset TypeScript para generar una aplicación web de una sola pagina (Single-Page Application) comunicándose con nuestro backend de forma asíncrona y generando vistas mas dinámicas para los usuarios.

Paso 1. Descarga

  • WampServer nos proveerá del software necesario para el funcionamiento de nuestro backend. Las siglas WAMP son un acrónimo de Windows + Apache + MySQL + PHP.
  • NodeJs nos permitirá ejecutar javascript del lado del servidor necesario para instalar y ejecutar Angular.

Paso 2. Instalación WampServer

IMPORTANTE: Se debe tener instalados los siguientes paquetes redistribuibles de Visual C++:

Aquí solo seguimos los pasos comunes de instalación de cualquier programa en Windows y al finalizar la instalación encontraremos un icono en nuestra barra de tareas en donde haremos clic para comprobar si esta corriendo.

Paso 3. Configuración del servidor Apache

Es importante que para que nuestra API funcione de forma estable configuremos un parámetro de nuestro servidor Apache.

Debemos activar el Módulo «headers_module» para que nos permita hacer peticiones http desde cualquier cliente, para esto vamos a nuestro wamp y nos dirigimos a Apache > Apache module.

Una vez activado procedemos a modificar nuestro archivo httpd.conf que lo podemos abrir desde nuestro wamp accediendo a Apache > httpd.conf

Dentro del archivo buscamos el segmento headers_modulo y debajo colocamos el siguiente código

<IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Headers "*"
   Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
</IfModule>

Quedando de esta manera:

Para terminar guardamos los cambios y reiniciamos los servicios de nuestro WAMP.

Paso 4. Configuramos nuestra variable de entorno PHP.

Para este paso se debe buscar dentro de carpeta de instalación del WAMP la ruta exacta en donde se encuentra nuestro PHP, si seguiste las instrucciones se creo dentro de C:\ una carpeta llamada wamp o wamp64 dependiendo de la arquitectura de tu sistema operativo. Dentro de esta carpeta esta instalado nuestro PHP y la ruta predeterminada es la siguiente: C:\wamp64\bin\php\php7.2.14

Para configurar nuestra variable de entorno haz clic aqui

Paso 5. Instalar Symfony

Para este paso es necesario que tengamos instalado composer, puedes seguir los pasos de instalación desde su pagina principal

Una vez instalado ejecutamos en nuestra consola el comando:

php composer create-project symfony/skeleton nombre_del_proyecto

NOTA: de aquí en adelante debes cambiar «nombre_del_proyecto» por el nombre que llevara tu proyecto.

Obteniendo un resultado como este:

Para comprobar nuestra instalación, abrimos el navegador de nuestra preferencia y vamos a la dirección http://localhost/nombre_del_proyecto

Paso 6. Instalar NodeJS

Seguimos los pasos básicos de cualquier instalador de Windows y para comprobar nuestra instalación procedemos a introducir en nuestra consola el siguiente comando:

npm --version

Obteniendo el siguiente resultado:

Paso 7. Instalar Angular

Abrimos nuestra consola y ejecutamos el siguiente comando:

npm install -g @angular/cli

Posteriormente, nos dirigimos a la ruta en donde queremos que se encuentre nuestro proyecto y ejecutamos el comando:

ng new my-app

NOTA: De aquí en adelante debes cambiar «my-app» por el nombre que llevara tu proyecto.

Obteniendo el siguiente resultado:

Para comprobar el éxito de nuestra instalación ejecutamos el comando:

ng serve

Y en nuestro navegador de preferencia entramos a la dirección http://localhost:4200

Configurar Variable de Entorno PHP [TUTORIAL Windows]

Una variable de entorno es un objeto que contiene información acerca del sistema operativo, en el podemos encontrar desde información del usuario en sesión hasta apuntadores de aplicaciones que requieran ejecutarse en cualquier ruta del sistema.

En este tutorial aprenderemos como configurar una variable de entorno para la ejecución de PHP en consola.

Paso 1. Damos clic derecho en «Este Equipo» y seleccionamos «Propiedades».

Paso 2. Hacemos clic en la opción «configuración avanzada del sistema».

Paso 3. Hacemos clic en «Variables de entorno».

Paso 4. Seleccionamos «Path» y pulsamos el botón «Editar»

Paso 5. Hacemos clic en el botón «Nuevo»

Paso 6. Añadimos la dirección exacta de nuestra instalación PHP y aceptamos todos los cambios

Para terminar y comprobar nuestra configuración vamos a la consola y ejecutamos el comando:

php --version

Obteniendo un resultado como este: