Quickstart - Proyecto Renacer

Quick Installation

Get the Proyecto Renacer website running on your local machine in just a few minutes. This guide will walk you through cloning the repository, installing dependencies, and running the development server.

This quickstart assumes you have Node.js 18+ installed on your machine. If you haven’t installed Node.js yet, download it from nodejs.org.

Prerequisites

Before you begin, ensure you have the following installed:

Node.js: Version 18.0.0 or higher
Package Manager: npm (comes with Node.js), yarn, or pnpm
Git: For cloning the repository
Code Editor: VS Code recommended (with Astro extension)

Check your Node.js version by running node --version in your terminal. If you need to update, use nvm for easy Node.js version management.

Installation Steps

Clone the Repository

Clone the Proyecto Renacer source code to your local machine:

git clone <repository-url>
cd renacer

Replace <repository-url> with the actual Git repository URL for the project.

Install Dependencies

Install all required npm packages defined in package.json:

npm install

This will install:

astro (^5.17.1) - The Astro framework
tailwindcss (^4.2.1) - Utility-first CSS framework
@tailwindcss/vite (^4.2.1) - Tailwind CSS Vite integration

The installation typically takes 30-60 seconds depending on your internet connection and machine specs.

Start Development Server

Launch the Astro development server with hot module replacement:

npm run dev

The development server will start at http://localhost:4321 by default.You should see output similar to:

🚀 astro v5.17.1 started in 45ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

Open in Browser

Navigate to http://localhost:4321 in your web browser to view the site.You should see the Proyecto Renacer homepage with:

Hero section with “Tu casa propia en Ambato empieza aquí”
Social proof showing “Más de 32 familias ya son parte de este sueño”
Project overview section
4-year timeline
Community work gallery

Available Scripts

The package.json file defines several scripts for different development tasks:

Development

Start the development server with hot reload:

npm run dev

What it does:

Starts local dev server at localhost:4321
Enables hot module replacement (HMR)
Watches for file changes
Provides instant feedback during development

Build for Production

Create an optimized production build:

npm run build

What it does:

Compiles all .astro files to static HTML
Optimizes and minifies CSS/JS
Processes images and assets
Generates the dist/ directory with production-ready files

Always run a production build before deploying to ensure there are no build-time errors. The development server may not catch all issues.

Preview Production Build

Test your production build locally before deployment:

npm run preview

What it does:

Serves the built dist/ directory
Allows you to test the production build locally
Runs on a different port than dev server (usually localhost:4321)

Run Astro CLI

Execute Astro CLI commands directly:

npm run astro -- --help

Common Astro commands:

# Add integrations
npm run astro add tailwind

# Check for errors
npm run astro check

# Generate types
npm run astro sync

Project Structure

After installation, you’ll see this directory structure:

renacer/
├── .vscode/
│   ├── extensions.json      # Recommended VS Code extensions
│   └── launch.json          # Debug configurations
├── src/
│   ├── components/          # Reusable Astro components
│   │   ├── Button.astro
│   │   ├── ButtonTransparent.astro
│   │   ├── CardLg.astro
│   │   ├── CardMd.astro
│   │   ├── CardSm.astro
│   │   ├── Footer.astro
│   │   ├── Head.astro
│   │   ├── Header.astro
│   │   ├── Inprogress.astro
│   │   ├── NavItem.astro
│   │   ├── Navigation.astro
│   │   ├── OpenGraph.astro
│   │   └── Welcome.astro
│   ├── data/
│   │   └── state.ts         # Project state data
│   ├── layouts/
│   │   └── Layout.astro     # Base layout with SEO
│   ├── pages/               # File-based routing
│   │   ├── index.astro      # Homepage
│   │   ├── proyecto.astro   # Project details
│   │   ├── requisitos.astro # Requirements
│   │   ├── como-ser-socio.astro
│   │   ├── contacto.astro
│   │   ├── noticias.astro
│   │   └── design-system.astro
│   └── styles/
│       └── global.css       # Global styles
├── astro.config.mjs         # Astro configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Dependencies and scripts
└── package-lock.json        # Locked dependency versions

Development Workflow

Hot Module Replacement

Astro’s dev server includes HMR for instant updates:

Edit Component: Modify any .astro component
Save File: Changes are detected automatically
Browser Updates: Page refreshes with your changes instantly

Example: Try editing src/pages/index.astro and watch the browser update!

Adding New Pages

Astro uses file-based routing. To add a new page:

Create a new .astro file

Create src/pages/nueva-pagina.astro:

---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

const title = "Nueva Página | Proyecto Renacer";
const description = "Descripción de la nueva página";
---

<Layout title={title} description={description}>
  <Header />
  <div class="relative flex min-h-screen flex-col">
    <main class="flex-1 px-4 md:px-20 lg:px-40 py-12">
      <h1 class="text-4xl font-black">Nueva Página</h1>
      <p class="text-lg text-slate-600 dark:text-slate-300">
        Contenido de la página
      </p>
    </main>
  </div>
  <Footer />
</Layout>

Access the new route

Navigate to http://localhost:4321/nueva-pagina to see your new page.

Add to navigation

Update the navigation in src/components/Header.astro:

const listItems = [
  { tag: "Inicio", link: "/" },
  { tag: "Proyecto", link: "/proyecto" },
  { tag: "Noticias", link: "/noticias" },
  { tag: "Requisitos", link: "/requisitos" },
  { tag: "Nueva Página", link: "/nueva-pagina" }, // Add this
  { tag: "Contacto", link: "/contacto" },
];

Using Components

The project includes reusable components. Here’s how to use the Button component:

---
import Button from "../components/Button.astro";
---

<!-- Primary button -->
<Button type="primary" link="/contacto">
  Contáctanos
  <span class="material-symbols-outlined">arrow_forward</span>
</Button>

<!-- Secondary button with full rounding -->
<Button type="secondary" rounded="full" link="/proyecto">
  Ver Proyecto
</Button>

<!-- WhatsApp button -->
<Button type="whatsapp" link="https://wa.me/593999730617">
  <span class="material-symbols-outlined">chat</span>
  WhatsApp
</Button>

Updating Project Data

The member count and project data are centralized in src/data/state.ts:

export const socios = {
  maximo: 64,        // Maximum number of members
  actual: 32,        // Current number of members
  porcentaje: () => Math.round((socios.actual / socios.maximo) * 100),
}

To update the current member count:

Open src/data/state.ts
Change the actual value
Save the file
The homepage will automatically update to show “Más de X familias ya son parte de este sueño”

Environment Setup

VS Code Extensions

The project includes recommended VS Code extensions in .vscode/extensions.json:

{
  "recommendations": [
    "astro-build.astro-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}

Install these extensions for:

Astro syntax highlighting
Astro IntelliSense
Tailwind CSS class autocompletion
Tailwind CSS hover previews

Dark Mode Support

The site includes built-in dark mode support through Tailwind CSS:

<body class="bg-light font-display text-slate-900 
             dark:text-slate-100 dark:bg-dark">
  <slot />
</body>

Dark mode classes are automatically applied based on user’s system preferences.

Troubleshooting

Port Already in Use

If port 4321 is already in use, you can specify a different port:

npm run dev -- --port 3000

Clear Cache

If you encounter build issues, try clearing Astro’s cache:

rm -rf node_modules/.astro
npm run dev

Reinstall Dependencies

If dependencies are corrupted, reinstall them:

rm -rf node_modules package-lock.json
npm install

Next Steps

Now that you have the project running locally, explore these topics:

Component Library

Learn about all available components and how to use them

Styling Guide

Understand the Tailwind CSS setup and design system

Deployment

Deploy your site to production hosting

Project Structure

Understand how the project is organized

Need Help? Check the Astro documentation or join the Astro Discord community for support.

​Quick Installation

​Prerequisites

​Installation Steps

​Available Scripts

​Development

​Build for Production

​Preview Production Build

​Run Astro CLI

​Project Structure

​Development Workflow

​Hot Module Replacement

​Adding New Pages

​Using Components

​Updating Project Data

​Environment Setup

​VS Code Extensions

​Dark Mode Support

​Troubleshooting

​Port Already in Use

​Clear Cache

​Reinstall Dependencies

​Next Steps

Component Library

Styling Guide

Deployment

Project Structure

Quick Installation

Prerequisites

Installation Steps

Available Scripts

Development

Build for Production

Preview Production Build

Run Astro CLI

Project Structure

Development Workflow

Hot Module Replacement

Adding New Pages

Using Components

Updating Project Data

Environment Setup

VS Code Extensions

Dark Mode Support

Troubleshooting

Port Already in Use

Clear Cache

Reinstall Dependencies

Next Steps