Astro installer

In Astro, this kind of partial hydration is built into the tool itself. You can even automatically defer components to only load once they become visible on the page with the :visible modifier. This new approach to web architecture is called islands architecture. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites. A well-designed system makes it easy to do the right things and annoying but not impossible to do the wrong things.

Poor performance is often framed as a failure of the developer, but we respectfully disagree. In many cases, poor performance is a failure of tooling. It should be difficult to build a slow website. Astro is built by the team of open source developers behind Snowpack and Skypack , with additional contributions from the community. Astro is and always will be free. It is an open source project released under the MIT license.

We care deeply about building a more sustainable future for open source software. Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it. Getting Started Starting a new project in Astro is easy: create your project mkdir new-project-directory cd new-project-directory npm init astro install your dependencies npm install start the dev server and open your browser npm run dev How Astro Works Astro works a lot like a static site generator.

Embracing the Pit of Success. Return to Blog Share. Astro is designed to work with the entirety of the npm package ecosystem. This is managed by a project manifest at the root of your project known as package. Following the instructions above, you should have a directory with a single package.

You can now set up Astro inside your project. Read more about deploying Astro in the Deploy guide. If you need to share your development progress on the local network or check out the app from a phone, just add the following snowpack option to astro.

This will instruct Astro to build your site and save it directly to disk. We highly encourage you to get more familiar with the way Astro works. You can do so by further exploring our Docs, we suggest that you consider the following:. Prerequisites Node. Create Astro npm init astro is the easiest way to install Astro in a new project. With NPM npm init astro Yarn yarn create astro Pnpm pnpm create astro create-astro wizard lets you choose from a set of starter templates or alternatively, you could import your own Astro project directly from GitHub.