Prerequisites
Before you begin, ensure you have the following installed:- Node.js version 18.0.0 or higher
- npm (comes with Node.js)
- Git for version control
Installation
1. Clone the Repository
2. Install Dependencies
Install all project dependencies using npm:- Astro (v5.18.0) - Static site framework
- Tailwind CSS (v4.2.1) - Styling
- @astrojs/vercel (v9.0.4) - Vercel adapter
- @astrojs/sitemap (v3.7.0) - Sitemap generation
- Lucide icons for UI elements
- Custom fonts (Baloo 2, Alice)
Running the Development Server
Start Development Mode
To start the local development server with hot reload:astro dev and start the development server at:
Hot Module Replacement (HMR)
The development server includes hot reload functionality:- Astro components (.astro files) reload automatically on save
- Styles update instantly without page refresh
- Scripts are reloaded on change
- Content changes reflect immediately
Development Features
Internationalization (i18n)
The project supports two locales:- Spanish (es) - Default locale (Guatemala)
- English (en)
- Spanish:
http://localhost:4321/es/ - English:
http://localhost:4321/en/
Prefetching
The development environment includes hover-based prefetching:- Links are prefetched on hover for faster navigation
- Prefetch strategy:
hover - Not enabled for all links (selective prefetching)
Vite Configuration
The project uses Vite for building with:- CSS code splitting for optimized loading
- esbuild minification for fast builds
- Vendor chunk splitting for better caching
- Tailwind CSS via Vite plugin
Preview Production Build
To preview the production build locally:Troubleshooting
Port Already in Use
If port 4321 is already in use, you can specify a different port:Node Version Issues
Ensure you’re using Node.js 18.0.0 or higher:Module Not Found Errors
If you encounter module errors after pulling updates:Cache Issues
Clear Astro’s cache if you experience unexpected behavior:Build Errors
If the development server fails to start:- Check Node.js version meets the requirement (>=18.0.0)
- Verify all dependencies are installed correctly
- Clear cache directories (
.astro,node_modules/.vite) - Check for TypeScript errors in your code
- Review the terminal output for specific error messages
Available Scripts
All npm scripts available for development:| Command | Description |
|---|---|
npm run dev | Start development server |
npm start | Alias for npm run dev |
npm run build | Build production site |
npm run preview | Preview production build |
npm run format | Format code with Prettier |
npm run format:check | Check code formatting |
npm run lint | Lint code with ESLint |
npm run lint:fix | Fix linting issues automatically |
Next Steps
- Review Code Quality for linting and formatting guidelines
- See Building and Deployment for production builds
- Explore the project structure and start contributing!