WebStorm debug mode for Meteor npm script - node.js

In WebStorm if I add run configuration as "Meteor" app then debugging works fine.
Recently we moved to use NPM script npm start to start our app. This helped us to reduce sending settings of WebStorm run config to other team members.
When I start NPM script in debug mode in WebStorm, then it doesn't hit the breakpoint. I want to know should I do some kind of change in 'run config' so that WebStorm knows that it should run Meteor debugger.
Here is my run script in package.json
{
"scripts": {
"start": "MONGO_URL=mongodb://localhost/db meteor --settings private/settings.json",
},
}

meteor can only be debugged via Meteor run configuration; there is no way to debug it through NPM script.
You can specify environment variables and pass settings to Meteor right in your configuration

Related

Node.js is causing error: Missing script: "start"?

I just started studying front-end development and I'm struggling with a node.js error.
Typing 'npm start' in my VSCode terminal used to work fine for simple tutorial projects with just an index.html, script.js, and style.css file. (without a package.json file)
However after trying out React for the first time, 'npm start' now doesn't work anymore in my other non-React projects. At first it was giving me an error that it was missing the package.json (which it didn't need before?) but after trying to fix it with help of googling I now got to a point where it's giving me the error: Missing script: "start".
How can I run node without creating package.json files for every small tutorial project I've made previously, or without turning them into React apps? Also why is this happening? Did installing React-native create dependencies of some sort?
Thanks in advance!
I already tried reinstalling node.js and tried different versions. Also tried deleting package-lock.json. It still works for React apps, just not with simpler native javascript apps.
A package.json file is required if you want to install any packages or run scripts in your terminal. In your package.json file, make sure you have added scripts property. This is an example of how you can use it:
{
...
"scripts": {
"start": "react-scripts start"
}
}
Remove ... from the snippet if you're copying, this has been added to indicate that there are one or more fields in this JSON file.
After you have added this to your package file, you will be able to run the start script by typing npm run start in the terminal or if you use Yarn: yarn start.
Edit:
You said that running npm start in your React project is running fine, but on your simpler projects with only a simple HTML, CSS and JS file is not working when using the script.
You are probably confusing npm start with node file.js. Where node file.js doesn't require a package to be in your project to run a JavaScript file, using npm start requires you to have a JSON file present in your project folder with the JSON code as in my answer.
So long story short: Using npm start requires package.json with the script property available. While node file.js doesn't require you to have this file in your project.
if you are using react-native you can do the following
First you have to build your project with the command
npx react-native run-android , npx react-native run-ios
Once your project has build successfully and app is installed on your device then you your development server is started already. for some reason if your server is closed then you can run it with the command given below.
adb reverse tcp:8081 tcp:8081 this will send a signal to your device and after this run npx react-native start

how does custom npm scripts works in my code?

I'm reading node js code wherein package.json I found the following script
scripts: {
start : 'some-dependency start'
}
So, when I run npm run start it's actually starting my application with a web server, serving static files in my project.
My question is how some-dependency start running? what it can do? how it can serve my static files. I see internally some-dependency using react-scripts. But I can't wrap my head around how all these things working.
react-scripts is a package that comes in built with create-react-app when you run npm run start it executes a script/program that is wrapped in react-scripts package you can see the script for start command here, in that you can see that the script invokes the webpack-dev-server which serves the bundled javascript on a server
Generally when you execute some script through package.json file the same happens, you need to specify a command/ invoke a script
for example consider following script present in package.json file
script: {
"development": " cd client/ && NODE_ENV=development webpack -w --config webpack.dev.config.js"
}
In the above example when you run npm run development the following things happen
changes the directory to client
Node environment is set to development
invokes the webpack with the config file webpack.dev.config.js present in the client directory
It executes what ever that is written in the config file
Feel free to ask doubts if any

Nodemon aequivalent to npm run dev

I've just started using the whole javascript and node.js environment. To start an existing project I run three commands
npm install, npm run all and finally npm run dev to start the application in my browser.
Now, whenever I update the code I stop the current running dev via Ctrl+C, press arrow up key to get npm run dev in my terminal again and hit Enter. I believe there is a better way of doing this repetitive task, like Nodemon.
But, what is the aequivalent command for that, so that the updates I make in the code automatically become visible in the browser?
I have three files which do not work with nodeman: package.json, Gruntfile.js, app/index.js. Moreover, I tried nodemon --exec npm run dev which permanently does sth, but does not start my application.
Do you have any suggestions?
Yes, I would look at the --exec flag on nodemon. You could do something like:
nodemon --exec npm run dev
This will run npm run dev every time a source file changes. Read the nodemon NPM page to get a better idea of how to use it.

React with Express application using "pm2 start" always shows status as errored

I have a React app with Node as the server and I am writing my code in ES6 and transpiled using babel. I am using Windows OS. I was using NodeMon for watching changes it worked fine in development. I am making a production configuration for the app and thought of using PM2 for both dev and prod.
Below is the script in my package.json,
"scripts": {
"dev": "pm2 start --watch --interpreter babel-node src/server/server.js --name appDev",
...
"prod": "pm2 start build/server/server.js -i max --name appProd"
}
I have ES6 code in my src folder and transpiled ES5 code in build folder. "prod" command works fine if I remove "-i max" [infinite command prompts started opening up with "-i max". Hope it will be fine in server after deployment].
Now the problem is, "dev" script is always resulting in "errored" status and when I check status error logs are empty.
ANy idea what's going on? I will run NodeMon in dev and PM2 in prod for now but why PM2 has issue with ES6 and --interpreter babel-node?
Update:
I have tried --interpreter babel-cli after installing globally, it failed with an error [PM2][ERROR] Interpreter babel-cli does not seem to be available. I have babel-cli globally and locally.
Even pm2 start app.js --interpreter ./node_modules/.bin/babel-node didn't work.
I had issues deploying with the latest (12.16.2) version of node. I was having issues with ES6 and imports. I understand there are more complex solutions that can solve that issue, but backing up to node 12.4.0 solved that issue for me. NOTE: Node 12.4.0 is an earlier release than 12.16.2. I picked version 12.4.0 because that is what Digital Oceans "Node" servers are initialized with. I figured that their server guys probably know far more about it than I, and just decided to cheat off their test, so to speak.
I am having no issues with 12.4.0, and you can easily download an earlier version off of the node website. If you plan to install it on a Linux server, I would recommend using nvm. I had used nvm to go back to 12.4.0, and still had issues (I am sorry I forget specifics). I just redid the server from a fresh image with plain Ubuntu 18.04 LTS and am good on that at this time. Even with the local Windows install of node that I use to develop, I had to do a full uninstall and a clean install to avoid issues. Highly recommend this route if able.
Good luck.

Create WebStorm run configurations from package.json "scripts" section

In my package.json file, I have the following "scripts" configuration.
...
"scripts": {
"start": "watchify -o lib/index.js -v -d .",
"build": "browserify . | uglifyjs -cm > lib/index.js",
"test": "jest"
}
...
This allows me to run npm start, npm build and npm test from the command line.
This is great! But ideally, I would like to be able to run those tasks from within WebStorm using run configurations, due to how convenient the interface is. I have not been able to figure out how to do this.
Is there a way to create my own custom run configurations or automatically generate them from my package.json?
you can use Node.js Run configuration for this. For example, for 'npm start':
Working dir: /path/to/your/package.json
JavaScript file: /path/to/global/node_modules/npm/bin/npm-cli.js
Application parameters: run start
To find the global node_modules path from the command line use "npm root -g".
There is no way to auto-create run configurations from files. And the only way to create your own run configuration is developing a plugin - see http://confluence.jetbrains.com/display/IDEADEV/Run+Configurations
Update: since 2016.x, WebStorm provides a special run configuration - npm - for running/debugging NPM scripts. It can be created manually via Edit configurations... dialog, or auto-added by selecting the script in NPM tool window (can be opened from package.json right-click menu).
See https://www.jetbrains.com/help/webstorm/2017.3/running-npm-scripts.html
WebStorm and IntelliJ 2016 included support for NPM scripts as part of the NodeJS plugin.
Scripts are launched in four ways:
From a tree of scripts in the dedicated NPM Tool Window. The tool window opens when you invoke npm by choosing Show npm Scripts on the context menu of a package.json in the Project tool window or of a package.json opened in the editor.
According to a dedicated run configuration, see Run/Debug Configuration: NPM.
Automatically, as a start-up task.
As a before-launch task, from another run configuration.
For more details check out their documentation.

Resources