Skip to main content
This guide will help you get the portfolio running locally in just a few minutes.

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 20.x or higher

npm/yarn/pnpm

Package manager of your choice

Angular CLI

Version 20.3.4 or higher
This project uses Angular CLI version 20.3.4. You can install it globally with npm install -g @angular/[email protected]

​
Installation

1

Clone the Repository

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

Install Dependencies

Install the required dependencies using your preferred package manager:
npm install
This will install all dependencies including:
  • Angular 20.3.0
  • Tailwind CSS 4.1.14
  • Express 5.1.0
  • RxJS 7.8.0
  • And other required packages
3

Start Development Server

Run the development server:
npm start
The application will be available at http://localhost:4200/. The development server automatically reloads when you modify source files.

​
Development Commands

Here are the essential commands you’ll use during development:

​
Start Development Server

Run the local development server with hot reload: 
npm start
This executes ng serve and starts the application at http://localhost:4200/.

​
Build for Production

Create an optimized production build: 
npm run build
This compiles the project and outputs the build artifacts to the dist/ directory. The production build is optimized for performance and speed.

​
Watch Mode

Build the project in development mode with file watching: 
npm run watch
This runs ng build --watch --configuration development and automatically rebuilds when files change.

​
Run Tests

Execute unit tests with Karma: 
npm test

​
Tailwind CSS Development

Watch and compile Tailwind CSS during development: 
npm run tailwind:watch
This monitors your styles and generates the Tailwind output CSS file.

​
Server-Side Rendering

Run the SSR server after building: 
npm run serve:ssr:portafolio
Make sure to build the project first with npm run build before running the SSR server.

​
Project Structure

After installation, you’ll find the following structure: 
portafolio/
├── src/              # Source files
│   ├── app/          # Angular components and services
│   ├── styles.css    # Global styles and Tailwind imports
│   ├── main.ts       # Client-side entry point
│   ├── main.server.ts # Server-side entry point
│   └── server.ts     # Express server configuration
├── public/           # Static assets
├── dist/             # Build output (generated)
├── angular.json      # Angular CLI configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json     # TypeScript configuration
└── package.json      # Dependencies and scripts

​
Configuration Files

​
Angular Configuration

The project is configured in angular.json with:
  • Source root: src/
  • Prefix: app
  • SSR enabled: Server-side rendering with Express
  • Output mode: Server mode for SSR support

​
Tailwind Configuration

Tailwind CSS v4 is configured with:
  • Dark mode: Class-based (darkMode: "class")
  • Custom colors: Primary blue (#1173d4), custom background colors
  • Font family: Inter for display text
  • Content paths: ./src/**/*.{html,ts}

​
Next Steps

Component Architecture

Learn about the standalone component structure

Tailwind Setup

Understand the Tailwind CSS v4 configuration

Development

Best practices for developing features

Deployment

Deploy the portfolio with SSR support

​
Troubleshooting

​
Port Already in Use

If port 4200 is already in use, you can specify a different port: 
ng serve --port 4300

​
Build Errors

If you encounter build errors, try:
  1. Delete node_modules and reinstall dependencies
  2. Clear Angular cache: ng cache clean
  3. Ensure you’re using Node.js version 20.x or higher

​
Tailwind Styles Not Loading

If Tailwind styles aren’t applied, make sure:
  1. The Tailwind watch command is running: npm run tailwind:watch
  2. The styles.css file imports Tailwind directives
  3. Your components are within the content paths defined in tailwind.config.js
For more detailed troubleshooting, check the Angular CLI documentation or the Tailwind CSS documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us