Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Node.js: Version 20.x or later (LTS recommended)
  • Angular CLI: Version 20.3.4
  • npm, yarn, pnpm, or bun: Package manager of your choice
This project uses Angular 20.3.0 with TypeScript 5.9.2 and includes Tailwind CSS 4.1.14 for styling.

​
Getting Started

1

Clone the repository

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

Install dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install all dependencies listed in package.json, including:
  • Angular 20.3.0 framework
  • Tailwind CSS 4.1.14
  • Express for server-side rendering
  • Testing tools (Karma, Jasmine)
3

Start the development server

Launch the Angular development server:
npm start
The application will be available at http://localhost:4200/. The development server includes hot module replacement, so changes to your code will automatically reload the browser.
4

Watch Tailwind CSS (Optional)

If you need to watch Tailwind CSS changes separately, run:
npm run tailwind:watch
This command watches src/styles.css and outputs to src/tailwind-output.css.

​
Project Structure

The project follows Angular’s standard structure: 
portafolio/
├── src/
│   ├── app/
│   │   ├── components/      # Application components
│   │   │   ├── about/
│   │   │   ├── contact/
│   │   │   ├── footer/
│   │   │   ├── header/
│   │   │   ├── hero/
│   │   │   └── projects/
│   │   ├── app.ts           # Root component
│   │   ├── app.routes.ts    # Application routing
│   │   └── app.config.ts    # Application configuration
│   ├── main.ts              # Application entry point
│   ├── main.server.ts       # SSR entry point
│   ├── server.ts            # Express server configuration
│   ├── styles.css           # Global styles
│   └── index.html           # HTML template
├── public/                  # Static assets
├── dist/                    # Build output directory
└── angular.json             # Angular workspace configuration

​
Configuration Files

​
angular.json

Defines the Angular workspace configuration, including build options, serve configuration, and test setup. Key configurations:
  • sourceRoot: src/
  • outputMode: server (enables SSR)
  • prefix: app (component selector prefix)

​
tsconfig.json

TypeScript compiler configuration with strict mode enabled:
  • target: ES2022
  • strict: true
  • experimentalDecorators: true
  • Strict Angular compiler options enabled

​
package.json

Defines project metadata, dependencies, and scripts. See Building and Testing for available scripts.

​
Development Workflow

Once the development server is running:
  1. Access the application at http://localhost:4200/
  2. Edit source files in the src/ directory
  3. View changes automatically in the browser
  4. Check the console for compilation errors or warnings
Make sure to run npm install after pulling new changes that modify package.json.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us