others-how to solve astro not found error when trying astro using npm run dev command?

1. Purpose

When we try the astro ,a trending web framework, it would let us run the npm run dev command to start a local astro server, but we encountered a problem:

astro not found
sh: astro: command not found

The details of the issue is:

➜  my-astro-site git:(master) ✗ npm run dev

> @example/[email protected] dev
> astro dev

sh: astro: command not found
➜  my-astro-site git:(master) ✗ npm run dev

> @example/[email protected] dev
> astro dev

sh: astro: command not found
➜  my-astro-site git:(master) ✗ which astro
astro not found



2. Debug and solution

2.1 How to produce the error?

When we follow the hello world guide on astro.build website, we got the error:

➜  astro npm create [email protected]

Welcome to Astro! (create-astro v1.0.0)
Lets walk through setting up your new Astro project.

✔ Where would you like to create your new project? … ./my-astro-site
✔ Which template would you like to use? › Just the basics (recommended)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Strict (recommended)
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!

 Next steps

You can now cd into the my-astro-site project directory.
Run npm run dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add

Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.

➜  astro cd my-astro-site
➜  my-astro-site git:(master) ✗ ll
total 32
-rw-r--r--  1 bswen  staff   1.8K Aug 12 07:50 README.md
-rw-r--r--  1 bswen  staff   109B Aug 12 07:50 astro.config.mjs
-rw-r--r--  1 bswen  staff   274B Aug 12 07:50 package.json
drwxrwxr-x  3 bswen  staff    96B Aug 12 13:56 public
drwxrwxr-x  6 bswen  staff   192B Aug 12 13:56 src
-rw-r--r--  1 bswen  staff   647B Aug 12 14:21 tsconfig.json
➜  my-astro-site git:(master) ✗ npm run dev

> @example/[email protected] dev
> astro dev

sh: astro: command not found
➜  my-astro-site git:(master) ✗ npm run dev

> @example/[email protected] dev
> astro dev

sh: astro: command not found
➜  my-astro-site git:(master) ✗ which astro
astro not found

2.2 The solution

solution to the sh: xxx: command not found error:

➜  my-astro-site git:(master) ✗ npm install -g astro           

added 412 packages, and audited 413 packages in 2m

176 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  my-astro-site git:(master) ✗ astro

   astro  v1.0.3 Futuristic web development tool.

  astro [command] [...flags]

   Commands 
              add  Add an integration.
            build  Build your project and write it to disk.
            check  Check your project for errors.
              dev  Start the development server.
             docs  Open documentation in your web browser.
          preview  Preview your build locally.
        telemetry  Configure telemetry settings.

   Global Flags 
  --config <path>  Specify your config file.
    --root <path>  Specify your project root folder.
        --verbose  Enable verbose logging.
         --silent  Disable all logging.
        --version  Show the version number and exit.
           --help  Show this help message.

➜  my-astro-site git:(master)

Now we can start the astro test server:

➜  my-astro-site git:(master) ✗ npm run dev         

> @example/[email protected] dev
> astro dev

  🚀  astro  v1.0.3 started in 61ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose
  
05:10:49 PM [serve]    404                   /stylesheets/style.css

then visit http://localhost:3000

2.3 What does npm install -g do?

The npm install -g is shortcut for npm install --global, it does this:

NPM can also install packages globally so that all the node. js application on that computer can import and use the installed packages. NPM installs global packages into //local/lib/node_modules folder. Apply -g in the install command to install package globally.



3. Summary

In this post, I demonstrated how to fix the astro not found error when trying astro. The key point is to install astro dependency globally. That’s it, thanks for your reading.

-->