What exactly is the react-scripts start command

Question

I ve been working with a React project using create-react-app and I have two options to start the project  First way  npm run start with the definition at the package json like this   quot start quot    quot react-scripts start quot   Second way  npm start What is the difference between these two commands  And  what is the purpose of the react-scripts start  I tried to find the definition  but I just found a package with this name  I still don t know what is the use of this command

User · Answer

start  is a name of a script  in npm you run scripts like this npm run scriptName  npm start is also a short for npm run start  As for  react-scripts  this is a script related specifically to create-react-app

User · Answer

create-react-app and react-scripts  react-scripts is a set of scripts from the create-react-app starter pack  create-react-app helps you kick off projects without configuring  so you do not have to setup your project by yourself    react-scripts start sets up the development environment and starts a server  as well as hot module reloading  You can read here to see what everything it does for you    with create-react-app you have following features out of the box         React  JSX  ES6  and Flow syntax support    Language extras beyond ES6 like the object spread operator    Autoprefixed CSS  so you don   t need -webkit- or other prefixes    A fast interactive unit test runner with built-in support for coverage reporting    A live development server that warns about common mistakes    A build script to bundle JS  CSS  and images for production  with hashes and sourcemaps    An offline-first service worker and a web app manifest  meeting all the Progressive Web App criteria    Hassle-free updates for the above tools with a single dependency       npm scripts  npm start is a shortcut for npm run start   npm run is used to run scripts that you define in the scripts object of your package json  if there is no start key in the scripts object  it will default to node server js  Sometimes you want to do more than the react scripts gives you  in this case you can do react-scripts eject  This will transform your project from a  managed  state into a not managed state  where you have full control over dependencies  build scripts and other configurations

User · Answer

As Sagiv b g  pointed out  the npm start command is a shortcut for npm run start  I just wanted to add a real-life example to clarify it a bit more   The setup below comes from the create-react-app github repo  The package json defines a bunch of scripts which define the actual flow    scripts        start    npm-run-all -p watch-css start-js      build    npm run build-css  amp  amp  react-scripts build      watch-css    npm run build-css  amp  amp  node-sass-chokidar --include-path   src --include-path   node modules src  -o src  --watch --recursive      build-css    node-sass-chokidar --include-path   src --include-path   node modules src  -o src       start-js    react-scripts start       For clarity  I added a diagram     The blue boxes are references to scripts  all of which you could executed directly with an npm run  lt script-name gt  command  But as you can see  actually there are only 2 practical flows    npm run start  npm run build   The grey boxes are commands which can be executed from the command line   So  for instance  if you run npm start  or npm run start  that actually translate to the npm-run-all -p watch-css start-js command  which is executed from the commandline   In my case  I have this special npm-run-all command  which is a popular plugin that searches for scripts that start with  build    and executes all of those  I actually don t have any that match that pattern  But it can also be used to run multiple commands in parallel  which it does here  using the -p  lt command1 gt   lt command2 gt  switch  So  here it executes 2 scripts  i e  watch-css and start-js   Those last mentioned scripts are watchers which monitor file changes  and will only finish when killed     The watch-css makes sure that the   scss files are translated to   cssfiles  and looks for future updates  The start-js points to the react-scripts start which hosts the website in a development mode    In conclusion  the npm start command is configurable  If you want to know what it does  then you have to check the package json file   and you may want to make a little diagram when things get complicated

[reactjs] What exactly is the 'react-scripts start' command?

Examples related to reactjs

Examples related to npm

Examples related to create-react-app

Examples related to react-scripts