Setting up a development environment that combines Astro, a modern static site generator, with Docker, a containerization platform, can streamline your workflow and ensure consistency across different systems. This guide provides a step-by-step process to help developers integrate Astro with Docker effectively.

Prerequisites

  • Basic knowledge of command-line interface (CLI)
  • Installed Docker on your machine (Docker Desktop for Windows/Mac, or Docker Engine for Linux)
  • Node.js and npm installed
  • Text editor or IDE of your choice

Step 1: Create a New Astro Project

Open your terminal and run the following commands to create a new Astro project:

npm create astro@latest

Follow the prompts to set up your project directory and preferences.

Step 2: Initialize Docker Environment

In your project root directory, create a new file named Dockerfile and add the following content:

FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy all project files
COPY . .

# Build the Astro project
RUN npm run build

# Expose port
EXPOSE 3000

# Start the server
CMD ["npm", "run", "start"]

Next, create a .dockerignore file to exclude unnecessary files:

.git
node_modules
dist

Step 3: Configure package.json Scripts

Ensure your package.json has the following scripts for building and starting your Astro project:

{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "start": "astro preview"
  }
}

Step 4: Build and Run Docker Container

Build your Docker image with the following command:

docker build -t astro-docker-setup .

Run the container with:

docker run -p 3000:3000 -d --name astro-app astro-docker-setup

Step 5: Access Your Astro Site

Open your browser and navigate to http://localhost:3000 to see your Astro site running inside Docker.

Additional Tips

  • Use docker-compose for managing multi-container setups.
  • Map volume mounts for live development:

docker run -p 3000:3000 -v $(pwd):/app -d --name astro-dev astro-docker-setup

This allows you to edit files locally and see changes reflected immediately.

Conclusion

Integrating Astro with Docker simplifies deployment and ensures consistency across development environments. Follow these steps to set up a robust, containerized Astro development environment that can scale easily and be deployed seamlessly.