---
title: "Deploy Astro"
description: "The basic Astro template‎ "
category: "Starters"
url: https://railway.com/deploy/astro-starter
---

# Deploy Astro

The basic Astro template‎ 

**[Deploy Astro on Railway](https://railway.com/template/astro-starter)**

- **Creator:** Brody's Projects
- **Category:** Starters
- **Total deploys:** 426
- **Verified:** Yes

## Template content

### Astro https://astro.build/assets/press/astro-icon-light-gradient.svg

- **Source:** brody192/astro-basic-template
- **Public domain:** Yes

## Documentation

# Deploy and Host Astro on Railway

Astro is a modern all-in-one web framework designed for building fast, content-focused websites. It pioneers the "Islands Architecture" that ships zero JavaScript by default, loading interactive components only when needed. Astro supports multiple UI frameworks (React, Vue, Svelte, etc.) in a single project and generates static HTML at build time with optional server-side rendering capabilities for dynamic routes.

## About Hosting Astro

Hosting an Astro application gives you access to a high-performance web framework that combines the best of static site generation and server-side rendering. This template provides a pre-configured Astro project with optimized build settings, automatic asset optimization, and efficient content delivery. The framework excels at content-heavy websites, marketing pages, documentation sites, and e-commerce platforms where performance and SEO are critical. Astro deployments benefit from Railway's automatic builds, environment variable management, and custom domain support. Railway provides seamless CI/CD integration and comprehensive logging to support your web application operations.

## Common Use Cases

- **Content-Focused Websites and Blogs**: Building marketing websites, company blogs, portfolio sites, and landing pages that require exceptional performance, SEO optimization, and fast page loads with minimal JavaScript overhead.

- **Documentation and Knowledge Bases**: Creating technical documentation, product guides, API references, and help centers that benefit from static generation, fast navigation, and excellent search engine visibility.

- **E-commerce and Product Catalogs**: Developing product showcase sites, online stores, and catalog pages that require fast initial page loads, dynamic product filtering, and optimal Core Web Vitals scores for better conversion rates.

- **Multi-Framework Applications**: Building complex web applications that leverage multiple UI frameworks simultaneously, allowing teams to use React for interactive components, Vue for forms, and Svelte for animations all in the same project.

## Dependencies for Astro Hosting

- `node` - JavaScript runtime environment (Node.js 18.x or higher recommended)
- `npm` or `pnpm` or `yarn` - Package manager for dependency management

### Deployment Dependencies

- Node.js runtime environment - https://nodejs.org/
- Astro framework - https://astro.build/
- Build output directory (`./dist/`)
- Package manager lock file for reproducible builds

### Implementation Details

This template deploys an Astro application with production-optimized settings and automatic build processes.

#### Project Structure

Inside of your Astro project, you'll see the following folders and files:

```text
/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   └── components/
└── package.json
```

Key directories:
- **public/**: Static assets that are copied directly to the build output without processing
- **src/pages/**: File-based routing where each `.astro`, `.md`, or `.mdx` file becomes a route
- **src/layouts/**: Reusable page layouts and templates
- **src/components/**: UI components that can be Astro components or framework components (React, Vue, Svelte, etc.)

To learn more about the folder structure, refer to the [Astro project structure guide](https://docs.astro.build/en/basics/project-structure/).

#### Configuration

The deployment uses the standard Astro configuration file:

- `astro.config.mjs` - Main configuration for build settings, integrations, and server options
- `tsconfig.json` - TypeScript configuration (if using TypeScript)
- `.env` - Environment variables for local development
- `.env.production` - Production environment variables

#### Build Process

Astro builds your site with the following optimizations:

- **Static Generation**: Pages are pre-rendered to HTML at build time by default
- **Asset Optimization**: Images, CSS, and JavaScript are automatically optimized and minified
- **Code Splitting**: JavaScript is automatically split for optimal loading performance
- **Partial Hydration**: Only interactive components load JavaScript, reducing overall bundle size

#### Available Commands

All commands are run from the root of the project:

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installs dependencies                            |
| `npm run dev`             | Starts local dev server at `localhost:4321`      |
| `npm run build`           | Build your production site to `./dist/`          |
| `npm run preview`         | Preview your build locally, before deploying     |
| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI                     |

For more help on the Astro CLI, check out the [Astro CLI reference](https://docs.astro.build/en/reference/cli-reference/).

#### Server-Side Rendering (Optional)

Astro supports hybrid rendering modes:

- **Static (SSG)**: Pre-render pages at build time (default)
- **Server (SSR)**: Render pages on-demand per request
- **Hybrid**: Mix static and server-rendered pages in the same project

To enable SSR, install an adapter:
```bash
npx astro add node
```

This adds the Node.js adapter for server-side rendering capabilities.

#### Environment Variables

Configure your Astro application with environment variables:

- `PUBLIC_*` - Environment variables prefixed with `PUBLIC_` are exposed to client-side code
- `PRIVATE_*` - Server-only environment variables (not prefixed with `PUBLIC_`)

Access public variables in any file:
```javascript
const apiUrl = import.meta.env.PUBLIC_API_URL;
```

Access private variables only in server-side code (`.astro` files, API routes):
```javascript
const secretKey = import.meta.env.PRIVATE_SECRET_KEY;
```

#### Integrations and Framework Support

Astro supports adding integrations and UI frameworks:

```bash
npx astro add react        # Add React support
npx astro add vue          # Add Vue support
npx astro add svelte       # Add Svelte support
npx astro add tailwind     # Add Tailwind CSS
npx astro add sitemap      # Generate sitemap
```

Multiple frameworks can coexist in the same project, giving you flexibility in component choices.

### Why Deploy Astro on Railway?

Railway is a singular platform to deploy your infrastructure stack. Railway will host your infrastructure so you don't have to deal with configuration, while allowing you to vertically scale it.

By deploying an Astro application on Railway, you get automatic deployments from Git, environment variable management, custom domains with SSL, and instant rollbacks. Railway's platform handles the complexity of server management while you focus on building exceptional web experiences. Host your frontend, APIs, databases, and more on Railway.

## Similar templates

- [Paperless-ngx](https://railway.com/deploy/paperless-ngx-3) — Document management with OCR on Railway with PostgreSQL and Redis
- [open-excalidraw](https://railway.com/deploy/open-excalidraw) — Self-hostable collaborative drawing built on Excalidraw
- [caring-vibrancy](https://railway.com/deploy/caring-vibrancy) — Deploy and Host caring-vibrancy with Railway

Open this page in a browser: https://railway.com/deploy/astro-starter