Back to Homepage

Deploying Astro with Laravel

3 min read


Deploying Astro with Laravel

Astro, a new static site generator, is making waves in the front-end community by offering highly optimized, fast-loading web pages. In contrast, Laravel has been the reigning champion for back-end developers for its elegant syntax and rich feature set. When Astro and Laravel are merged together, a stellar combination can result for modern web development. This article will show you how to develop an ultra-fast, dynamic application using Astro and Lara.

Prerequisites for Astro with Laravel

  • Node.js and npm installed

  • PHP and Composer installed

  • Basic knowledge of Astro and Laravel

Initial Setup

Before diving into the integration, set up new Astro and Laravel projects:

For Laravel:

composer create-project laravel/laravel astro-laravel

For Astro:

npm init astro@latest

Directory Structure

One approach is to keep the both projects in separate directories, yet serve them as if they are part of a unified project.

- my-unified-project
  - my-astro-app
  - my-laravel-app

Astro for Static Content

Astro can pre-render your site to serve static HTML. For example, you can create an index.astro file for your homepage:

title: Home Page
<!DOCTYPE html>

Run npm run build to build your Astro pages into static HTML.

Laravel for Dynamic Content

Use Laravel to serve your dynamic or API content. Create a new controller to handle, say, fetching posts:

php artisan make:controller ArticleController

In ArticleController.php:

public function index() {
    return response()->json(['articles' => Article::all()], 200);

Integrate Astro with Laravel

Method 1: Reverse Proxy

Set up a reverse proxy with Nginx or Apache so that requests for static content are routed to Astro, and API or dynamic requests go to Laravel.

Here’s an example Nginx configuration snippet:

location /static/ {
    proxy_pass http://localhost:3000;  # Astro runs on port 3000

location /api/ {
    proxy_pass http://localhost:8000;  # Laravel runs on port 8000

Method 2: Laravel as the Master

Another method is to use Laravel to serve Astro-generated static files. Build your Astro project and move the dist directory into Laravel’s public folder.

Fetching Dynamic Data in Astro

Use fetch or any other HTTP client in your Astro components to fetch dynamic data from Lara:

import { fetchContent } from './helpers.js';
const posts = fetchContent('http://localhost:8000/api/posts');
    { => (
        <article key={}>


Since you have a unified project structure, deploy it as one. However, ensure both are properly configured in your server. Don't forget to set your .env files and execute database migrations for Laravel.


Combining Astro's front-end capabilities with Laravel's robust back-end features gives you the best of both worlds. It can be a strong architecture choice for building web applications that are both dynamic and blazing fast.

In my opinion, the integration of astro is a step forward in redefining the benchmarks for web performance and user experience. While Astro takes care of optimized frontend delivery, Laravel ensures a solid, feature-rich backend. It’s a match made in developer heaven.

Follow @LaravelSage on X → Follow @LaravelSage on Facebook →
Aniket Singh

Aniket Singh

View All Articles

Full-stack developer with a knack for Merging creativity with technical expertise for standout solutions.

Related Articles

data_forget Helper for Laravel

data_forget Helper for Laravel

Since Laravel version 10.15, there is a new utility function called data_forget that allows you to remove keys from an array or object using a "dot" notation.

Laravel Tenant Application with Tenancy

Laravel Tenant Application with Tenancy

You can make your Laravel app multi-tenant using the Tenancy for Laravel Tenant package. This tenancy package lets you make any Laravel application multi-tenant without rewriting it.

Top Laravel Packages for Building Powerful Applications

Top Laravel Packages for Building Powerful Applications

Are you ready to take your Laravel skills to the next level and build extraordinary applications? Look no further! In this blog post, we will unveil a treasure trove of top packages that will revolutionize your development process.

Subscribe for 20+ new Laravel tutorials every week

You can unsubscribe at any time. You'll also get -20% off my courses!

© 2024


Laravel Sage

   |    Privacy Policy