4

Hice 1 proyecto que se divide en frontend y backend, la parte de frontend esta hecho en angularjs 1.x y la parte de backend esta hecho en nodejs express.

Actualmente la parte de backend lo probé con simple html que no esta incorporado con angular.

Para correr la parte de frontend lo hago con gulp:

gulp.task('web-server', function () {
    gulp.src('.')
      .pipe(server({
        livereload: false,
        directoryListing: false,
        open: true,
        log: 'debug',
        clientConsole: false,
        port: 8080,
        host: 'localhost',
        middleware: function (connect, opt) {return [historyApiFallback()];}
      }));
  });

Y para la parte de backend:

app.listen(3000);

Es decir los dos proyectos escuchan los puertos 8080 y 3000 respectivamente, mi duda es ¿Cómo puedo hacer correr los 2 proyectos con un solo comando? creo que los dos deberían escuchar a 1 mismo puerto.

Nota: el proyecto esta aquí: https://github.com/x-rw/decisionTree/tree/master/node_app

La estructura de mi proyecto es : introducir la descripción de la imagen aquí

Me confunde demasiado la estructura, ¿deberían existir dos archivos package.json y dos carpetas node_modules?

2
  • Hola, deberias tener un archivo package.json en el raiz solamente, en el puedes configurar los script a ejecutar por ejemplo : { "name": "ejemplo", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "run": "gulp && node backend.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { }, "dependencies": {} Commented el 26 nov. 2017 a las 15:10
  • 1
    @FacundoFernandez puedes publicar tu respuesta porfavor!!! creo que mi pregunta es extensa para un simple comentario Commented el 26 nov. 2017 a las 16:01

2 respuestas 2

4
+200

¿Cómo puedo hacer correr los 2 proyectos con un solo comando? creo que los dos deberían escuchar a 1 mismo puerto.

Pues la respuesta como en casi todos los casos es: depende. Toda aplicación tiene una estructura que se define cuando diseñamos la arquitectura de la aplicación. Por ejemplo, cuando el backend no tiene más comunicación que dar respuestas a los clientes, se suele encapsularlo en una API. Por el contrario, si se mantienen sesiones y cualquier tipo de comunicación en donde se mantenga un estado, es conveniente realizar una sola aplicación.

En tu caso, lo que tienes que hacer es definir las funcionalidades de cada parte. Cuando se usan frameworks/bibliotecas como , , y relacionados, la comunicación con el backend se basa en peticiones AJAX, las cuales no mantienen ningún tipo de estado. En estos casos, generalmente hablamos de consumir APIs y se separa el sistema en tipos de clientes. Por ejemplo, si la idea es que hayan clientes escritorio, webs y móviles es conveniente separarlos en aplicaciones particulares en donde todos los clientes tienen funcionalidades específicas y se comunican con el API para realizar las operaciones que necesiten.

Yendo a tu caso en específico, si no habrán más clientes, no veo problema en ponerlo todo junto. El primer punto es que estás usando un dev server con Gulp: no hagas ésto, no es de utilidad en producción. Como segundo punto, estructura bien tu aplicación.


Estructura de la aplicación

Una aplicación con una estructura estándar, por lo general, es la siguiente:

src/
  routes/
  controllers/
  middlewares/
  views/
  helpers/
  config/
  ui/
    [ aquí va el contenido de tu frontend ]
    index.js

De esta manera encapsulas la parte frontend en un solo directorio y tu bundler operará sobre él, ignorando el resto de directorios que pertenecen al backend.

Generación del bundle

En este paso se utilizará el bundler de tu preferencia para generar el archivo JavaScript compilado. Nota que esto es necesario solo si usas ES6+ como es habitual en React, de lo contrario, no necesitas un bundler como Gulp o Webpack.

var gulp = require('gulp');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var plumber = require('gulp-plumber');

gulp.task('app', function() {
    return gulp.src(['src/ui/**/app.js', 'src/ui/**/*.module.js', 'src/ui/**/*.js'])
        .pipe(plumber())
            .pipe(concat('app.js', {newLine: ';'}))
            .pipe(ngAnnotate({add: true}))
        .pipe(plumber.stop())
        .pipe(gulp.dest('public/js/bundle.min.js'));
});

La tarea anterior de Gulp recorrerá todo el directorio src/ui y generará un bundle que no es más que todo el código junto y minificado listo para usar. En el index.html solo debes referenciar al bundle:

<script defer src="/js/bundle.min.js"></script>

Ejecución

Una aplicación por lo general es una SPA. Dicho esto, este tipo de aplicaciones se caracterica por tener un único punto de entrada en el cual se inyectará el código JavaScript para tener las rutas del lado cliente. Lo que necesitas es poner una ruta global que sea ajena a las rutas del backend:

app
  .use('/api', apiRoutes)
  // indica que cualquier ruta que no sean las rutas /api/xxx renderizará el index.html
  .use('*', (req, res) => {
    // asumiendo que index.html está dentro de src/views/
    const path = join(__dirname, 'views', 'index.html');
    res.type('html');
    res.sendFile(path); // envía el index.html
  });

Es importante que el wildcard vaya siempre luego de las rutas del backend, de lo contrario siempre obtendrás el HTML.

Despliegue

En caso quieras poner tu aplicación a correr por tiempo indefinido, puedes crear un demonio y ponerlo a correr. Para esto puedes apoyarte en PM2. Ese utilitario te permite crear demonios y ponerlos a correr por tiempo indefinido, puedes pararlos o reiniciarlos así como ponerlos en modo escucha, útil si usas git y actualizas tu aplicación por medio de git pull.

El archivo de configuración de PM2 es un JSON como el siguiente:

{
  "apps": [
    {
      "name": "nombre-del-proceso",
      "script": "./src/index.js", // archivo principal del proyecto
      "watch": true, // modo escucha true|false
      // puedes usar un puerto y añadir variables al path de acuerdo al entorno
      "env": {
        "PORT": 5000,
        "NODE_ENV": "development"
      },
      "env_production": {
        "PORT": 8000,
        "NODE_ENV": "production"
      }
    }
  ]
}

Para crear el demonio solo debes ejecutar:

pm2 start nombredelarchivo.json

Puedes ver los comandos y configuración disponible en la documentación de PM2.

2
  • hay un avance en mi git puedes revisarlo Commented el 29 nov. 2017 a las 1:30
  • el avance que hay en mi git es muy parecido a tu respuesta, solamente que deseaba trabajar por carpetas, es decir cada carpeta deberia ser 1 componente, con su controller, html Commented el 29 nov. 2017 a las 8:17
2

La solucion a tu problema es muy simple. Express tiene un middleware para servir recursos estáticos que puedes utilizar para poner tu aplicación en el mismo servidor de tu API.

Para eso es recomendable primero que hagas un build que dependerá mucho de como creaste tu proyecto pero que consiste basicamente en concatenar y minificar tus ficheros scripts, de estilos y convertir tus plantillas a código javascript. Ya usas gulp y en tu proyecto hay una tarea que viene configurada para eso. Puedes ejecutar npm run build o gulp build

Luego que tengas todos los ficheros html, js y css propiamente generados, creas una carpeta en tu server y los copias para ahí exactamente con la misma estructura con la que fueron generados.

En el código de inicio de tu api escribes algo como esto

app.use(express.static('app'))

Yo utilizé app como el nombre de la carpeta desde la cual servir la aplicación cliente pero el nombre de esta puede ser cualquiera.

La otra alternativa que puedes usar es configurar un proxy inverso, sirviendo ambas aplicaciones por separado y reenviando todas las solicitudes a la que corresponda pero esta solución es demasiado amplia y compleja por lo que sólo te recomiendo que la intentes luego que hayas logrado la primera opción. Esta si te podría servir para testear tu aplicación incluso en modo development sin hacerle build.

Como nota aparte, una aplicacion de node puede tener muchos package.json. Todo depende de su propósito ya que este se usa por lo general para señalizar modulos o aplicaciones independientes. Frameworks como lerna se usan para mantener monorepos que usan ficheros package.json independientes (generalmente con su correspondiente node_modules) para manejar cada módulo independiente dentro de un mismo proyecto. Es importante que entiendas que la manera de organizar la estructura de tu proyecto es independiente de la forma en la que lo sirves en la web. Esta última es la que determinará la cantidad de servidores y/o puertos que deberas usar para un único proposito. Tener muchos servidores no es malo porque te ayuda a escalar tu aplicación. Creo que en tu caso es un error humano pues por el aspecto parece que el código del cliente se copió dentro del servidor tal cual estaba sin hacer un build.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.