Run a script with ng server Angular 6 - node.js

Question

I need to run a script every time I use the ng serve command, I'm preparing I server to receive POST from an API. My question is if when I run firebase deploy from the /dist folder, it will start this server so I get POST from an API in my application.
Below is the file I need to run via localhost with command ng serve within Firebase Hosting when running firebase deploy command.
In my angular.json file I tried as follows:
"assets": [
"src/favicon.ico",
"src/assets",
"src/server-api/server.js"
],
At the moment I'm only able to execute by setting a script through package.json.
"scripts": {
"app-main": "ng build && node ./server-api/server.js",
}
server.js:
// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
// Get our API routes
const api = require('./routes/api');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3000';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
api.js:
const express = require('express');
const router = express.Router();
const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
firebase.initializeApp({
apiKey: "myapikey",
authDomain: "myapp-30d6b.firebaseapp.com",
projectId: "myapp-30d6b",
});
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();
router.post('/notifications', (req, res) => {
res.status(201).json({
notification: req.body
});
db.collection("notifications").add(req.body)
.then(function (docRef) {
console.log("Success: ", docRef.id);
})
.catch(function (error) {
console.error("Error", error);
});
});
module.exports = router;
package.json:
{
"name": "myapp",
"version": "1.0.0",
"scripts": {
"app-main": "ng build && node server.js",
"ng": "ng",
"start": "ng serve --open",
"start-hmr": "ng serve --configuration hmr -sm=false",
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
"build": "node --max_old_space_size=6144 ./node_modules/#angular/cli/bin/ng build --dev",
"build-stats": "node --max_old_space_size=6144 ./node_modules/#angular/cli/bin/ng build --dev --stats-json",
"build-prod": "node --max_old_space_size=6144 ./node_modules/#angular/cli/bin/ng build --prod",
"build-prod-stats": "node --max_old_space_size=6144 ./node_modules/#angular/cli/bin/ng build --prod --stats-json",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"#agm/core": "1.0.0-beta.2",
"#angular/animations": "6.0.0",
"#angular/cdk": "6.0.1",
"#angular/common": "6.0.0",
"#angular/compiler": "6.0.0",
"#angular/core": "6.0.0",
"#angular/flex-layout": "6.0.0-beta.15",
"#angular/forms": "6.0.0",
"#angular/http": "6.0.0",
"#angular/material": "6.0.1",
"#angular/material-moment-adapter": "6.0.1",
"#angular/platform-browser": "6.0.0",
"#angular/platform-browser-dynamic": "6.0.0",
"#angular/router": "6.0.0",
"#ngrx/effects": "6.0.0-beta.1",
"#ngrx/router-store": "6.0.0-beta.1",
"#ngrx/store": "6.0.0-beta.1",
"#ngrx/store-devtools": "6.0.0-beta.1",
"#ngx-translate/core": "10.0.1",
"#swimlane/ngx-charts": "8.0.0",
"#swimlane/ngx-datatable": "12.0.0",
"#swimlane/ngx-dnd": "4.0.0",
"#types/prismjs": "1.9.0",
"angular-calendar": "0.24.0",
"angular-in-memory-web-api": "0.6.0",
"angularfire2": "5.0.0-rc.9",
"body-parser": "1.18.3",
"chart.js": "2.7.2",
"classlist.js": "1.1.20150312",
"core-js": "2.5.6",
"creditcard.js": "2.1.3",
"d3": "5.2.0",
"express": "4.16.3",
"firebase": "5.0.3",
"firebase-admin": "5.12.1",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"lodash": "4.17.10",
"moment": "2.22.1",
"ng2-charts": "1.6.0",
"ng2-currency-mask": "5.3.1",
"ngrx-store-freeze": "0.2.2",
"ngx-color-picker": "6.0.0",
"ngx-cookie-service": "1.0.10",
"ngx-mask": "2.7.3",
"ngx-toastr": "8.6.0",
"perfect-scrollbar": "1.3.0",
"prismjs": "1.14.0",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"typescript": "2.7.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.6.0",
"#angular/cli": "6.0.3",
"#angular/compiler-cli": "6.0.0",
"#angular/language-service": "6.0.0",
"#angularclass/hmr": "2.1.3",
"#types/jasmine": "2.8.7",
"#types/jasminewd2": "2.0.3",
"#types/lodash": "4.14.108",
"#types/node": "8.9.5",
"codelyzer": "4.2.1",
"jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.3.1",
"ts-node": "5.0.1",
"tslint": "5.9.1",
"webpack-bundle-analyzer": "2.11.1"
}
}
The solution I'm looking for:
I need it to work when I run ng serve or else when my application is hosted on Firebase Hosting through the firebase deploy command.
That way I can receive POST in my Angular application.

Answer 1

you can use the pre/post hooks for npm explained here:
http://www.marcusoft.net/2015/08/pre-and-post-hooks-for-npm-scripting.html#hooks-pre-and-post
try adding these 2 scripts to your package.json and then run npm run server:dev
"preserver:dev": "node ./server-api/server.js",
"server:dev": "ng serve --configuration=dev",