Categorías
Blog Tutoriales

¿Cómo hacer funcionar una app con MEAN y Azure?

¿Recordáis la aplicación que no conseguía hacer funcionar con Azure? Pues ya está en la nube; después de mucho tiempo, por fin lo he conseguido. Y empleando MEAN, nada menos.

Como lo prometido es deuda, hoy os traigo la explicación de cómo la hice funcionar.

Lo principal para llevar el proceso bien de cabo a rabo fue seguir este tutorial:

Creación de una aplicación de MongoDB con Angular y Azure Cosmos DB – parte 2: creación de una aplicación Node.js Express con la CLI de Angular.

Sabía que alguno de los 3000 tutoriales que acumula Microsoft en su blog tendría que ayudarme, y este en concreto fue el que me salvó la vida.

El tutorial con MEAN y Azure.

Creo que está bastante bien explicado, así que no voy a volver a hacer una explicación paso a paso de cómo seguirlo. Pero sí os daré un par de consejos que mejoran su calidad.

Para empezar, el primero se da si queréis empezar a desarrollar una app con MEAN en Azure. MEAN es MongoDB, Express, Angular y NodeJS, para quien no esté familiarizado con el término. Mi consejo es que os descarguéis el repositorio de GitHub que viene en la guía.

MEAN en La Isla del Faro.

Obviamente, este proyecto tiene cosas que no os serán ideales y os tocará cambiar:

  1. El nombre de la app. El que viene por defecto es «angular-cosmodb». Tendréis que renombrar la carpeta con el nombre de vuestro proyecto. A continuación, en el archivo package.json, tendréis que cambiar el campo «name» por el nombre de vuestro proyecto.
  2. Actualizar algunos elementos. Algunas versiones que vienen en el package.json están bastante desactualizadas. Por ejemplo, Angular está en Angular 4, así que os interesará cambiarlo.

Así está mi archivo package.json:

{

«name»: «pruebas»,
«version»: «0.0.0»,
«license»: «MIT»,
«scripts»: {

«ng»: «ng»,
«start»: «node src/server/index.js»,
«start-ng»: «ng serve»,
«build»: «ng build»,
«test»: «ng test»,
«lint»: «ng lint»,
«e2e»: «ng e2e»

},
«private»: true,
«dependencies»: {

«@angular/animations»: «^5.2.0»,
«@angular/common»: «^5.2.0»,
«@angular/compiler»: «^5.2.0»,
«@angular/core»: «^5.2.0»,
«@angular/forms»: «^5.2.0»,
«@angular/http»: «^5.2.0»,
«@angular/platform-browser»: «^5.2.0»,
«@angular/platform-browser-dynamic»: «^5.2.0»,
«@angular/router»: «^5.2.0»,
«@ng-bootstrap/ng-bootstrap»: «^1.1.0»,
«angular5-social-login»: «^1.0.9»,
«angularfire2»: «^5.0.0-rc.5-next»,
«bcrypt-nodejs»: «0.0.3»,
«body-parser»: «^1.18.2»,
«bootstrap»: «^4.0.0-beta.3»,
«connect-multiparty»: «^2.1.0»,
«core-js»: «^2.5.4»,
«express»: «^4.16.3»,
«jquery»: «^3.3.1»,
«jwt-simple»: «^0.5.1»,
«moment»: «^2.22.0»,
«mongoose»: «^4.11.14»,
«mongoose-pagination»: «^1.0.0»,
«popper.js»: «^1.14.3»,
«rxjs»: «^5.5.6»,
«sass»: «^1.1.1»,
«zone.js»: «^0.8.25»

},
«devDependencies»: {

«@angular/cli»: «~1.7.3»,
«@angular/compiler-cli»: «^5.2.0»,
«@angular/language-service»: «^5.2.0»,
«@types/jasmine»: «~2.8.3»,
«@types/jasminewd2»: «~2.0.2»,
«@types/node»: «^6.0.104»,
«codelyzer»: «^4.0.1»,
«jasmine-core»: «~2.8.0»,
«jasmine-spec-reporter»: «~4.2.1»,
«karma»: «~2.0.0»,
«karma-chrome-launcher»: «~2.2.0»,
«karma-cli»: «~1.0.1»,
«karma-coverage-istanbul-reporter»: «^1.2.1»,
«karma-jasmine»: «~1.1.0»,
«karma-jasmine-html-reporter»: «^0.2.2»,
«protractor»: «~5.1.2»,
«ts-node»: «~4.1.0»,
«tslint»: «~5.9.1»,
«typescript»: «~2.5.3»

}

}

Os lo dejo aquí por si queréis copiar y pegar.

Y por último, el segundo, si no tenéis muchos conocimiento sobre Mongoose, os recomendaría dejar la versión que tengo instalada yo, para que no os dé problemas de conexión. Si no lo hacéis, habría que configurar un poco el environment para que funcione correctamente.

Últimos consejos.

No obstante, para cuando este artículo salga, es posible que ya hayan mejorado el sistema. La verdad es que todo ha sido un caos.

Espero que vosotros lo podáis hacer fácilmente. Además, deberías de replantearos si preferís hacerlo en el Cloud de Google. Creo que, para desarrollar este tipo de apps, la configuración se te hará mucho más sencilla. Por lo que parece, los de Google han hecho bien los deberes.

Cualquier comentario o ayuda que necesitéis no dudéis en contactar con nosotros. Si podemos os echaremos un cable 🙂

Por JGarciaz

Developer, Student, MSP, Tuenti Master

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.