Type something to search...
to navigateto selectESC to close

Astrolock preview

astrolock preview

astrolock preview

Previews the production build of your site locally before deploying.

Usage

# Build first, then preview
astrolock build
astrolock preview

What It Does

The preview command:

  1. Serves dist/ - Shows exactly what will be deployed
  2. Simulates production - No dev tools, optimized assets
  3. Tests functionality - Verify links, search, navigation
  4. Checks performance - See actual load times
$ astrolock preview

Previewing production build...

✓ Loading dist/ directory
✓ Server started

  🚀 Preview at http://localhost:4321

  Testing your production build
  Press Ctrl+C to stop

Warning

Always preview before deploying to catch broken links, missing images, or other issues.

Why Preview?

Preview catches issues before deployment:

  • Broken links
  • Missing images
  • Search index issues
  • Navigation problems
  • Style issues
  • JavaScript errors

Preview vs Development

Featurepreviewwrite
Sourcedist/ (built)src/ (source)
OptimizationFullMinimal
Hot reloadNoYes
What you seeProductionDevelopment

What to Test

  • ✅ All menu links work
  • ✅ Breadcrumbs correct
  • ✅ Pagination works
  • ✅ Category/tag links function

Content

  • ✅ All pages load
  • ✅ Posts display correctly
  • ✅ Media items show properly
  • ✅ Authors pages work

Media

  • ✅ Images load and display
  • ✅ Audio players work
  • ✅ Video players function

Features

  • ✅ Search works
  • ✅ Dark mode toggles
  • ✅ RSS feed generates

Performance

  • ✅ Pages load quickly
  • ✅ No console errors

Common Issues

Error: dist/ directory not found

Fix: Build first:

astrolock build
astrolock preview

Desktop Browsers

Test in: Chrome, Firefox, Safari, Edge

Mobile Testing

  1. Browser resize: Open DevTools → Toggle device toolbar
  2. Responsive breakpoints:
    • 320px - Small phones
    • 375px - iPhone SE
    • 768px - Tablets
    • 1024px - Small laptops
    • 1440px - Desktops

Best Practices

  1. Always preview before deploy

    astrolock build && astrolock preview

  2. Fresh builds for production

    rm -rf dist/ .json/
astrolock build
astrolock preview

  3. Check browser console for errors

  4. Test user journeys:

    • Homepage → Blog → Post
    • Homepage → Media → Play Audio
    • Homepage → Search → Results

See Also

Tip

Spend 5-10 minutes testing: click menu items, test search, open posts, play media, check mobile view.