Can I simultaneously execute nodemon and browser-sync using a single npm script for an Express application?

Within my Express application, I utilize both nodemon and browser-sync in conjunction. These npm scripts are included in my package.json:

  "scripts": {
    "start": "node ./bin/www",
    "start:nodemon": "nodemon ./bin/www",
    "start:debug": "SET DEBUG=img:* & npm run start:nodemon",
    "start:browser-sync": "browser-sync start --proxy 'localhost:3000' --files 'public,views'",
    "test": "npm run start:debug & npm run start:browser-sync"
  }

Currently, I open two separate cmd windows. In the first window, I execute start:debug, while in the second window I run start:browser-sync. This setup functions correctly.

I have pondered the idea of merging these scripts and triggering them simultaneously, similar to what is done in my test script. However, this approach does not yield the expected outcome. It appears to initiate nodemon but overlooks browser-sync. Is there a way to execute these two scripts together with a single npm script, or is it technically unfeasible, necessitating separate cmds for execution? Your insights are appreciated. Thank you.

javascriptexpressbrowser-syncnodemonnpm-scripts

Answer №1

One reason for this difference is the interpretation of the & symbol between commands. In Bash, it signifies executing the first command in the background and the second one in the foreground, while in Windows cmd it means executing the second command after the completion of the first.

If you want to run commands simultaneously in a platform-independent manner, you can utilize tools like npm-run-all:

{
  "scripts": {
    "start": "node  ./bin/www",
    "start:nodemon": "nodemon ./bin/www",
    "start:debug": "SET DEBUG=img:* & npm run start:nodemon",
    "start:browser-sync": " browser-sync start --proxy 'localhost:3000' --files 'public,views'",
    "test": "run-p start:debug start:browser-sync"
  }
}

Alternatively, you can experiment with run-z:

{
  "scripts": {
    "start": "node  ./bin/www",
    "start:nodemon": "nodemon ./bin/www",
    "start:debug": "SET DEBUG=img:* & npm run start:nodemon",
    "start:browser-sync": " browser-sync start --proxy 'localhost:3000' --files 'public,views'",
    "test": "run-z start:debug,start:browser-sync"
  }
}

The latter option can be utilized without the need for installation. Simply execute the following command:

npx run-z start:debug,start:browser-sync

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unallocated functions found within Web Sockets Objects

I am currently utilizing javascript (p5.js) in combination with node.js using express and socket.io. Within my code, I believe the issue lies within this specific section: for (var i = 0; i < 3; i ++){ for (var j = 0; j < 3; j ++){ ...

javascriptnode.jsexpresswebsocketsocket.io

Is nextJS SSR the optimal solution for handling undefined variables in the window object to enable optional chaining in cases where global variables are not supported?

When using (window?.innerHeight || 420) for server-side rendering (SSR), the translation would be (((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) || 420) However, this could result in a referenceError: window is not d ...

javascriptnext.js

Customizing AngularJS directives by setting CSS classes, including a default option if none are specified

I have designed a custom directive that generates an "upload button". This button is styled with bootstrap button CSS as shown below: <div class="btn btn-primary btn-upload" ng-click="openModal()"> <i class="fa fa-upload"></i> Upload & ...

javascriptangularjstwitter-bootstrap

What is the best way to alternate between two CSS stylesheets when using jQuery-UI?

Just getting started with jQuery and javascript and decided to test out 2 different jQuery-ui stylesheets in a simple .html file. The goal is to have the example dialog open with the "flick" stylesheet and the datepicker within the dialog open with the "u ...

javascriptjquerycssjquery-uistylesheet

What sets apart the <script> tag with a type attribute from the standard <script> tag in HTML?

Similar Question: Is it necessary to include type=“text/javascript” in SCRIPT tags? While working on my HTML project, I noticed that the JavaScript code within script tags is evaluated even if the type attribute is not explicitly set to "j ...

javascripthtml

What is the best way to sort search results using various criteria?

Currently, my search filter is only able to filter results based on the 'packageName' field. I now have a requirement to expand this filter to also include the 'dateStart' and 'dateFinish' fields. getters: { filteredPacks: ...

javascriptvue.jsvuex

Convert a String to JSON using either JavaScript or jQuery

Currently, I am developing a JavaScript animation script and I am aiming to allow individuals to define behavior declaratively within the HTML. This is the format I envision for my HTML: <div data-animation="top: 600, left: 600, opacity: 1, start: 0.2 ...

javascriptjqueryhtmljson

Encountering an error in AngularJS: Issue with require(...) function, along with a runtime error in Node

I have been working on a code similar to the one available here However, when I try to run node web.js, I encounter a TypeError: require(...) is not a function What could be causing this error? Where might the issue lie? Below is my current web.js set ...

javascriptnode.jsexpressheroku

JSTree Drag-and-Drop Feature Fails to Follow Return Command

Hey everyone, I could really use some assistance with a problem I'm facing. I am trying to populate a JStree with three different node types. Folder Project Job I have set up some rules for drag and drop functionality between these nodes: Folders ...

javascriptjqueryjstree

Remove search results in real-time

I'm currently working on implementing a search feature for a web application. While I have made some progress, I am facing an issue with removing items when the user backspaces so that the displayed items match the current search query or if the searc ...

javascriptajax

Generate a JSON object with multiple items using JavaScript

I need to create an object in this format: var query = {"filters":{"type":"OR","filters":[ {"type":"EQ","fieldName":"name", "value":"Point_1"}, {"type":"EQ","fieldName":"name", "value":"Point_2"}, {"type":"EQ","fieldName":"name", "value":"Point_3 ...

javascriptjson

Determine the type of element existing in the table cell

Currently, I am utilizing protractor to iterate through table cells in an attempt to verify the presence of a checked checkbox. var elements = element.all(by.css(columncssname)); elements.each(function (cell, index) { <--need to confirm if check ...

javascriptangularjsseleniumjasmineprotractor

Can you explain how this promise functions within the context of the mutation observer, even without an argument?

Recently, I came across a mutation observer in some TypeScript code that has left me puzzled. This particular implementation of a promise within the mutation observer seems unconventional to me: const observer = new MutationObserver((mutations: MutationR ...

javascripttypescriptpromisemutation-observersthenable

Displaying JavaScript array contents in an HTML page without using the .innerHTML property

As someone new to the world of JavaScript and web development, I find myself faced with a challenge. I want to showcase the contents of two different JavaScript arrays in an HTML format. However, my research has led me to believe that utilizing .innerHTML ...

javascriptjqueryhtmlarrays

Tracking the latency of WebSockets communications

We are in the process of developing a web application that is highly responsive to latency and utilizes websockets (or a Flash fallback) for message transmission to the server. While there is a fantastic tool known as Yahoo Boomerang for measuring bandwidt ...

javascriptperformance

Vue js: Automatically assign alternate text to images that are not found

Currently, I am in the process of developing a website that features a variety of products, each with its own unique image. For binding the image URL to the source attribute, I use the following code snippet: <img :src="product.ImageUrl"/> In case ...

javascriptvue.jsvuejs2

Troubleshooting Issue with Query Functionality in MEAN App's Find Request

I'm facing some challenges while working with queries in my MEAN App. Specifically, I am attempting to retrieve data that matches the input entered into a search field: $scope.searchInput = function(search){ $http({ method: 'GET', url: ...

javascriptrestexpressmean-stackmeanjs

Angular does not recognize the function element.sortable

I'm attempting to utilize ui.sortable in order to create a sortable list. Despite following the instructions provided at https://github.com/angular-ui/ui-sortable, I am still encountering an issue and receiving the following error message: TypeError: ...

javascriptjqueryangularjsspringjquery-ui

Inability to utilize a session that has expired is a limitation when using MongoDB and Express together

Encountering this issue MongoExpiredSessionError: Cannot use a session that has ended. Despite implementing suggestions to utilize the await keyword in similar cases, my code already includes it for all database functions. The server and client (React) a ...

node.jsreactjsmongodbexpressproxy

AJAX jQuery requests can flatten arrays when they are sent

The below code shows an endpoint written in Express, using the body-parser middleware. app.post("/api/poll/new",api.NewPoll); api.NewPoll = function(req,res){ if(!req.body) return res.status(400).send("MISSING BODY"); console.log(req.body,typeof(r ...

javascriptjqueryajaxexpress