The RobTop Games Web project uses Astro as its core framework with TypeScript for type safety. This guide covers all configuration options and project setup.
Astro Configuration The project’s main configuration is defined in astro.config.mjs:
// @ts-check import { defineConfig } from "astro/config" ; export default defineConfig ({ devToolbar: { enabled: false , } , // Habilitar colecciones de contenido }) ;
The Astro dev toolbar is disabled by default for a cleaner development experience. devToolbar : { enabled : false , }
To enable it during development, set enabled: true. Content Collections The project supports Astro content collections for managing blog posts and structured content. This is enabled by default. TypeScript Configuration The project uses Astro’s strict TypeScript configuration:
{ "extends" : "astro/tsconfigs/strict" , "include" : [ ".astro/types.d.ts" , "**/*" ], "exclude" : [ "dist" ] }
Strict Mode The project extends Astro’s strict TypeScript configuration, which enables:
Strict null checks
Strict function types
No implicit any
All other strict type-checking options
Include Patterns
.astro/types.d.ts - Auto-generated Astro types**/* - All source files in the project Excluded Directories
dist/ - Build output directory Project Structure gd-web/ ├── src/ │ ├── components/ # Reusable Astro components │ ├── content/ # Content collections (blog posts) │ ├── layouts/ # Page layouts │ └── pages/ # Route pages ├── public/ │ └── assets/ # Static assets (CSS, JS, images) │ ├── bootstrap/ # Bootstrap framework files │ ├── css/ # Custom stylesheets │ ├── fonts/ # Custom fonts (Pusab) │ ├── img/ # Images │ └── js/ # JavaScript files ├── astro.config.mjs # Astro configuration ├── tsconfig.json # TypeScript configuration └── package.json # Dependencies and scripts
Package Configuration The project is configured as an ES module with the following key settings:
{ "name" : "gd-web" , "type" : "module" , "version" : "0.0.1" }
Dependencies
astro ^5.12.9 - The core Astro framework
Dev Dependencies
prettier ^3.6.2 - Code formattingprettier-plugin-astro ^0.14.1 - Astro-specific formatting
Development Scripts
Development Server Starts the Astro development server with hot module reloading. Typically runs on http://localhost:4321. Build Production Builds the site for production. Output is generated in the dist/ directory. Preview Build Preview the production build locally before deploying. Formats all files using Prettier with Astro plugin support. Astro CLI Access the Astro CLI directly for advanced commands. Environment Setup Prerequisites
Node.js 18+ or 20+
npm or pnpm package manager
Installation
Clone the repository
Install dependencies:
Start the development server:
The project uses ES modules ("type": "module"). Ensure all JavaScript files use ES module syntax (import/export) instead of CommonJS (require/module.exports).
Build Output When you run npm run build, Astro generates:
Static HTML files for all pages
Optimized CSS and JavaScript bundles
Compressed assets
Output directory: dist/
The build process:
Compiles TypeScript to JavaScript
Processes Astro components to HTML
Bundles and minifies assets
Optimizes images
Generates static routes
Advanced Configuration Adding Site URL For production deployment, add your site URL:
export default defineConfig ({ site: 'https://www.robtopgames.com' , devToolbar: { enabled: false , } , }) ;
Custom Output Directory export default defineConfig ({ outDir: './build' , devToolbar: { enabled: false , } , }) ;
Base Path For deployment to a subdirectory:
export default defineConfig ({ base: '/subdirectory' , devToolbar: { enabled: false , } , }) ;
