How to Create a New Astro JS App

🚀 Spinning up a New Astro App

We see how to create a new Astro JS app in this post. This will be handy equally if you are new to Astro and want to hit the ground running and if you are a seasoned astronaut, but can never remember the spin-up commands. We get a cheatsheet with the commands for a skeleton Astro project and also see how you can add a touch of CI tooling as a bonus. Really hope you find it useful, and please do reach out or drop a comment below if there is something missing. You can find contact details further down the page.

🧱 How to Create a New Astro JS App

How to Create a New Astro JS App

• To get going run the Create Astro app command.

  pnpm create astro@latest my-new-astro-app && cd $_ && code .
  

  Here our project gets created in a new my-new-astro-app directory. “&& cd$_” will put us in the new directory when everything is ready. “&& code .” will open up VSCode in the new directory (change this to “&& codium .” or “&& subl .” if you use Codium or Sublime Text).
• Skip this step if you want to keep Astro anonymous data collection enabled (default).

  pnpm astro telemetry disable
  

• Next you can easily configure your project form the command line. Astro lets you bring your own framework, you just have to configure it. Astro add does this automatically for you if you tell it what you want.

  pnpm astro add react svelte vue mdx sitemap tailwind
  

  Naturally, you can pick and choose only the integrations you want! Get the latest list of available Integrations and links to docs.
• Out of the box, Astro is ready to ship a static site. This works for most content sites. You can deploy a static site to any popular hosting service. You can make your whole site Server Side Generated (SSG), which lets you add additional edge functionality. Astro add will configure the right adapter for you if you dice to go SSR.

  # OPTIONAL: SSR only
  pnpm astro add cloudflare deno netlify node vercel
  

  Again just pick the adapter for your hosting service* and skip this if you prefer the default Static Site Generation (SSG) mode. Get the latest list of available adapters and links to docs.
• Spin up the dev server:

  pnpm dev
  

  The CLI will give you a link so you can open the new app in your browser, the default is localhost:3000/, but the port number may be different if port 3000 is already in use.

That’s all there is to it! If you are new to Astro, check out the Getting Started with Astro Guide for 10 tips to help you hit the ground running. Also see the Quick start Astro JS tutorial which even goes into publishing your static Astro site on Netlify.

🙌🏽 How to Create a New Astro JS App: Wrapping Up

In this post, we saw how to create a new Astro JS App. In particular, we saw:

• how to use pnpm to create a new Astro project,
• how you can disable telemetry potentially to enhance your privacy,
• some auto configuration of your Astro app using Astro add.

Hope you have found this post useful! I am keen to hear what you are doing with Astro and ideas for future projects. Also let me know about any possible improvements to the content above.

🙏🏽 How to Create a New Astro JS App: Feedback

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.