Skip to content
Astroship.ai Docs

Let's start with the basics

Astroship is built on Astro ↗ configured in Server Side Rendering (SSR) mode. This means your project runs on a server and generates HTML on the server side.

Astro SSR comes with some key benefits:

  • Your site is fast and SEO-friendly by default
  • You can use any component framework you like (React, Vue, Svelte, etc.) or none at all
  • You can extend it just by adding files under the desired directory.

We recommend familizarizing yourself with the Astro documentation ↗ to learn the core concepts. We’ve included a brief summary of key concepts with references to the full documentation below.

Core concepts

1. Project structure

Here’s a high-level overview of the project structure:

src/
    assets/         # Static assets (images, icons, css) placed here are optimized
    pages/          # Each file in this directory becomes a route
        app/        # Protected route for authenticated users
        partials/   # Reusable partials for your pages (used with HTMX)
    components/
        app/        # Application UI components
        docs/       # Documentation UI components
        layouts/    # Layouts for your regular and authenticated pages
        marketing/  # Marketing UI components for landing pages
        ui/         # shadcn/ui components
    content/
        blog/       # Files here become blog posts
        docs/       # Files here become documentation pages
    lib/            # Utility functions and shared logic
    middleware/     # Middleware functions injecting functionality like auth, or db
integrations/       # Customized integrations for Astro
public/             # Static files served as-is. Use `src/assets` instead.

2. File-based routing

Astroship uses file-based routing, which means that each file in the src/pages directory becomes a route in your project. For example, if the file src/pages/index.astro, will be the home page of your project.

3. Components (Astro, React, Vue, Svelte)

Astro has a component-based architecture, which means you can create reusable components and use them across your project. In addition to being able to use React, Vue, and Svelte, Astro has it’s own native HTML component (.astro).

4. Pages

Pages are the main building blocks of your project. Each file in the src/pages directory becomes a route in your project.

5. Page Partials & HTMX

Partials are API routes that return HTML. They are placed in the src/pages/partials directory.

src/pages/partials/join-waitlist.astro
---
// Signals to Astro that this is a partial, only returning the HTML content below.
export const partial = true;


// Backend JS logic here to add to waitlist...
---


<h2>Succesfully added to waitlist!</h2>

In the example above, the partial join-waitlist.astro is a simple HTML file that can be used with HTMX to add a user to a waitlist.

src/pages/waitlist.astro
<form hx-post="/partials/join-waitlist" hx-swap="outerHTML">
    <input name="email" type="text" />
    <button type="submit">Join waitlist</button>
</form>

This form is interactive, so the content is updated without a page reload. The hx-post attribute tells HTMX to send a POST request to the partial join-waitlist.astro and update the content of the form with the response.