Claro que puedes integrar el "frontend" y el "backend" dentro de un mismo proyecto, dado al final el "frontend" se terminará sirviendo a través de un servidor http (backend).
Para explicar esto me basaré en el framework de Express en el backend, ya que no lo mencionas.
Solo hay que hacer build del proyecto (npm run build
), lo cual nos generará el código de producción en una carpeta llamada dist
, re-nombraremos esa carpeta a public y configuraremos el servidor para que tome esa carpeta como un directorio de archivos estáticos, para lo cual utilizaremos la función de express “static”.
Solo te recomendaría que definas las rutas de tu servidor iniciando con '/api/' para no confundirlas con alguna ruta de archivos estáticos, por ejemplo: 'http://.../api/users'.
Tomando en cuenta lo anterior tu archivo “server.js” deberá lucir como el siguiente código:
/**
* REST API
*/
// Dependecies
const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');
// Initialize http server
const app = express();
// Middleware
app.use(history()); // Colocamos este middleware cuando estamos usando el BrowserRouter
app.use('/', express.static(path.join(__dirname, '/public/')));
// Routes
// test route
app.get('/api/test', (req, res, next) => {
try {
res.status(200).send('hello world');
} catch (err) {
next(err);
}
});
// start the server
app.listen(process.env.PORT || 3000, () => {
console.log('server on port', process.env.PORT || 3000);
});