DEV Community: JEstebanDev

Configuración de Variables de Entorno en Angular 20

JEstebanDev — Sun, 19 Oct 2025 23:58:10 +0000

Descripción General

Este proyecto utiliza la librería @ngx-env/builder para manejar variables de entorno de manera segura y eficiente en aplicaciones Angular. Este enfoque permite inyectar variables de entorno durante el proceso de build, manteniendo la seguridad y flexibilidad necesarias para diferentes entornos.

Arquitectura del Sistema

1. Dependencias Principales

El proyecto utiliza las siguientes dependencias clave:

para instalar npm i @ngx-env/builder

{
  "dependencies": {
    "@ngx-env/builder": "^20.1.1"
  }
}

2. Configuración del Builder

En angular.json, el proyecto está configurado para usar el builder personalizado de @ngx-env:

{
  "architect": {
    "build": {
      "builder": "@ngx-env/builder:application",
      "options": {
        "browser": "src/main.ts",
        "tsConfig": "tsconfig.app.json"
      }
    },
    "serve": {
      "builder": "@ngx-env/builder:dev-server"
    }
  }
}

Proceso de Configuración Paso a Paso

Paso 1: Definir Variables de Entorno

1.1 Crear archivo `.env`

Puedes crear un archivo .env en la raíz del proyecto:

# .env
NG_APP_ANGULAR_VALUE=Mi valor de desarrollo
NG_APP_API_URL=https://api-dev.ejemplo.com
NG_APP_VERSION=1.0.0

Paso 2: Definir Tipos TypeScript

En src/env.d.ts, define las interfaces para tus variables de entorno:

declare interface Env {
  readonly NODE_ENV: string;
  readonly NG_APP_ANGULAR_VALUE: string;
  readonly NG_APP_API_URL: string;
  readonly NG_APP_VERSION: string;
  [key: string]: any;
}

// Usar _NGX_ENV_ (personalizable)
declare const _NGX_ENV_: Env;

Paso 3: Configurar Archivos de Entorno

3.1 Archivo de Desarrollo (`src/environment/environment.ts`)

export const environment = {
  production: false,
  mensaje: _NGX_ENV_.NG_APP_ANGULAR_VALUE,
  apiUrl: _NGX_ENV_.NG_APP_API_URL,
  version: _NGX_ENV_.NG_APP_VERSION,
};

3.2 Archivo de Producción (`src/environment/environment.prod.ts`)

export const environment = {
  production: true,
  mensaje: _NGX_ENV_.NG_APP_ANGULAR_VALUE,
  apiUrl: _NGX_ENV_.NG_APP_API_URL,
  version: _NGX_ENV_.NG_APP_VERSION,
};

Paso 4: Usar Variables en el Código

Tutorial para el paso 4 tambien util

4.1 Importar el entorno

import { environment } from './environment/environment';

export class MiComponente {
  constructor() {
    console.log('Mensaje:', environment.mensaje);
    console.log('API URL:', environment.apiUrl);
    console.log('Versión:', environment.version);
  }
}

Convenciones de Nomenclatura

Variables de Entorno

Prefijo obligatorio: Todas las variables deben comenzar con NG_APP_
Ejemplos válidos:
- NG_APP_API_URL
- NG_APP_VERSION
- NG_APP_DEBUG_MODE

Variables del Sistema

NODE_ENV: Se configura automáticamente
NG_APP_*: Variables personalizadas de la aplicación

Comandos de Build y Desarrollo

my-angular-app
└── src
    └── environments
        ├── environment.ts
        ├── environment.development.ts
        ├── environment.pilot.ts
        └── environment.production.ts

Ahora tendras que modificar el angular.json

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true
  },
"development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.development.ts"
      }
    ],
    "optimization": false,
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false
  }
},
"pilot": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true
  },
"development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.development.ts"
      }
    ],
    "optimization": false,
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false
  }
}

En el mismo archivo angular.json tendras que modificar el serve

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "my-angular-app:build:production"
            },
            "development": {
              "buildTarget": "my-angular-app:build:development"
            },
            "pilot": {
              "buildTarget": "my-angular-app:build:pilot"
            },
          },
          "defaultConfiguration": "development"
        },

Luego tendras que agregar los comandos personalizados package.json

{
  "name": "my-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:dev": "ng serve --configuration=development",
    "start:pilot": "ng serve --configuration=pilot",
    "start:prod": "ng serve --configuration=production",
    "build:dev": "ng build --configuration=development",
    "build:pilot": "ng build --configuration=pilot",
    "build:prod": "ng build --configuration=production"
  },
  "private": true,
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

⚠️ Limitaciones Importantes

Variables Secretas - NO RECOMENDADO

Este enfoque NO es seguro para variables secretas por las siguientes razones:

1. Exposición en el Cliente

Las variables se inyectan en tiempo de build
Se incluyen en el bundle JavaScript final
Son visibles para cualquier usuario que inspeccione el código

2. Acceso Público

// ❌ NUNCA hagas esto con secretos
export const environment = {
  apiKey: _NGX_ENV_.NG_APP_SECRET_KEY, // ¡VISIBLE EN EL CLIENTE!
};

3. Alternativas Seguras para Secretos

Para variables secretas, usa:

Backend Proxy: El frontend solicita datos al backend, que maneja los secretos
API Keys Públicas: Solo para APIs que requieren keys públicas
Autenticación JWT: Tokens temporales generados por el backend
Variables de Servidor: Configurar en el servidor web (nginx, Apache)

Ejemplo de Implementación Segura:

// ❌ Incorrecto - secreto en el frontend
const secretKey = _NGX_ENV_.NG_APP_SECRET_KEY;

// ✅ Correcto - solicitar al backend
this.http.get('/api/data').subscribe(data => {
  // El backend maneja los secretos
});

Casos de Uso Apropiados

✅ Variables Seguras para el Cliente

URLs de APIs públicas
Configuraciones de UI
Versiones de aplicación
Flags de características
Configuraciones de entorno (dev/staging/prod)

❌ Variables que NO deben usarse

API keys secretas
Tokens de autenticación
Credenciales de base de datos
Claves de encriptación
Cualquier información sensible

Mejores Prácticas

Prefijo consistente: Siempre usa NG_APP_
Tipado fuerte: Define interfaces en env.d.ts
Valores por defecto: Proporciona fallbacks cuando sea posible
Documentación: Documenta todas las variables requeridas
Validación: Valida variables críticas en tiempo de ejecución

Ejemplo Completo

Estructura de archivos:

src/
├── env.d.ts
├── environment/
│   ├── environment.ts
│   └── environment.prod.ts
└── app/
    └── mi-componente.ts

Configuración completa:

// env.d.ts
declare interface Env {
  readonly NG_APP_API_URL: string;
  readonly NG_APP_VERSION: string;
  readonly NG_APP_DEBUG: string;
}

declare const _NGX_ENV_: Env;

// environment.ts
export const environment = {
  production: false,
  apiUrl: _NGX_ENV_.NG_APP_API_URL || 'http://localhost:3000',
  version: _NGX_ENV_.NG_APP_VERSION || '1.0.0',
  debug: _NGX_ENV_.NG_APP_DEBUG === 'true',
};

Este enfoque proporciona una solución robusta y segura para manejar variables de entorno en aplicaciones Angular, manteniendo la separación entre configuraciones públicas y secretos sensibles.

Cómo Conseguir Empleo sin Morir en el Intento 💀

JEstebanDev — Sun, 14 Sep 2025 06:05:34 +0000

¡Qué mas parceros bien o no! ¿Cómo están? 😎 Bienvenidos a otro vlog donde vamos a hablar de un tema que a todos nos ha quitado el sueño alguna vez: ¡Cómo conseguir empleo sin morir en el intento! 😵

Y no, no es exageración. A veces parece que para conseguir trabajo necesitas la experiencia de un veterano de 50 años, la energía de un adolescente de 15 y el sueldo de un becario. ¡Un chiste! 😂 Ves una oferta de empleo y ¡PUM! 💥 100 personas ya aplicaron. Sientes que tu CV se va a un agujero negro del que jamás regresa. 🌌

Pero no teman, porque hoy su compa favorito les trae un roadmap. 🗺️ Basado en mi propia experiencia, en mis tropiezos y en todo lo que he aprendido. Así que pónganse cómodos, traigan su cafecito y ¡empecemos! ☕️

Paso 1: La Fundación - ¡Construyendo tu Arsenal! ⚔️

Antes de ir a la guerra, necesitas tus armas. Y no, no hablo de espadas ni nada de eso, ¡tranquilos! Hablo de lo que te hará irresistible para los reclutadores. 💪

A. ¿Sin experiencia? ¡Crea la tuya! ✨

Este es el clásico "necesitas experiencia para tener experiencia". ¡Qué dolor de cabeza! 😫 Lastimosamente, sin experiencia laboral, muchos te van a cerrar la puerta en la cara. 🚪👋 ¿Mi consejo de oro? ¡Crea proyectos REALES que solucionen problemas REALES! 💡

Piensa en algo que te moleste, algo que un amigo necesite, o un pequeño negocio de tu barrio. ¿Puedes hacerles una web? ¿Automatizarles un proceso? ¡Hazlo! Y si puedes ganar algo de dinero con ello, ¡mucho mejor! 💰

Esto hace dos cosas mágicas: 🪄

Reafirma lo que sabes y te muestra en qué necesitas mejorar. Adiós, síndrome del impostor. 👋
¡Te da experiencia demostrable! Ya no eres "alguien que estudió X", eres "la persona que hizo Y proyecto que logró Z resultado". 🏆

B. Conocimientos y Habilidades Clave 🔑

Tecnologías 💻: Abre 10 ofertas de trabajo para el puesto que sueñas. ¿Ves que todas piden React, Python y AWS? ¡Esa es tu lista de estudio! Haz proyectos personales usando esas herramientas. No solo leas, ¡CONSTRUYE! 🏗️
¡El Inglés, por favor! 🗣️: ¿Quieres resaltar de verdad y multiplicar tus ingresos? 💸 ¡Aprende inglés! Y ojo, no necesitas ser un C2. A los reclutadores les importa que entiendas y te hagas entender. ¡Que la conversación fluya! Hoy con la IA tienes miles de herramientas para practicar, ¡no hay excusas! 😤
Inteligencia Artificial (IA) 🤖: Esto ya no es opcional, es OBLIGATORIO ‼️. Aprende a usar las herramientas de IA como tu copiloto. Te ayudarán a aprender más rápido, a resolver problemas y a mejorar tu código. Pero ¡cuidado! La IA no es perfecta, a veces se equivoca porque no entiende el contexto. Úsala como un asistente súper inteligente, no como tu cerebro. 🧠

Paso 2: El Empaque - ¡Cómo Vender tu Talento! 🎁

Ya tienes las habilidades, ¡genial! Ahora hay que presentarlas de una forma que la gente diga: "¡Necesito a esta persona en mi equipo!". 🙌

A. Tu CV: El Héroe de la Historia 🦸‍♂️

Tu CV es tu carta de presentación. ¡Es lo más importante! 💯

Formato ATS: Muchos CVs son leídos primero por un robot (un sistema ATS). Si no le gusta el formato, ¡a la basura! 🗑️ Busca plantillas "ATS-Friendly".
¡Véndete! 📣: Ahora que tienes experiencia (de tus proyectos, ¿recuerdas?), descríbela como un campeón. En 3 o 4 puntos por proyecto/empleo, explica qué problema solucionaste y qué resultado lograste. Tu CV debe gritar: "¡Soy increíble!". 😎 Apréndetelo como la palma de tu mano, porque te lo van a preguntar.

B. Tu Portafolio: La Galería de Arte 🎨

Arma un portafolio online que demuestre quién eres y qué eres capaz de hacer. Muestra tus proyectos, explica el proceso, pon links. ¡Que la gente vea tu trabajo en acción! 👀 Si no sabes por dónde empezar, te dejo una figma que hice, no mas para que digas que no te consiento. 😉
Y si el front-end no es tu especialidad, hay muchas herramientas que puedes usar no-code para crear un portafolio, te dejo algunas:

Paso 3: La Cacería - ¡Estrategia y Acción! 🎯

¡Listos para la acción! 🔥 Aquí es donde aplicamos y nos enfrentamos al mundo.

A. La Postulación Inteligente 🧐

No dispares a todo lo que se mueva. 🔫❌

Filtra bien: Busca empresas que te ayuden a crecer. Investígalas en Glassdoor, lee los comentarios, ¡habla con gente que trabaje ahí por LinkedIn! 🕵️‍♂️
Calidad sobre cantidad: Envía al menos 5 postulaciones al día, pero bien hechas. Lleva un registro en un Excel. Sí, puede ser duro ver cuántas envías y cuántas responden, pero esos datos son VALIOSÍSIMOS 💎 para ver si tu CV está funcionando o si necesita ajustes.
El tiempo es oro ⏳: Postúlate a ofertas que tengan menos de 3 días. ¡Así aumentas tus chances de que te vean!

B. La Entrevista: ¡Tu Momento de Brillar! ✨

¡El que mejor comunica, GANA! 🏆

Apréndete tu speech: Tienes que sonar como disco rayado, pero el mejor disco rayado de la historia. 💿 Prepara tu presentación, tus fortalezas, tus proyectos. Practica con la IA, grábate, ¡lo que sea necesario! Con cada entrevista, irás puliendo tu discurso.
Cada entrevista es una clase gratis 🎓: Míralo así. Aprendes algo nuevo, practicas y mejoras. Y siempre, SIEMPRE, pide feedback al final. 🙏

C. Las Pruebas Técnicas: El Jefe Final 👾

Ok, seamos honestos. Muchas pruebas técnicas son... terribles. 🤢 Te piden algoritmos que nunca usarás o que construyas un sistema entero en un fin de semana. La realidad es que la mayoría de empresas las siguen usando. Así que, dedica tiempo a la semana a practicar en plataformas como LeetCode o HackerRank. No es lo ideal, pero es el juego que hay que jugar. Te dejo unos videos que me ayudaron a abordar estas pruebas sin querer lanzar la computadora por la ventana. 💻💥
How to Solve ANY Coding Interview Question in 6 Steps

How to Use LeetCode Effectively

Paso 4: La Mentalidad - ¡A Prueba de Balas! 🛡️

Esto es lo más importante.

No te lo tomes personal ❤️‍🩹: Los reclutadores a veces desaparecen. 👻 Es feo, pero pasa. No es tu culpa.
Enfócate en lo que puedes controlar 🧘‍♂️: Tu CV, tu portafolio, tu preparación. El resto, déjalo ir.
No cantes victoria antes de tiempo: He estado en el último filtro y me han dicho que no. ¡Duele como un 🤬! 😭 Así que mantén la calma y no hagas planes hasta que tengas el contrato firmado en tu mano. ✍️🤝

Ruta Alternativa: ¡El Camino del Emprendedor! 🚀

Y si después de todo esto sientes que el mundo corporativo no es para ti, siempre hay otra ruta: emprender. Crear tu propio proyecto, venderte como "solopreneur". Pero ese... es un tema para otro vlog. 😉

Y bueno, mi gente, ese es el mapa. 🗺️ No es un camino fácil, pero con estrategia, preparación y una buena dosis de paciencia, ¡se puede lograr! 💪 Espero que estos consejos les sirvan un montón.

Déjenme en los comentarios sus propias experiencias o si tienen algún otro tip. ¡No olviden darle like 👍, suscribirse 🔔 y nos vemos en el próximo vlog! ¡Ánimo, que ustedes pueden! 🙌

Un abrazo 🤗

How to get a job without losing your mind!

JEstebanDev — Sun, 14 Sep 2025 05:53:51 +0000

What's up, everyone! How's it going? 😎 Welcome to another vlog where we're going to talk about something that's kept us all up at night: How to get a job without losing your mind!

And no, that's not an exaggeration. Sometimes it feels like to get a job, you need the experience of a 50-year-old veteran, the energy of a 15-year-old, and an intern's salary. What a joke! 😂 You see a job post and BAM! 💥 100 people have already applied. It feels like your resume is getting sucked into a black hole, never to be seen again.

But fear not, because today your favorite guide is here with a roadmap🌎. This is all based on my own experience, my screw-ups, and everything I've learned along the way. So get comfy, grab your coffee, and let's dive in! ☕️

Step 1: The Foundation - Building Your Arsenal! ⚔️

Before you go to battle, you need your weapons. And no, I'm not talking about swords or anything, chill! I'm talking about what will make you absolutely irresistible to recruiters.

A. No Experience? Create Your Own!

This is the classic "you need experience to get experience" paradox. It's a total headache! 😫 Sadly, without work experience, many doors will be slammed in your face. My golden tip? Create REAL projects that solve REAL problems!

Think about something that annoys you, something a friend needs, or a small business in your neighborhood. Can you build them a website? Automate a process for them? Just do it! And if you can make some money from it, even better. 💰

This does two magical things:

It solidifies what you know and shows you where you need to improve. Goodbye, imposter syndrome. 👋
It gives you provable experience! You're no longer "someone who studied X," you're "the person who built Y project that achieved Z result."

B. Key Knowledge & Skills

Tech Stack 💻: Open 10 job offers for the position you're dreaming of. See how they all ask for React, Python, and AWS? That's your study list! Build personal projects using those tools. Don't just read, BUILD!
Artificial Intelligence (AI) 🤖: This is no longer optional, it's MANDATORY. Learn to use AI tools as your co-pilot. They'll help you learn faster, solve problems, and improve your code. But be careful! AI isn't perfect; it sometimes messes up because it doesn't get the context. Use it as a super-smart assistant, not as your brain.

Step 2: The Packaging - How to Sell Your Talent! 🎁

You've got the skills, awesome! Now you have to present them in a way that makes people say, "I NEED this person on my team!"

A. Your Resume: The Hero of the Story

Your resume is your calling card. It's the most important thing!

ATS-Friendly Format: Many resumes are first read by a robot (an ATS system). If it doesn't like the format, it goes straight to the trash! 🗑️ Look for "ATS-Friendly" templates.
Sell Yourself!: Now that you have experience (from your projects, remember?), describe it like a champ. In 3 or 4 bullet points per project/job, explain what problem you solved and what result you achieved. Your resume should scream, "I'm awesome!" Know it by heart, because they will ask you about it.

B. Your Portfolio: The Art Gallery 🎨

Build an online portfolio that shows who you are and what you can do. Showcase your projects, explain your process, and include links. Let people see your work in action! If you don't know where to start, I'm even dropping a Figma template I made, just so you can't say I don't spoil you. 😘

Step 3: The Hunt - Strategy & Action! 🎯

Ready for action! This is where we apply and face the world.

A. The Smart Application

Don't just spray and pray.

Filter Smartly: Look for companies that will help you grow. Research them on Glassdoor, read the reviews, and talk to people who work there on LinkedIn!
Quality over Quantity: Send at least 5 applications a day, but make them good. Keep a log in an Excel sheet. Yes, it can be tough to see how many you've sent versus how many have replied, but that data is GOLD for seeing if your resume is working or if it needs tweaks.
Time is Money: Apply to offers that are less than 3 days old. This boosts your chances of being seen!

B. The Interview: Your Time to Shine! ✨

The best communicator WINS!

Know Your Speech: You need to sound like a broken record, but the best broken record in history. Prepare your introduction, your strengths, your projects. Practice with AI, record yourself—whatever it takes! With each interview, you'll polish your script.
Every Interview is a Free Class: Look at it this way. You learn something new, you practice, and you improve. And always, ALWAYS, ask for feedback at the end.

C. The Tech Test: The Final Boss 👾

Okay, let's be honest. A lot of technical tests are... awful. They ask you to solve algorithms you'll never use or build an entire system over a weekend. The reality is, most companies still use them. So, dedicate some time each week to practicing on platforms like LeetCode or HackerRank. It's not ideal, but it's the game you have to play. I'm leaving you some videos that helped me tackle these tests without wanting to throw my computer out the window.
How to Solve ANY Coding Interview Question in 6 Steps

How to Use LeetCode Effectively

Step 4: The Mindset - Bulletproof! 🛡️

This is the most important part.

Don't Take It Personally: Recruiters sometimes ghost you. It sucks, but it happens. It's not your fault.
Focus on What You Can Control: Your resume, your portfolio, your preparation. Let the rest go.
Don't Count Your Chickens Before They Hatch: I've been in the final round and still been told no. It hurts like a 🤬! So stay calm and don't make plans until you have that signed contract in your hand.

Alternative Route: The Entrepreneur's Path! 🚀

And if after all this you feel like the corporate world isn't for you, there's always another path: becoming an entrepreneur. Creating your own project, selling yourself as a "solopreneur." But that... is a topic for another vlog. 😉 (Stay Tuned, Follow me!)

Alright, everyone, that's the map. It's not an easy path, but with strategy, preparation, and a healthy dose of patience, you can totally do it! I hope these tips help you out a ton.

Leave your own experiences or any other tips in the comments below. Don't forget to like, subscribe, and I'll see you in the next vlog! You've got this! 🙌

Cheers!

Forgotten passwords? Not with my foolproof trick: the art of personalized security

JEstebanDev — Wed, 05 Jul 2023 02:01:19 +0000

Two years ago, I discovered an ingenious trick to solve my constant problem of memorizing passwords, which I want to share with all of you in this short blog. 🎉

Going back two years, tired of forgetting my passwords, I decided to create a security pattern. At the time, I didn't give it much thought and simply mixed parts of my name, my favorite number, and some special characters. And voilà💡! I had my personalized password. But that wasn't all. Over time, my security pattern evolved and improved to become even more powerful. And now, I am here to share all my secrets with you. 🤫💪

I am conscious of the existence of more robust security protocols, including the implementation of two-factor authentication. Do you know how it works? First, you enter your password and then you get a code on your smartphone📱🔐. Then you have to enter that code to be able to access the site. There are also more modern systems, such as facial recognition or fingerprints🙌🔒.

The challenge lies in the fact that these methods are highly advanced, and their implementation is not yet widespread across all websites. This is where my security pattern shines✨. And the best part is that it's super simple to use. Alright, let me break it down for you in a way that sticks, so you'll always remember how to use it when you're coming up with your passwords😎.

It is an algorithm that uses certain personal data such as name, year of birth, or favorite color. I'll give you an example to help you understand it better. Most sites require a password of at least 8 characters that includes a number and a special character, such as (). From this rule, all you have to do is to generate a password that you don't repeat on different websites, and with that, you will get a much higher level of security 🔒!

Here is a practical example:
😊 Name: John
🌈 Favorite color: Blue (we'll take the vowels AU)
🐾 Pet name: Felix (we'll take the consonants FLX)
🎂 Year of birth: 1989

Using this data and adding two random special characters, such as: "!" you will get your security pattern🪄. An example could be John!AUFLX89, 89AUJohnFLX*!, FLX89AU*!John, and so on.

Besides that, if you add a zero, either at the beginning or at the end you can have a count of passwords for different accounts on the same website like Gmail, Facebook, etc🔄.

What do you think? It is an easy-to-remember method and it assures you better protection for your online accounts. Besides that, I have a surprise for you! I've recently created a Chrome extension that allows you to have custom patterns to protect your accounts. You should definitely check it out😉! KeyCrypt Chrome Extension

If you're curious about checking out the code or learning how I built this amazing extension, I've got you covered, go and check out my repository on GitHub. KeyCrypt Github

Feel free to explore and provide any feedback you may have.