Develop Reference

Run webpack dev server while using angular cli serve script

I'm new to angular cli and webpack. In my project I have a webpack config file which among other configurations, it indicates that a merge file plugin (MergeJsonWebpackPlugin) should run for merging certain files and putting them on an output file somewhere else.
My problem is that when running webpack this is done, but those output files are stored somewhere in virtual memory. For what I've read, this is the normal behavior until you properly build you app for production in which case those outfile will be written in disk.
My app of course, tries to find those output files on the assets folder for using them inside the app itself. I've used another plugin (WriteFilePlugin) so as to been able to write the files in disk while running the webpack dev server, and this works great.
Now, For been able to handle this now I have a dedicated angular cli script in my package.json file
....
"scripts": {
"ng": "ng",
"start": "ng serve --port 9978",
"build": "ng build",
....
"custom": "webpack-dev-server --inline --progress --colors"
}
...
So, I have to run "npm custom" in order to have my files written in disk. Then I have to run "npm start" to serve my application and use those files. If for some reason I update my source files which should be merged, then I have to stop my start script and run the custom script for the webpack dev server all over again
Is there a way to include this automatically when running the start script via angular cli?
I've been reading that when you run "ng serve" what happens behind the scenes is:
Angular CLI loads its configuration from .angular-cli.json
Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
Angular CLI starts Webpack dev server to preview the result on localhost:4200.
...because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.
On point 3 I would expect my merged files to be generated and store inside the assets folder but this is not happening (as it does when running "npm custom"), neither the update of this merged files whenever I update them.
Am I missing something? Would this be possible to do? Thanks in advance!

Run script after node server starts

We have an application that has the following three scripts inside package.json...
"start": "concurrently --kill-others \"npm run start-electron\" \"npm run start-webpack\" -n \"electron,webpack\" -p name",
"start-electron": "electron -r babel-register ./js-file",
"start-webpack": "node -r babel-register scripts/js-file-2.js"
When we run npm start, both start-electron and start-webpack scripts are called. We are using Concurrently to run both scripts at the same time.
There is a major issue. When we start the Webpack script, it makes a HTTP request to the Node server. Because these two scripts are running concurrently, we can't guarantee the Node server will be running when we run the Webpack script.
Here's my question. How can I run the Webpack script as soon as the Node server starts and avoid this race condition?

Do they really need to run next to each other? Any chance that you could create a node program that launches electron, and either checks if it's running or waits a certain amount of time before running the webpack command?
As an idea you could implement something like this:
Create a nodejs program that reads an argument that has the server target address,
start electron and create head request to the given url,
once it's running, launch webpack.
I guess both commands stay alive (webpack is probably watching files, electron manages the server).
You could check into integrations between electron and webpack, for example, this one

nodejs bootstrap project works local only

Ive been trying out different things, and looking up various ways to solve it, but I'm in need of some extra hints to make this work.
I have a working NodeJS Bootstrap project with Gulp. My website functions locally.
So in my project I have the fiollowing files (among other folders) :
gulpfile.js
index.html
package.json
When I locally run my project via 'gulp dev' everything seems perfect. On Heroku after deploying it gives me the error: npm ERR! missing script: start
This makes sense, because indeed my package.json doesn't have a start script. How can this work on local?
any leads?
thanks

node.js file
name it index.js
first before you start move all the current files into a new folder called public in the parent folder above public create the file index.js
once you are in the parent folder above public run this in the command line for the directory where you created the index.js file
npm i express --save
this will install a mini framework for node.js and save it to the project.json config
for the index.js file this is the content
/// START
var express = require('express');
var path = require('path')
var app = express();
var port = process.env.PORT || 80;
// this allows the files to be visible without having to type in the
// index.html for the url simply do / and you'll get the url
app.use(express.static(path.join(__dirname, 'public'),{
extensions: ['html']}
));
app.listen(port);
///END
you need to make sure that the index.js (node file) is in 1 folder above the rest of the project. The project should be in a folder called public in this case
before you upload this to the heroku get it working on your local machine
you need to run node index.js if you get any errors we can work through them but this is a really generic static serving node.js server.
last thing you need to do is go into the project.json file and add the following you can add it right above "title" in this case so it's easy to find later
"scripts": {
"start": "node index.js"
}

If the code is client-side, you should serve up the bundled HTML/CSS/JS in a static server. Doesn't make sense to run node just to serve up your static assets.

Ive never used heroku but for my node application that is hosted in AWS i had to add a start script to my package.json
"scripts": {
"start": "set NODE_ENV=production nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
You can use similar node start commands if youre not using nodemon.

Angular Full Stack Example on github

I am trying to understand the example of Angular full stack project but I am not able to do so!
The project is here:
https://github.com/DavideViolante/Angular-Full-Stack
in the package.json, you can find a "dev" script to test locally the app. the command is the following:
concurrently \"mongod\" \"ng serve -pc proxy.conf.json --open\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"
I don't understand why ng serve is called and app.js also. I mean ng serve create a static file server and there is also a static file server with Express. So launching that starts two servers. What's the point?

Here is a breakdown of all command
concurrently -- runs all command simultaneoulsy
\"mongod\" -- To Start MongoDB server
\"ng serve -pc proxy.conf.json --open\" -- To serve angular stuff
\"tsc -w -p server\" -- run the compiler in watch mode and compile project
\"nodemon dist/server/app.js\" -- to run your server side project

I don't know this project but the app.js normally is for the back-end and the ng serve is for serving an angular project in your development environment.
I hope this help.

How to make node.js automatically execute commands when I run the server?

for example I am constantly having to write:
"node app.js &" to start the server and then writing this manually afterwards:
"watchify main.js -o bundle.js -v" to start the watchify script
is there a way I can execute that automatically? and other lines after that so I dont have to keep manually typing/copy and pasting the lines individually everytime I run my server

Add a scripts section to your package.json file.
Then call npm run <ScriptName>
if you're looking for bash specific example, the following will do the trick:
...
"scripts": {
"run-and-watch": "node app.js & watchify main.js -o bundle.js -v"
}
...
npm run run-and-watch
If you want a cross-platform option, there are npm modules such as concurrently and npm-run-all that should help you out.