¿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 angularjs, reactjs, vue.js 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 angularjs 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.