Deployment Guide

Overview

Showtimes NG is built with Astro in static site generation mode (output: 'static'). This means the entire site is pre-rendered at build time into static HTML, CSS, and JavaScript files that can be deployed to any static hosting provider.

Prerequisites

Before deploying, ensure you have:

A working local development environment (see Development Setup)
A Supabase project with the database schema configured
Your Supabase credentials (PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY)

Build Process

Set environment variables

Ensure your .env file contains your production Supabase credentials:

PUBLIC_SUPABASE_URL=your_production_supabase_url
PUBLIC_SUPABASE_ANON_KEY=your_production_supabase_anon_key

Build the site

Run the build command:

npm run build

This will:

Fetch data from your Supabase database
Generate static pages for all movies and cinemas
Optimize assets and create production bundles
Output everything to the ./dist/ directory

Preview locally (optional)

Test the production build locally:

npm run preview

This serves the built site from ./dist/ at http://localhost:4321

The build process queries your database to generate static paths for all movies and cinemas. Ensure your database is populated before building.

Deployment Options

Astro’s static output can be deployed to any static hosting provider. Here are the most popular options:

Vercel

Install Vercel CLI

npm install -g vercel

Deploy

From your project directory:

vercel

Follow the prompts to link your project and deploy.

Set environment variables

In the Vercel dashboard, go to Settings > Environment Variables and add:

PUBLIC_SUPABASE_URL
PUBLIC_SUPABASE_ANON_KEY

Vercel Configuration: Vercel automatically detects Astro projects. No additional configuration needed.

Netlify

Install Netlify CLI

npm install -g netlify-cli

Deploy

netlify deploy --prod

Set environment variables

In the Netlify dashboard, go to Site settings > Environment variables and add:

PUBLIC_SUPABASE_URL
PUBLIC_SUPABASE_ANON_KEY

Netlify Configuration: Create a netlify.toml file in your project root:

[build]
  command = "npm run build"
  publish = "dist"

Cloudflare Pages

Connect repository

Log in to the Cloudflare dashboard
Go to Pages and click Create a project
Connect your Git repository

Configure build settings

Build command: npm run build
Build output directory: dist
Framework preset: Astro (auto-detected)

Set environment variables

Add your Supabase credentials in the Environment variables section:

PUBLIC_SUPABASE_URL
PUBLIC_SUPABASE_ANON_KEY

Deploy

Click Save and Deploy

GitHub Pages

Update Astro config

Modify astro.config.mjs to set the correct base path:

export default defineConfig({
  site: 'https://username.github.io',
  base: '/showtimesng', // Your repo name
  integrations: [tailwind(), sitemap()],
  output: 'static',
});

Create GitHub Actions workflow

Create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        env:
          PUBLIC_SUPABASE_URL: ${{ secrets.PUBLIC_SUPABASE_URL }}
          PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.PUBLIC_SUPABASE_ANON_KEY }}
        run: npm run build
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Configure secrets

In your GitHub repository, go to Settings > Secrets and variables > Actions and add:

PUBLIC_SUPABASE_URL
PUBLIC_SUPABASE_ANON_KEY

Enable GitHub Pages

Go to Settings > Pages and set:

Source: GitHub Actions

AWS S3 + CloudFront

Build the site

npm run build

Create S3 bucket

aws s3 mb s3://showtimesng

Configure bucket for static hosting

aws s3 website s3://showtimesng --index-document index.html

Upload files

aws s3 sync ./dist/ s3://showtimesng --delete

Set up CloudFront (optional)

Create a CloudFront distribution pointing to your S3 bucket for CDN benefits.

Environment Variables

All deployment platforms need these environment variables set:

PUBLIC_SUPABASE_URL

string

required

Your Supabase project URL (e.g., https://xxxxx.supabase.co)

PUBLIC_SUPABASE_ANON_KEY

string

required

Your Supabase anonymous key for client-side access

Never commit your .env file to version control. Use your hosting provider’s environment variable configuration instead.

Post-Deployment

Verify Deployment

After deployment, verify:

Homepage loads - Check that the now showing movies appear
Movie pages - Navigate to individual movie pages
Cinema pages - Navigate to cinema pages
Showtimes display - Verify showtimes are correctly grouped by cinema/movie
Sitemap - Check that /sitemap-index.xml is accessible

Update Content

Since Showtimes NG uses static site generation:

Update database

Add/update movies, cinemas, or showtimes in your Supabase database.

Rebuild and redeploy

Trigger a new build to regenerate static pages with the latest data:

npm run build
vercel --prod  # or your deployment command

Consider setting up a cron job or GitHub Action to automatically rebuild the site daily to keep showtimes up to date.

Automated Rebuilds

Example GitHub Action for daily rebuilds:

name: Daily Rebuild

on:
  schedule:
    - cron: '0 2 * * *'  # Run at 2 AM UTC daily
  workflow_dispatch:  # Allow manual triggers

jobs:
  rebuild:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        env:
          PUBLIC_SUPABASE_URL: ${{ secrets.PUBLIC_SUPABASE_URL }}
          PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.PUBLIC_SUPABASE_ANON_KEY }}
        run: npm run build
      
      - name: Deploy to Vercel
        run: npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

Domain Configuration

The site is configured for https://showtimes.ng in astro.config.mjs:

export default defineConfig({
  site: 'https://showtimes.ng',
  // ...
});

Update this to your custom domain before deployment.

Custom Domain Setup

For most hosting providers:

Add your custom domain in the hosting dashboard
Update your DNS records to point to the hosting provider
Enable HTTPS (usually automatic)
Update site in astro.config.mjs to match your domain

Performance Optimization

Build Optimization

Astro automatically optimizes your build:

Image optimization - Automatic image resizing and format conversion
CSS minification - Removes unused CSS
JavaScript bundling - Minimal client-side JS
HTML compression - Minified HTML output

CDN Benefits

Using a CDN-based host (Vercel, Netlify, Cloudflare Pages) provides:

Global edge caching - Fast load times worldwide
Automatic HTTPS - SSL certificates managed for you
DDoS protection - Built-in security

Troubleshooting

Build fails with “No data returned”

Ensure your database has data and your Supabase credentials are correct:

# Test locally first
npm run build

Environment variables not working

Verify:

Variables are prefixed with PUBLIC_ for client-side access
Variables are set in your hosting provider’s dashboard
You’ve triggered a new deployment after adding variables

Pages not generating

Check that your database has movies/cinemas with valid IDs. The build process uses:

export async function getAllMovieIds() {
  const { data, error } = await supabase
    .from('movies')
    .select('id, title');
  // ...
}

If no data is returned, static paths won’t be generated.

Sitemap not generating

Ensure site is configured in astro.config.mjs:

export default defineConfig({
  site: 'https://your-domain.com',  // Required for sitemap
  integrations: [tailwind(), sitemap()],
  // ...
});

Monitoring

Consider adding monitoring to track:

Uptime - Site availability
Build success - Automated rebuild status
Error logs - Client-side errors
Performance - Page load times

Popular monitoring services:

Vercel Analytics (if using Vercel)
Sentry for error tracking
Google Analytics for usage metrics
Uptime Robot for availability monitoring

Get Started

Core Features

Development

Overview

Prerequisites

Build Process

Deployment Options

Vercel

Netlify

Cloudflare Pages

GitHub Pages

AWS S3 + CloudFront

Environment Variables

Post-Deployment

Verify Deployment

Update Content

Automated Rebuilds

Domain Configuration

Custom Domain Setup

Performance Optimization

Build Optimization

CDN Benefits

Troubleshooting

Build fails with “No data returned”

Environment variables not working

Pages not generating

Sitemap not generating

Monitoring

Build docs developers (and LLMs) love

Get Started

Core Features

Development

​Overview

​Prerequisites

​Build Process

​Deployment Options

​Vercel

​Netlify

​Cloudflare Pages

​GitHub Pages

​AWS S3 + CloudFront

​Environment Variables

​Post-Deployment

​Verify Deployment

​Update Content

​Automated Rebuilds

​Domain Configuration

​Custom Domain Setup

​Performance Optimization

​Build Optimization

​CDN Benefits

​Troubleshooting

​Build fails with “No data returned”

​Environment variables not working

​Pages not generating

​Sitemap not generating

​Monitoring

Build docs developers (and LLMs) love

Overview

Prerequisites

Build Process

Deployment Options

Vercel

Netlify

Cloudflare Pages

GitHub Pages

AWS S3 + CloudFront

Environment Variables

Post-Deployment

Verify Deployment

Update Content

Automated Rebuilds

Domain Configuration

Custom Domain Setup

Performance Optimization

Build Optimization

CDN Benefits

Troubleshooting

Build fails with “No data returned”

Environment variables not working

Pages not generating

Sitemap not generating

Monitoring