I am deploying a Vue client using Vue-cli 3, which uses Webpack
(I can start the client by calling "yarn dev --open")
I am also writing a server with an API for the client
(I can start the server by calling "node server/server.js")
Is there a way to start both the client and the server with one command?
I was thinking that I should add some code to vue.config.js to start the server before the client is being compiled.
Preferably this would all work in a hot-reload way.
So far I tried a shell script as Alex78191 suggested:
#!/usr/bin/env bash
node server/server.js &
yarn dev --open
This works, but when I try to stop the servers using ctrl-C, only the yarn-process stops, but the node server keeps on running.
Is there a way in bash to stop all started processes (background and foreground) with the ctrl-C command?
I was able to get this working with the following bash script:
#!/usr/bin/env bash
node server/server.js &
pid=$!
yarn dev --open
trap "kill ${pid}; exit 1" INT
This script is a little bit more complex than you might expect to make sure that all child processes stop when this script stops (using ctrl-C). For more information on stopping child processes I found some help here: how-can-bash-script-do-the-equivalent-of-ctrl-c-to-a-background-task
Related
I've created a slack bot that I want to deploy with vercel and I keep getting the error:
Error: Command "npm run build" exited with 1
when running vercel deploy.
In my package.json file I have:
"build": "next build"
which is obviously incorrect as it throws this error.
The vercel docs suggest (https://vercel.com/docs/errors#error-list/missing-build-script)
"scripts": {
"build": "[my-framework] build --output public"
so my question is, what is actually expected in here in order to make this work?
I would really appreciate some help getting the project up and running so I can use it on slack. It works locally just fine, but can't get it up and running without me starting it locally.
Here is the repo: https://github.com/Chaffexd/weds-slack-bot
The correct build script for a nextjs app is next build.
Your script currently has npm run-script build.
Which is actually the equivalent of telling it to run itself over and over, it's self referencing.
Also, as an aside, your app is not going to work on Vercel. Vercel is a serverless environment, meaning long running applications like the one you have written that is continually listening on a port (I imagine when you run it locally it hangs for input) are not supported. You should refactor your app to respond to requests, which can trigger your function.
A good way of building this app on Vercel with NextJS might be to use the NextJS API folder for your application code, and then find a free CRON runner to repeatedly hit that function endpoint every day.
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
I have an NPM script that runs and ultimately generates a file in the repo.
How do I go about configuring the debugger to run it so that I am able to do such things as break inside/step thru its code after I run it on the command line.
If you like to start your script in command line and not from the IDE, you need using NodeJS Remote Debug run configuration:
modify your NPM script to make sure that your Node.js app is run with debugger, like:
"scripts": {
"start": "node --debug-brk=5858 build/app.js"
}
create NodeJS Remote Debug run configuration, specify 5858 as a Port there
run npm start in console, start the debugger in the IDE
in my package.json I am using
"scripts": {
"start": "node app.js"
},
but if I use nodemon replace with node app.js like
"scripts": {
"start": "nodemon app.js"
},
then what will happen? Because when I got any error at server side, other API also close working. So I think it happen because I use node app.js if I use nodemon app.js than server will restart or not.
When you develop a node app and you make some changes, to see them in effect you have to restart the server.
When you launch your node.js application with Nodemon it will monitor for any changes and automatically restart the server, improving your productivity.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development. Install it using npm.
npm install -g nodemon
How to use nodemon?
nodemon "filename" ignore the quotation and place name of the server file.
Nodemon:
monitors for any changes in your Node.js application
automatically restarts the server,
saving time and tedious work.
it's one way to make your development efficient with Opn:
Opn is a dependency that opens web browser links, files, and executables. We will be using Opn to automatically open a web browser to our local host every time our server restarts.Install with npm
npm install opn.
How to use node?
node "filename" ignore the quotation and place the filename (ex app.js ,server.js)
node:
no automatic restart the server every time you do the tedious work
no monitors for any change
nodemon is like a live-server for your node application. any changes made in your node application will get reflected as server will restart again.
as stated here :
nodemon will watch the files in the directory in which nodemon was
started, and if any files change, nodemon will automatically restart
your node application.
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
To use nodemon, replace the word node on the command line when executing your script.
In terminal,instead of typing node app.js,you can type: npm start
In package.json file,you can change it to:
"scripts": {
"start": "nodemon app.js"
},
In short,it is like a live server for node js, like we have in HTML & CSS.
When you are using node you have to restart on your own to see the changes you made But nodemon watches the particular path for any changes.If you make any changes in your file, nodemon will restart it for you.
when we install node, we will get automatically node and npm global variable.
for using nodemon you need to install it
npm install -g nodemon
we can access files with node as well but each time when we do changes we need to stop server and restart it.
node "filename" // provide filename
but if we accessing file with nodemon you no need to stop server and restart it only one line of command will save restart server time
nodemon "filename" // provide filename
this one line helps you saving lot of development time and test your sample javascript code
Nodemon stands for Node Monitor.
When you run a server using the command node index.js, after every change in your code you have to again run the node index.js command and reload the page to see the changes. Nodemon solves this problem for you. It auto-updates the server for you.
I tried express-livereload, but it just reloaded view files.
Should I use another tool, or this one can be configured to watch for my index.js file which runs the server?
I read that options are the same as node-livereload, and default for watched files include .js files.
Any URL you know with a simple configuration?
My main problem is how to setup good development environment for Express.js, and I would like to inspect the variables when I am making a request, is painful to restart each time I make a change in a route.
PS I tried node-inspector to inspect variables when server handles a request, but it seems node-inspector is not intended for that, right?
I think Nodemon has what you're looking for.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
Example invocation:
nodemon index.js
I use express.js, normally start server by
npm start
with Nodemon installed, I use
nodemon --exec npm start
Note: nodemon app.js will NOT work here,
because express.js use start script
To install nodemon
npm install -g nodemon
You can livereload both front and backend changes to the browser using 'livereload', 'connect-livereload', and 'nodemon'. Also, this way you don't need Gulp or Grunt. Here's how they work together:
livereload opens a high port and notifies the browser of any changed file
connect-livereload monkey patches every served HTML page with a JavaScript snippet that connects to this high port
nodemon restarts the server on any changed backend file
Set up livereload in Express
Set up Express to both start livereload server watching the public directory and ping the browser during nodemon-induced restart:
const livereload = require("livereload");
const connectLivereload = require("connect-livereload");
// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));
// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
setTimeout(() => {
liveReloadServer.refresh("/");
}, 100);
});
const app = express();
// monkey patch every served HTML so they know of changes
app.use(connectLivereload());
Start Express with Nodemon
Start the server with nodemon, for example, with a dedicated watch script by running npm run watch.
The key point here is to ignore the public directory that's already being watched by livereload. You can also configure files with non-default extensions, like pug and mustache, to be watched.
"scripts": {
"start": "node ./bin/www",
"watch": "nodemon --ext js,pug --ignore public"
},
You can read a longer explanation in "Refresh front and backend changes to browser with Express, LiveReload and Nodemon."
It might interest you to know that since the release of Node.js V18, Node.js can automatically restart a server upon making a change to the index.js file.
To use the feature, run the server with the following command:
node --watch index.js
Note: At the time of writing, the feature is still experimental.