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
Related
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
I have installed vite in my vue.js app. I start the app by typing npm run dev in the main project directory. In the package.json this is defined as:
"dev": "vite"
but if I try do run this command (or eg. vite build) 'manually' from main directory, I get an error:
bash: vite: command not found
I also figured out that when I set a new script:
"build": "vite build"
I can run this command also, although, again, running it manually will result in error as above.
This seems quite illogical to me. Can anybody explain how is it possible?
If you didn't install vite globally (using npm install -g), then the vite command will be in node_modules/.bin in your main directory. The npm run command temporarily adds that folder to your PATH so it can execute that command. Try running ./node_modules/.bin/vite to run it without npm.
I am a beginner in web development. These two confuse me. If they both open up a page in localhost then why do I need to install http-server instead of just using npm start?
npm start runs whatever command is specified in the "start" script in your package.json. From the npm docs:
This runs an arbitrary command specified in the package's "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.
https://docs.npmjs.com/cli/v6/commands/npm-start
So if your package.json contains the following:
{
"scripts": {
"start": "echo Hello"
}
}
Then running npm start will print "Hello". The npm start script is not an executable itself; it just runs whatever is specified in your package.json.
http-server on the other hand is a specific executable that starts an HTTP server. It may refer to the http-server npm package, or a different script with that name available in your command line interface.
npm start is a convention often used by other tools, e.g. testing or continuous integration, to "start up" your app regardless of what technology it is using. A common set up would be to specify the specific startup script in your "start" script:
{
"scripts": {
"start": "http-server"
}
}
While that makes npm start and http-server do the same thing in your project directory, other tools will rely on npm start since otherwise they wouldn't know that you wanted to use http-server as your startup script.
http-server is an HTTP server written in JavaScript for Node.js.
npm start runs the start script specified in package.json. It might run a web server (which might be written using http-server) and open a browser to it. It might do something else. It's entirely configurable.
working with angular2 App, and i am writing .bat scripts to automate the angular build and serving the application, as part of the ng serve. I have to do like
c:\abc\edf>ng serve --server=d:\angualr2\demoApp
Here demoApp is angular2 and node_modules already installed i need to up the angulap app by my batch script.
Where as everyone knows it works and working for me too.
d:\angualr2\demoApp>ng serve
if you build the application, then you don't serve it with ng serve
the flag --server is unknown to me, and to the CLI documentation (--help)
If you have a path issue, start by goign into the right folder of your file explorer with cd D:\angular2\demoApp (not sure about it, I'm more of a Linux man)
ng works because NPM added it to your PATH. If you work on another computer, it won't work. Consider running with the local package with a npm command such as npm run build, where build: "ng build --prod"
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.