From npm to yarn


Here are some notes from watching Yarn - An npm Alternative by Andrew Mead
Install yarn using npm install -g yarn

Comparable npm and yarn commands:
npm yarn notes
npm init yarn init creates package.json file
npm install yarn add
  • downloads dependencies
  • yarn uses yarn.lock for build consistency
  • yarn uses a cache to speed up repeat installs
npm install -g npm-check-updates; ncu yarn outdated reports on available updates in dependencies
yarn upgrade updates dependencies
yarn cache clean empites library cache
yarn run asks script to run
npm install -g pkg yarn global add pkg adds a system wide package (global)

See also: Yarn Cheatsheet

Popular posts from this blog

Serve create-react-app from a subdirectory

If you've tried to deploy create-react-app to a non-root subdirectory (i.e. example.com/app/), then you'll need the following to make it work: Set the homepage in project.json "homepage": "https://example.com/app/" If you are using Router: Set the basename attribute:  <Router basename={'/app'}> Set Route path prefixes <Route path={`${process.env.PUBLIC_URL}/dashboard`} component={Dashboard} /> Update Link tags <Link to={`${process.env.PUBLIC_URL}/dashboard`}> Sources: https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1 https://stackoverflow.com/questions/49429906 https://create-react-app.dev/docs/deployment https://medium.com/@wolovim/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af
Read more

Google sign-in with pwa_auth

Do you need one of those universal sign in buttons Google / Facebook / Microsoft ? Take a took a look at pwa-auth , a JavaScript tool to handle the login process for Microsoft, Google and Facebook accounts. We started with npx create-react-app  and changed App.js as follows: This only implements the Google sign-in and nothing for the back-end verification, but it's a start. Also, see this article on Medium.com
Read more

Components in React: "class" and "functional"

If you're creating a non-trivial webpage it might feel like it's getting out of hand.  Changes coming in from different places. CSS files. JavaScript files. HTML files. One "thing" on your page might have code coming from seven different files. This can be confusing, not to mention it and makes reusability and testing difficult. React addresses this complexity. It lets you make up your own tags for your specific use case. Not only that, but you can include everything the tag needs to make it work in one place. It's like a layer on top of JavaScript / HTML / CSS that lets you build your own reusable, modular, domain-specific components. And that's a central React idea: components . These components are like your own reusable HTML tags that also encapsulate whatever JavaScript (and HTML, and CSS, and other components, etc) they need to run. There are two main ways to create components in React: class and functional . Class Components The component method ...
Read more