What is the difference between yarn build and yarn install? - reactjs

What exactly these two do, where to use them ?
yarn install
yarn build

In a nutshell, yarn install is the command used to install all dependencies for a project, usually allocated in the package.json file. In most scenarios it is because you cloned a project and need its dependencies installed to run it.
On the other hand, yarn build is not a built-in command in the Yarn package manager. Looking at your question, it seems like you are running some #reactjs project, which might have defined a build command in its package.json file.
I hope this clarifies your doubt, but for a complete answer, please provide an example of what is your specific scenario.
Also be aware that when running custom scripts like build, test, deploy, etc. it is recommended tu use the yarn run [script] command as stated in the Yarn docs, in your case yarn run build.

yarn install is used to fetch and install all dependencies for your project which are defined in your package.json. You might want to do this when you add a dependency or if you freshly checked out the project on another computer. Also read the docs on yarn install.
yarn run build calls the script that you configured for the "build" command in your package.json. Note that yarn build is not a valid yarn command.
{
"name": "my-package",
"scripts": {
"build": "babel src -d lib" // <-- this will be executed
}
}
Also see the yarn run documentation

Related

yarn install wont run on my project keeps telling me that it couldn't find the binary react-script start

my package.json
the error i get
all my scripts dont work it keeps throwing the same error everytime.
i have cloned the repo in a different location and reinstalled the dependencies but still yarn start wont run.
what could be the problem?
try running your project with this yarn run start or just add react-scripts with yarn using this command yarn add react-scripts because maybe react-scripts is not installed for some reason

How to install an NPM plugin using react-scripts

I am trying to install and use the eslint-plugin-react-hooks plugin in a project. Usually I'd simply run npm install or yarn add but the directions say to use react-scripts because I'm using create-react-app. How do I do that? Do I add a script and list it as a dependency on the package.json file or is there some other way?
Any help is appreciated.

How do I properly configure ng from npm as a normal CLI command?

I am seeing tutorials with NPM and Node.js that have the ng package handler. However, they run this straight from the command prompt. I am curious if I am missing something to install to run commands like ng serve for example, without having to preface them with npm run like npm run ng serve --open ?
Thank you!
You don't naturally prefix the ng server with npm run
Install the angular-cli globally
npm i -g #angular/cli
Then you will be able to do:
ng serve
ng new [appname]
ng generate component [name]
Without any prefix and from anywhere.
It's not recommended to install #angular/cli globally. Some projects will use different version of angular#cli and executing ng commands will have unexpected result.
Instead, install locally into dev dependencies with:
npm install --save-dev angular#cli
or Yarn:
yarn add --dev angular#cli
After you install locally, you can setup various npm scripts to execute ng commands:
scripts: {
"dev": "ng serve"
}
Run the script:
npm run dev
** Please note, if you have globally installed angular#cli, running the commands mentioned above will use the local angular#cli package from node_modules/.bin.
Also, npx is a tool intended to help round out the experience of using packages from the npm registry. You can read about it more here

Gatsby app deploy to Netlify issue

Netlify is supposed to be amazing for depoying a gatsby site but having issues such as "Gatsby command not found" when this is the default.
Tried changing to just "BUILD" since this is my package.json script but still nothing... any thoughts?
The docs at Gatsby instruct you to install the cli globally: npm install --global gatsby-cli. This probably results in a missing dependency in production, hence the gatsby command not found error.
In short, make sure gatsby is part of your dependencies inside package.json
Romeo is right, but you have to install gatsby-cli locally (npm i gatsby-cli), so that it appears in the package.json file, and saved to Git.
(npm i -global gatsby-cli will probably fail, because that will not record the dependency in the package.json file.)
That way, when the netlify build process uses the package.json file to build the package, gatsby-cli is in there, and the "gatsby build" command will be available.

gh-pages failing while trying to deploy Reactjs app to GitHub in windows 10

I tried following the exact instructions listed in the react documentation on how to deploy a working app to github pages. When I ran npm run deploy. It kept failing at the gh-pages -d build saying that the 'gh-pages' is not an internal or external command. I made sure I had the latest versions of node and npm installed
I had installed gh-pages using the -g tag to make it globally available. Tried adding to the system path variable leading to the node modules folder where i knew gh-pages was loaded. Still nothing.
Finally i tried running it from the git bash window instead of the cmd terminal. This hadn't occurred to me at first as all of the other npm commands worked. Don't know why this fixed things but it did. Just posting this so somebody else might be spared the pain
I had the same issue but finally managed to make it work. The main issue was that I hadn't installed Git for Windows, but I took some extra steps to make sure everything works fine.
Download and install Git for Windows from here
Run npm cache clean to clean npm cache
Run npm install npm#latest -g to install the latest version of npm
Add "homepage" : "http://myname.github.io/myapp", to
"package.json" file and replace the URL with correct GitHub pages URL. If you are not sure about the URL, open the project repository in the browser and go to "Settings" tab. Scroll down and find correct URL under "GitHub Pages".
Run npm install --save-dev gh-pages to install gh-pages module
Add the following 2 lines to "scripts" object in "package.json" file:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Finally, run npm run deploy to create an optimized production
build and deploy it on GitHub pages. If you haven't logged in to
Github for windows app before, Github app pops up and asks you to enter your username and password. When you've done that the deploy process will continue and uploads the production build on GitHub pages.
Hope that helps, happy coding.
If it says this, then node_modules/.bin/gh-pages doesn't exist (no, you don't need to install it globally). If it doesn't exist, then it means you either forgot to run npm install --save-dev gh-pages, or something went wrong during the installation.
I would not recommend installing it globally (although looks like it worked in your case).

Resources