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 cheat sheet 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.
To get going, you will need to have NodeJS installed on your system; opt for version
16.9 or higher for wider
compatibility. That comes with the
npm packet manager, but we use
pnpm: performance npm here. The benefit is that it keeps a local cache of packages on your machine. This saves you
downloading a package if you already used the same version in another project.
To get going, run the Create Astro app command.
Here, our project gets created in a new
&& 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).
Next, you can easily configure your project from 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.
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.
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:
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
3000is 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.
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; and
- some autoconfiguration 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.
- Astro is great for content sites and so by default creates a static site (using SSG) for you. However, Astro is not a one-trick pony! It can create an SSR site for you, letting you even add edge functionality. To make your Astro site SSR, first decide where you will host it. Then use Astro add, install any necessary packages and configure your project for the hosting provider. You can find Astro SSR adapters for Cloudflare, Netlify, Vercel and other hosting providers. We saw you can set this up with the command `pnpm astro add cloudflare netlify vercel `. Just drop the providers you do not need or alternatively see the full list to add another.
- Astro add is a convenient CLI tool for helping you set up your Astro projects. You let it know what integrations and adapters you need. Then, it will install any necessary packages for you as well as configure your new features. Integrations add functionality such as React, Svelte and other framework support. They can also help you set up Markdown or Tailwind in your project. Adapters let you turn your static Astro site into an SSR (Server Side Rendered) site. The command is the same whether you are setting up an integration or an adapter: `pnpm astro add react svelte tailwind cloudflare netlify`.
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.