Prerequisites
Before you begin, ensure you have:- Node.js 18+ installed on your system
- npm, pnpm, or yarn package manager
- Git for version control
Getting Started
Install dependencies
Install all required packages:This installs Astro, Tailwind CSS, TypeScript, and all other dependencies.
Start the development server
Launch the local development server:Open your browser to http://localhost:4321 to see your site running.
The dev server supports hot module replacement (HMR), so your changes will appear instantly in the browser.
Add your first word
Create a new file in Create the English version in
src/content/words-es/ with a Guatemalan slang word:File: src/content/words-es/chilero.mdsrc/content/words-en/chilero.md:View your new word
Your new word will automatically appear on the homepage (if
featured: true) and in the word index at:- Spanish: http://localhost:4321/es/palabras/chilero
- English: http://localhost:4321/en/palabras/chilero
What Just Happened?
You’ve successfully: ✅ Set up a local Astro development environment✅ Installed all dependencies including Tailwind CSS
✅ Started the development server with HMR
✅ Created a bilingual word entry using Content Collections
✅ Validated your content with Zod schemas
Next Steps
Now that you have Chapinismos running locally, explore these topics:Add More Words
Learn the complete workflow for adding words, including validation and best practices.
Content Collections
Understand how Astro Content Collections work and how to query word data.
Customize Styling
Modify colors, fonts, and design tokens to match your preferences.
Project Structure
Explore the codebase organization and understand where everything lives.
Internationalization
Learn how the bilingual system works and how to add more languages.
Build & Deploy
Build for production and deploy to Vercel, Netlify, or other platforms.
Common Development Commands
Here are the npm scripts you’ll use frequently:| Command | Description |
|---|---|
npm run dev | Start development server on port 4321 |
npm run build | Build for production |
npm run preview | Preview production build locally |
npm run format | Format all files with Prettier |
npm run lint | Lint code with ESLint |
npm run lint:fix | Auto-fix linting issues |
Troubleshooting
Port 4321 is already in use
Port 4321 is already in use
If another process is using port 4321, you can specify a different port:
Zod validation errors
Zod validation errors
If you see validation errors like
"word" is required, check that your word file has all required frontmatter fields:word(string)meaning(string)examples(array of strings)category(valid enum value)
Changes not appearing
Changes not appearing
If your changes aren’t showing up:
- Check the terminal for build errors
- Try refreshing the browser with Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
- Restart the dev server
Module not found errors
Module not found errors
If you see module errors:
Need Help?
View GitHub Repository
Browse the source code and open issues
Contributing Guide
Learn how to contribute to the project
For a more detailed setup guide, see the Installation page.