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 astro@latest
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.