Full Stack Angular Server

Author: Ruslan Gonzalez

Español

Introducción

Este es un proyecto Full Stack con Angular... la idea de éste proyecto es tener todo centralizado en un mismo lugar, aunque no es requisito.

En el root del repositorio existe una carpeta con el nombre "angular-src" donde se supone que debe ir el proyecto angular de desarrollo, de tal manera solo es necesario hacer un ng new angular-src y para utilizarlo en modo desarrollo un npm run front-dev el cual seria un equivalente al ng serve, en el archivo "package.json" está la configuración del script para personalizarlo y utilizar un puerto diferente al 4200 con la bandera --port=.

Inicio rápido

# 1. Clonamos el proyecto
$ git clone git@github.com:ruslanguns/fullstack-mean-for-angular.git

# 2. Vamos al directorio del repo
$ cd fullstack-mean-for-angular

# 3. Instalamos todas las dependencias
$ npm run setup

# 4. Compilamos el typescrypt
$ tsc

# 5. Creamos el archivo .env
$ mv .env.example .env

# 6. Iniciamos el server
$ npm run start

# Output esperado: 
> backend_server_mean_ts@1.0.0 start C:\Users\xxxx\fullstack-mean-for-angular
> nodemon ./dist/index

[nodemon] 1.18.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./dist/index.js`
Servidor corriendo en el puerto 3000
La base de datos esta ONLINE

# 7. Desplegamos el modo desarrollo de Angular
$ npm run serve

# 8. Desplegamos el modo desarrollo de Angular para abrir el navegador automáticamente
$ npm run serve-o

Requisitos

Para poder hacer uso de este proyecto es importante tener desde antes instalado de forma global npm, node y mongodb.

• Angular

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.6
Node: 10.15.3
OS: win32 x64
Angular: 7.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6
@angular-devkit/build-angular     0.13.6
@angular-devkit/build-optimizer   0.13.6
@angular-devkit/build-webpack     0.13.6
@angular-devkit/core              7.3.6
@angular-devkit/schematics        7.3.6
@angular/cli                      7.3.6
@ngtools/webpack                  7.3.6
@schematics/angular               7.3.6
@schematics/update                0.13.6
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

• Node & NPM

$ node --version
v10.15.3

$ npm --version
6.4.1

Modo de uso

Instalacición

Copiarse el repositorio y hacer un git clone e instalarlo con un npm-i

$ git clone <url-de-github-del-proyecto>
$ cd <al-proyecto>
$ npm run setup #instalamos las dependencias

Proyecto de Angular

Tener en cuenta que existe un archivo llamado ".env.example", que habrá que renombrarlo a ".env", también tendrán que rellenarlo con los datos correctos.

Para utilizar un proyecto de Angular basta con crear un nuevo proyecto de Angular con el nombre que querramos.

IMPORTANTE: Debemos estar seguros de esta en el root del repositorio.

OPCIONAL Podemos renombrar la carpeta a "angular-src" para una fácil ubicación.

$ ng new mi-nueva-app

Dentro de la carpeta del proyecto nuevo de angular tenemos que buscar el archivo "angular.json" y cambiamos el "out-dir" del script "build" para que compile en la carpeta "../public".

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
              "outputPath": "../public",

De esta forma cuando nosotros ejecutemos el npm run build nos va a compilar en la carpeta del root de nuestro repositorio "public".

Modo de compilación

Para compilar el proyecto de Angular, podemos ejecutar desde el root del repositorio la siguiente sentencia desde nuestra terminal shell:

$ npm run build # equivalente a $ ng build --prod --base-href "./"

Para cambiar el --base-href, debemos modificar la configuración en el "package.json"

Iniciar el servidor

Para iniciar el servidor solamente corremos el comando siguiente:

$ npm run start # equivalente a $ nodemon ./dist/index"

Podemos ir al nuestro navegador y teclear http://localhost:3000 para ver el contenido compilado de la carpeta public.

Cabe mencionar que este comando también inicia el servidor en modo desarrollo para la escucha de todos los cambios que suceden dentro del root del proyecto, ésta característica es gracias a que estamos corriendo la dependencia de nodemon, así que todos los cambios que realicem os estarán siendo aplicados sobre la marcha y los reflejará de manera instantanea al momento del post-guardado.

En caso que no querramos esta función, basta con ejecutar la siguiente sentencia en nuestra terminal shell:

$ npm run start-prod # equivalente a $ node ./dist/index

Modo de desarrollo

Es indispensable iniciar typescript para compilar lo que escribimos en este lenguaje por ello podemos ejecutar el siguiente comando para que se ponga a la escucha de los cambios que guardamos:

$ npm run watch # equivalente a $ tsc -w

Para trabajar con Angular en Desarrollo

Es importante hacer un CD a la carpeta angular-src y desde ahi poder ejecutar el Angular CLI.

Tareas pendientes

• Documentar el proyecto
• Aplicación de ejemplo para LOGIN
• Documentación de la API
• Actualizar README