Astro Template: Moon Base

Moon Base is an opinionated Astro 5 starter template with built-in support for Vue, shadcn-vue, Tailwind CSS, Prettier, view transitions, and import aliases and includes a basic starter component.

Using bunx create-astro@latest or npx create-astro@latest provides everything you need to create a basic Astro application. However, it is missing a few useful items that I found myself manually adding to every Astro project I created. To address this problem, I created this template to automatically include these items plus support for Vue and shadcn-vue. Additionally, a custom PowerShell function was created to deploy this template and provide some additional functionality that the template cannot.

The template includes:

• Tailwind CSS (v3)
• Prettier
• Vue
• shadcn-vue
• Astro View Transitions
• Astro Import Aliases
• A default MainLayout.astro layout file
• A default global.css file
• Default .vscode files to properly handle Tailwind CSS, recommended extensions, and default Prettier formatters
• A starter component to showcase Tailwind CSS
• The dev script set to "astro dev --open"

The PowerShell function:

• Creates an additional empty folder: assets
• Blanks out the README.md file
• Runs the prettier CLI to provide an intial format of all project files
• Initializes a Git repository
• Automatically navigates to the project folder and peforms an initial install
• Runs astro update to update the core Astro packages to the latest versions and runs your preferred package manager (npm or bun) to update the other packages
• Provides an option to launch the site and/or open the project folder with VS Code post deployment

Deployment Methods

Using bunx create-astro@latest is dependent on npm being present in the path. It is recommended to install Node.js even if Bun is used exclusively.

bun

bunx create-astro@latest -- --template smart-ace-designs/astro-moonbase project-name

npm

npx create-astro@latest -- --template smart-ace-designs/astro-moonbase project-name

PowerShell

Bun 1.2.0 is not currently supported with this function due to compatibility issues between the new text-based bun.lock file and astro install.

Add this function to your PowerShell profile or a PowerShell module:

function New-AstroMoonbaseProject
{
    [CmdletBinding()]
    Param
    (
        [Parameter(Mandatory = $true)] [string]$ProjectName,
        [Parameter(Mandatory = $true)] [string]$Location,
        [Parameter(Mandatory = $false)] [switch]$StartCode,
        [Parameter(Mandatory = $false)] [switch]$StartApp,
        [Parameter(Mandatory = $false)] [ValidateSet("bun", "npm")] [string]$PackageManager = "bun"
    )

    switch ($PackageManager)
    {
        "bun" {$PackageManagerX = "bunx"}
        "npm" {$PackageManagerX = "npx"}
    }

    Clear-Host
    $Message = "Astro Deployment Tool"
    $Width = $Host.UI.RawUI.WindowSize.Width
    Write-Host
    Write-Host ((" " * ($Width - $Message.Length)) + $Message) -ForegroundColor Green
    Write-Host ("=" * $Width)

    if (Test-Path -Path "$Location\$ProjectName")
    {
        Write-Host "`nProject folder ($ProjectName) already exists."
        Write-Host "Operation cancelled...liftoff failed!"
        return
    }

    Set-Location $Location
    & $PackageManagerX create-astro@latest -- --template smart-ace-designs/astro-moonbase `
        --git --no-install $ProjectName

    if (!(Test-Path -Path $ProjectName))
    {
        Write-Host "`nProject folder ($ProjectName) was not created."
        Write-Host "Operation cancelled...liftoff failed!"
        Write-Host "`nIf using Bun please run `"bun pm cache rm`" to clear the cache and try again."
        return
    }
    
    Write-Host
    Set-Location $ProjectName
    switch ($PackageManager)
    {
        "bun" {& $PackageManager install --no-summary}
        "npm" {& $PackageManager install --silent}
    }

    & $PackageManagerX @astrojs/upgrade
    & $PackageManager update --silent --save

    [void](New-Item -Name "assets" -Path src -ItemType Directory)
    Clear-Content -Path "README.md"

    Write-Host
    & $PackageManagerX prettier . --write --log-level silent
    & $PackageManagerX prettier . --check
    if ($StartCode -and (Get-Command code -ErrorAction SilentlyContinue)) {code .}
    Write-Host
    Write-Host ("=" * $Width)
    if ($StartApp) {& $PackageManager run dev}
}

astro-moonbase.mp4

Add shadcn-vue Component

To add a shadcn-vue component to your project (example: Alert):

bun

bun x shadcn-vue@latest add alert

npm

npx shadcn-vue@latest add alert

Project Structure

Inside of your Astro project you will see the following folders and files:

/
├── .vscode/
│       └── extensions.json
│       └── launch.json
│       └── settings.json
├── public/
│       └── favicon.svg
├── src/
|   ├── components/
│       └── AstroWelcome.astro
|   ├── layouts/
│       └── MainLayout.astro
|   ├── lib/
│       └── utils.ts
│   ├── pages/
│       └── index.astro
|   ├── styles/
│       └── global.css
├── .gitignore
├── .prettierrc.mjs
├── astro.config.mjs
├── components.json
├── package.json
├── README.md
├── tailwind.config.mjs
└── tsconfig.json

When deployed with the custom New-AstroMoonbaseProject PowerShell function, you will see the following folders and files:

/
├── .vscode/
│       └── extensions.json
│       └── launch.json
│       └── settings.json
├── public/
│       └── favicon.svg
├── src/
|   ├── assets/
|   ├── components/
│       └── AstroWelcome.astro
|   ├── layouts/
│       └── MainLayout.astro
|   ├── lib/
│       └── utils.ts
│   ├── pages/
│       └── index.astro
|   ├── styles/
│       └── global.css
├── .gitignore
├── .prettierrc.mjs
├── astro.config.mjs
├── components.json
├── package.json
├── README.md
├── tailwind.config.mjs
└── tsconfig.json