How do you use React or Svelte with Astro JS?

Astro JS is a fast content site builder which ships zero JavaScript by default, while embracing the Islands architecture paradigm. Famously, Astro lets you bring your own framework, letting you write components in Svelte, React, Vue and others. Out of the box, none of these is included. However, it only takes a moment to add and configure them. Create your new Astro project, then before you write a line of code, from the Terminal run `pnpm astro add react`, this will add the React integration and configure it for you. If you prefer Svelte, use this alternative: `pnpm astro add svelte`. You can even mix both if you want! We have seen there is a host of other integrations which can set up Tailwind, or Markdown as well as other frameworks like AlpineJS and Vue.

Does Astro support Server Side Rendering (SSR)?

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`.

How to Create a New Astro JS App: Cheat Sheet # How to Create a New Astro JS App: Cheat Sheet #

How to Create a New Astro JS App: Cheat Sheet #

Published: 3 years ago

4 minute read

Gunning Fog Index: 7.1

Content by Rodney

🚀 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 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.

🧱 How to Create a New Astro JS App #

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.

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 VS Code 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 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.
```
    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.

🗳 Poll #

How easy did you find creating your Astro app?

🙌🏽 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; 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.

🏁 How to Create a New Astro JS App: Summary #

How do you use React or Svelte with Astro JS? #: Astro JS is a fast content site builder which ships zero JavaScript by default, while embracing the Islands architecture paradigm. Famously, Astro lets you bring your own framework, letting you write components in Svelte, React, Vue and others. Out of the box, none of these is included. However, it only takes a moment to add and configure them. Create your new Astro project, then before you write a line of code, from the Terminal run `pnpm astro add react`, this will add the React integration and configure it for you. If you prefer Svelte, use this alternative: `pnpm astro add svelte`. You can even mix both if you want! We have seen there is a host of other integrations which can set up Tailwind, or Markdown as well as other frameworks like AlpineJS and Vue.
Does Astro support Server Side Rendering (SSR)? #: 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.
What is Astro add? #: 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`.

🙏🏽 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.

I’m always forgetting the commands to spin up a new 🚀 Astro project so made a quick reference cheatsheet.

Hope you find it useful!

#learnastro #JAMStack https://t.co/4AiTFSAFcU
— Rodney (@askRodney) August 26, 2022

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.