Skip to main content
This guide will walk you through setting up the Arte y Web Creaciones project for local development. You’ll go from zero to a running development server in just a few steps.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js 20.x - The project requires Node.js version 20
  • npm - Comes bundled with Node.js
  • Git - For cloning the repository
The project uses Node.js 20.x as specified in the .nvmrc file. If you use nvm, simply run nvm use in the project directory.

​
Installation Steps

1

Clone the repository

First, clone the project repository to your local machine:
git clone <repository-url>
cd astro-prueba
2

Install dependencies

Install all required npm packages:
npm install
This will install all dependencies including:
  • Astro 5.12.1 - The core framework
  • Tailwind CSS - For styling
  • MDX support - For content authoring
  • Astro Icon - Icon system
  • Free Astro Components - Component library
3

Start the development server

Launch the local development server:
npm run dev
The server will start on port 4322 (as configured in astro.config.mjs):
http://localhost:4322
Note that this project uses a custom port (4322) instead of Astro’s default port (4321).
4

Verify the installation

Open your browser and navigate to http://localhost:4322. You should see the Arte y Web Creaciones homepage with:
  • Hero section with pricing information
  • Trust badges
  • Service offerings (One Page, Professional, E-commerce)
  • Google reviews
  • Portfolio section
If you see the homepage, congratulations! Your development environment is ready.

​
Available Commands

Once installed, you can use these npm scripts from the project root: 
npm run dev
# Starts local dev server at localhost:4322

​
Project Structure Overview

After installation, you’ll find this folder structure: 
/
├── public/              # Static assets (images, fonts, etc.)
│   ├── img/            # Images and graphics
│   └── favicon.png     # Site favicon
├── src/
│   ├── components/     # Reusable Astro components (98 total)
│   ├── content/        # Content collections (blog, promos)
│   ├── layouts/        # Page layouts (Layout.astro, BlogPost.astro)
│   ├── pages/          # File-based routing pages
│   ├── sections/       # Large page sections
│   ├── styles/         # Global CSS files
│   └── content.config.ts  # Content collections schema
├── astro.config.mjs    # Astro configuration
├── tailwind.config.mjs # Tailwind CSS configuration
└── package.json        # Project dependencies

​
Next Steps

Now that your development environment is running:

Learn About Astro

Understand how Astro powers this project

Content Collections

Explore how content is structured and managed

Component Architecture

Discover the component patterns used throughout

Get Help

Find support resources and community help

​
Common Issues

If you see an error that port 4322 is already in use, you can either:
  1. Stop the process using that port
  2. Change the port in astro.config.mjs:
astro.config.mjs
export default defineConfig({
  server: {
    port: 4323, // Change to any available port
  },
  // ... rest of config
});
If you encounter errors about Node.js version, ensure you’re using Node.js 20.x:
node --version
# Should show v20.x.x
If using nvm:
nvm install 20
nvm use 20
The project uses Sharp for image optimization. If you encounter installation errors:
npm rebuild sharp
Or reinstall dependencies:
rm -rf node_modules package-lock.json
npm install

​
Development Tips

Hot Module Replacement (HMR): Astro automatically reloads your browser when you make changes to your code. You’ll see updates instantly without manual refreshes.
  • Path Aliases: The project uses @/* as an alias for src/*, so you can import with @/components/Alert.astro instead of relative paths
  • TypeScript: Full TypeScript support is enabled with strict mode
  • Tailwind CSS: All Tailwind utilities are available out of the box
  • MDX: You can use JSX components in Markdown files

​
Ready to Code?

You’re all set! Start exploring the codebase and making changes. The development server will automatically refresh as you work.

Build docs developers (and LLMs) love

Get started for freeTalk to us