How to Create a New Astro JS App: Cheatsheet
Tags: webdev, node, astro, javascript
Published: 2022-10-18 09:58:39

---
title: "How to Create a New Astro JS App: Cheatsheet"
published: "true"
description: "How to create a new Astro JS app: cheatsheet reference guide to spinning up, launching and customising your new Astro project quickly."
tags: "webdev, node, astro, javascript"
canonical_url: "https://rodneylab.com/how-to-create-new-astro-js-app/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69byhzuztcb214vl1vvl.png"
---

## 🚀 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.
```shell
pnpm create astro@latest my-new-astro-app && cd $_ && code .
```
Here our project gets created in a new `my-new-astro-app` directory. &ldquo;`&& cd$_`&rdquo; will put us in the new directory when everything is ready. &ldquo;`&& code .`&rdquo; will open up VSCode in the new directory (change this to &ldquo;`&& codium .`&rdquo; or &ldquo;`&& subl .`&rdquo; if you use Codium or Sublime Text).
- Skip this step if you want to keep Astro anonymous data collection enabled (default).
```shell
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.
```shell
pnpm astro add react svelte vue mdx sitemap tailwind
```
Naturally, you can pick and <strong>choose only the integrations you want</strong>! Get the latest list of <a aria-label="See a full list of availale Astro integrations" href="https://astro.build/integrations/">available Integrations and links to docs</a>.
- 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.
```shell
# 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 <a aria-label="Open a list of latest Astro S S R adapters" href="https://docs.astro.build/en/guides/server-side-rendering/">available adapters and links to&nbsp;docs</a>.
- Spin up the dev server:
```shell
pnpm dev
```
The CLI will give you a link so you can open the new app in your browser, the default is <a aria-label="Open new app in browser" href="http://localhost:3000/">`localhost:3000/`</a>, but the port number may be different if port `3000` is already in use.

That&rsquo;s all there is to it!  If you are new to Astro, check out the <a aria-label="Open the getting started with Astro guide" href="https://rodneylab.com/getting-started-astro/">Getting Started with Astro Guide for 10 tips to help you hit the ground running</a>.  Also see the <a href="https://rodneylab.com/astro-js-tutorial/">Quick start Astro JS tutorial which even goes into publishing your static Astro site</a> 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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a aria-label="Reach out on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact/">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on Astro" href="https://rodneylab.com/tags/astro/">Astro</a> as well as <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a>. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.