En este tutorial, aprenderás cómo crear una aplicación en Angular en tu entorno local y subirla a un servidor cloud utilizando el servicio AWS Amplify.
Cubriremos los pasos necesarios, conectarla a un repositorio gitHub, configurar el servicio Amplify y subir la aplicación a la nube.
Antes de comenzar a crear nuestra aplicación de Angular, necesitamos configurar nuestro entorno de desarrollo.
Paso 1: Configurar el entorno de desarrollo
Asegúrate de tener Node.js y Angular CLI instalados en tu máquina. Si no los tienes, descárgalos e instálalos. Luego, abre tu terminal y escribe los siguientes comandos:
node -v
Este comando verifica si Node.js está instalado en tu sistema. Si estás en una versión anterior a la 10.9, debes actualizar Node.js.
npm -v
Este comando verifica si npm está instalado en tu sistema. Si no lo tienes, debes instalarlo.
ng version
Este comando verifica si Angular CLI está instalado en tu sistema. Si no lo tienes, instálalo con el siguiente comando:
npm install -g @angular/cli
Paso 2: Crear la aplicación de Angular
Ahora que hemos configurado nuestro entorno de desarrollo, podemos crear nuestra aplicación de Angular. En tu terminal, navega a la carpeta donde quieres crear tu aplicación y escribe el siguiente comando:
ng new my-app
Este comando creará una nueva aplicación en Angular llamada «my-app». Una vez que la aplicación ha sido creada, entramos en la carpeta de la aplicación con el siguiente comando:
cd my-app
Ejecutar la aplicación en Angular
Para probar que nuestra aplicación ha sido creada correctamente, podemos ejecutarla en el servidor local. Para hacerlo, escribimos el siguiente comando en la consola:
ng serve
Este comando iniciará el servidor local y abrirá nuestra aplicación en el navegador predeterminado en la dirección http://localhost:4200/. Ahora podemos ver la aplicación en acción y hacer cualquier cambio que queramos.
Paso 3: subir la aplicación Angular a un repositorio de GitHub:
Crea un repositorio en GitHub: Primero, crea un nuevo repositorio en GitHub. Para ello, inicia sesión en tu cuenta de GitHub y haz clic en el botón «New» en la pestaña «Repositories». Luego, completa la información necesaria, como el nombre del repositorio y la descripción, y haz clic en «Create repository».
Inicializa el repositorio en tu entorno local: En tu entorno local, navega hasta la carpeta que contiene tu aplicación Angular y ejecuta el siguiente comando en la consola para inicializar un repositorio de Git:
git init
Agrega los archivos al repositorio: Ahora, agrega los archivos de tu aplicación al repositorio local utilizando el siguiente comando:
git add .
Este comando agregará todos los archivos de tu aplicación al repositorio local.
Crea un commit con los cambios: Para confirmar los cambios que acabas de realizar, crea un commit utilizando el siguiente comando:
git commit -m "primer commit"
Este comando creará un commit con un mensaje indicando que se trata del primer commit.
Conecta el repositorio local con el repositorio en GitHub: Para conectar el repositorio local con el repositorio en GitHub, ejecuta el siguiente comando en la consola:
git remote add origin https://github.com/tu-usuario/tu-repositorio.git
Reemplaza «tu-usuario» por tu nombre de usuario en GitHub y «tu-repositorio» por el nombre del repositorio que acabas de crear.
Sube los cambios al repositorio en GitHub: Ahora, sube los cambios que acabas de realizar al repositorio en GitHub utilizando el siguiente comando:
git push -u origin master
Este comando subirá todos los archivos de tu aplicación al repositorio en GitHub.
¡Y eso es todo! Ahora tu aplicación Angular está disponible en un repositorio en GitHub. Puedes compartir el enlace del repositorio con otros desarrolladores o utilizar servicios como AWS Amplify para desplegar la aplicación en la nube.
Paso 4: Subir la aplicación a AWS con AWS Amplify
Una vez que nuestra aplicación está lista, podemos subirla a AWS con AWS Amplify. Para hacerlo, debemos seguir los siguientes pasos:
- Ir a la consola de AWS Amplify y hacer clic en «Conectar una aplicación».
- Seleccionar «GitHub» como proveedor de servicio y conectar nuestra cuenta de GitHub.
- Seleccionar el repositorio donde se encuentra nuestra aplicación Angular.
- Configurar las opciones de implementación y hacer clic en «Conectar la rama».
- Esperar a que se implemente la aplicación en AWS.
- Con estos sencillos pasos, nuestra aplicación Angular estará disponible en la nube de AWS y podremos acceder a ella desde cualquier lugar del mundo.
¡Felicitaciones! Ahora sabes cómo crear una aplicación en Angular en tu entorno local y subirla a un servidor cloud como AWS con el servicio AWS Amplify. Esperamos que este tutorial te haya sido útil y que puedas aplicar estos conocimientos en tus proyectos futuros.