Variables de entorno

El archivo deberia llamrse “.env.example” y así pueden ver el icono de las variables de entorno si usan la extension “Material Icon Theme”

🔑 Variables de entorno

• Es importante considerar las variables de entorno va a ser un espacio seguro donde podemos guardar datos sensibles
  • Por ejemplo, subir llaves al repositorio no es buena idea cuando tienes un proyecto open source
• Para instalar debemos correr el comando

NPM

npm install -D dotenv-webpack

YARN

yarn add -D dotenv-webpack

• Posteriormente debemos crear un archivo .env donde estarán la clave para acceder a la misma y el valor que contendrán

  # Ejemplo
  API=https://randomuser.me/api/
  

  • Es buena idea tener un archivo de ejemplo donde, el mismo si se pueda subir al repositorio como muestra de que campos van a ir

• Una vez creado el archivo .env debemos agregar la siguiente configuración en webpack.config.js

...
const Dotenv = require('dotenv-webpack');
module.exports = {
	...
	plugins: [
		new Dotenv()
  ],
}

• dotenv-webpack ⇒ Leera el archivo .env por defecto y lo agregar a nuestro proyecto
• Para usarlas debes hacer lo siguiente

const nombre = process.env.NOMBRE_VARIABLE;

• Toda la configuración se podrá acceder desde process.env

Las variables de entorno son variables externas a nuestra aplicación que residen en el sistema operativo o en el contenedor de la aplicación que se está ejecutando. Una variable de entorno es simplemente un nombre asignado a un valor como una variable es cualquier lenguaje de programación.
Aquí te dejo esta lectura super genial de variables de entorno

Usualmente los framework de frontend como vue o react ya soportan el uso de variables de entorno de manera nativa, existe alguna ventaja adicional de hacerlo con webpack?

En clases pasadas hubo varios comentarios quejándose de que Óscar no explicaba para qué servía cada cosa (entre ellos el mío), que solo lo decía como una receta. Pero en esta clase ha explicado para qué sirven las variables de entorno y ha comentado ejemplos de uso. ¡Muchas gracias, Óscar!

más sobre process💻

Si no sabes de dónde viene ese objeto process te recomiendo que cheques esta clase del curso de fundamentos de node (es más, todo el curso).
.
Pero, en resumen, process es un objeto global que viene instalado con Node.js (¿recuerdas? la forma de ejecutar Javascript del lado del servidor💻) y sirve para escuchar eventos del programa que estás creando. ¿Esto significa que la app que estoy programando es un proceso? Es correcto.
.
En computación tanto tu CPU como tu GPU son capaces de correr múltiples procesos y dentro de cada proceso hay un hilo. Es decir, tu programa es un proceso que tiene distintos módulos enfocados a hacer diferentes cosas, cada una de ellas siendo un hilo. De esta forma, puedes usar Node.js para averiguar información del programa que estás construyendo. Puedes determinar funciones que hagan algo cuando se encienda o termine tu programa process.on, puedes acceder a variables de entorno process.env, puedes manejar errores, etc.

Al fin entiendo lo que es una variable de entorno!! 😄

Cuando el proyecto se hace más grande y otras personas van a trabajar en él, usamos estas variables que hacen referencia a un punto específico del proyecto.

En webpack usaremos npm i dotenv-webpack -D

Creamos un archivo .env y este NO se sube al repositorio.
Creamos un archivo .env.example que tendrá las variables vacías, este sí se puede subir al repositorio.

Para los que les sale el error “Failed to load ./.env.” deben agregar a su configuración en plugins el path para que webpack lo pueda encontrar.

new Dotenv({
      path: "./src/.env",
    }),

Configuración de variables de entorno:

1. Descargamos la dependencia “dotenv-webpack”:

npm i dotenv-webpack -D

1. Creamos los archivos “.env” y “.env.example”:

archivo “.env”

nombre_de_variable=valor

archivo “.env.example”

nombre_de_variable=

1. Configuración en webpack.config.js

const Dotenv = require('dotenv-webpack');

module.exports = {
	plugins: [
		new Dotenv(),
	]
}

API= https://randomuser.me/api/

Holo, de nuevo 😉

new Dotenv({
      path: path.resolve(__dirname, '.env')
    }),

Las variables de entorno las empece a usar hace poco, y la verdad es que resuelven la vida. Sobretodo si vas a usar distintas bases de datos para producción y desarrollo por ejemplo.

A mi no me funciono la font desde el primer momento, no se que hice mal

Me gusto esta explicación!!

Por ejemplo: Yo hago una base de datos de mis productos (E-commerce), con una variable de entorno yo protejo mi información de cualquier persona ? Obvio, sólo el desarrollador la sabría.

recordemos que el archivo .env debe estar por fuera del src y si no funciona despues de instalar ( npm install -D dotenv-webpack) deberás eliminar la carpeta node_modules y el archivo package-lock.json

Las variables de entorno son valores que pueden ser definidos por el sistema operativo o por el usuario y que están disponibles para cualquier proceso en ejecución en el sistema. Estas variables se utilizan para proporcionar información importante al sistema y a las aplicaciones que se ejecutan en él.

Algunas de las variables de entorno más comunes incluyen:

PATH: especifica las rutas de acceso a los directorios que contienen los ejecutables de los comandos que se pueden ejecutar en la línea de comandos.
HOME: especifica la ubicación de la carpeta principal del usuario.
TEMP: especifica la ubicación de la carpeta temporal del sistema.
USER: especifica el nombre del usuario que ha iniciado sesión en el sistema.
Las variables de entorno son útiles porque permiten que los programas accedan a información importante sin tener que conocer la configuración exacta del sistema en el que se están ejecutando. También permiten que los usuarios personalicen el comportamiento de los programas y del sistema operativo de acuerdo con sus necesidades específicas.

Variables de entorno

Espacio seguro donde tendremos las variables como conexiones a bases de datos o puntos de configuración que no queremos exponer en el código.

Instalamos la dependencia que nos ayuda a trabajar con variables de entorno npm install dotenv-webpack -D

Creamos el archivo .env, el cual no debe estar en el repositorio, y un archivo .env-example donde hay un ejemplo.

En el archivo de configuración de Webpack plasmamos lo siguiente para poder hacer uso de las variables de entorno:

const DotEnv = require("dotenv-webpack");
// Añadimos esta instancia a los plugins de webpack
plugins: [
    ...
    new DotEnv(),
  ],

Toma: https://randomuser.me/api/
Se que lo estabas buscando

Variables de entorno

npm i dotenv-webpack -D

El archivo .env, no se sube al repositorio, cuando ingresas a un equipo debería pedirme a mi superior que me provea la variable de entorno.
Archivo .env

API = 'https://randomuser.me/api/'

En el archivo de webpack las configuraciones.

Lo que se añadio de importante:

const Dotenv = require('dotenv-webpack');
plugins: [
        new Dotenv()
    ],

El archivo completo

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
	entry:  './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        assetModuleFilename: 'assets/images/[hash][ext][query]'
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            '@utils': path.resolve(__dirname, 'src/utils/'),
            '@templates': path.resolve(__dirname, 'src/templates/'),
            '@styles': path.resolve(__dirname, 'src/styles/'),
            '@images': path.resolve(__dirname, 'src/assets/images/')
        }

    },
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css|.scss|.styl$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader',
            ]
        },
        {
            test: /\.png/,
            type: 'asset/resource'
        },
        {
            test: /\.(woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    mimetype: "application/font-woff",
                    name: "[name].[contenthash].[ext]",
                    outputPath: "../assets/fonts/",
                    publicPath: "../assets/fonts/",
                    esModule: false,
                }
            }
        }

    ]},
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'assets/[name].[contenthash].css'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images"),
                    to: "assets/images"
                }
            ],
        }),
        new Dotenv()
    ],
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserPlugin(),
        ]
    }

}

Curioso.
Puse

API= https://randomuser.me/api/

funcionó y puse

API= "https://randomuser.me/api/"

Y también funcionó

Llevo años queriendo aprender a usar esto XD

14.-Variables de entorno

.
Es el espacio seguro donde podemos guardar las variables como: conexiones a bases de datos o elementos que hacen referencia a un punto específico de la configuración del proyecto, pero que no queremos exponer dentro del código.
.
Como usarlas en webpack:

• Instalar la dependencia que nos permitirá trabajar con ellas:

npm install dotenv-webpack -D

• Configurar en webpack:

  • Crear archivo .env, donde van a ir las variables de entorno NOTA: env NO SE SUBE AL REPOSITORIO, si entramos a un proyecto debemos pedirla al lider de equipo o personas que trabajen en el proyecto ya que es algo secreto.

  //Añadimos la API que estamos usando
  API = https://randomuser.me/api
  

  • Crear archivo .env-example que tendrá los elementos ejemplo de que variables necesita el proyecto. Este si se sube al repositorio pero sin las variables asignadas.

  //Se pone el elemento pero sin la URL ya que solo es un ejemplo.
  API = 
  
  

  • Ahora en el archivo de webpack generamos la configuración necesaria.

  plugins: [
      new Dotenv(),
    ],
  

Ahora para usarla vamos a src/utils/getData.js donde estamos guardando la API y la mandamos llamar desde las variables de entorno, de esta manera estamos protegiendo el código en especial los datos sensibles. Esto se hace de la siguiente manera:

const API = process.env.API;

¿Para que sirve el archivo .env y las variables de entorno en general?

La razón por la cual hay variables de entorno y el archivo .env, es para mantener ciertos links o información privada. Y para poder enlazar esa informacion privada a nuestro proyecto, lo que hacemos es usar el plugin dotenv-webpack
.
En el .gitignore que ya viene en el proyecto por defecto, nosotros podemos ver que ya viene incluido el archivo .env y .env.test, por lo que al menos en la clase, ya no tenemos que agregarlos para que no se manden al repositorio.
.
Y por ultimo, el archivo .env.example es el que va a ser visible, por lo que de esa forma, tu como desarrollador podrás saber que links o información pedirle a tu equipo de trabajo. Aunque los buenos equipos de trabajo te debieron haber mandado esos archivos antes de que tu se los pidas

Cuando trabajamos con proyectos que van creciendo y tenemos que compartir, hay que considerar las variables de entorno, son las variables que hay que utilizar, ya sea conecciones a BD o elementos que hacen referencia a un punto especifico y que no queremos exponer dentro del codigo.

Para esto primero tenemos que instalar una nueva dependencia que es:

npm install dotenv-webpack -D

Ahora tenemos que agregar toda la configuracion en nuestro archivo. Pero primero tenemos que crear un archivo llamado ‘.env’ Esto no se sube al repositorio, es algo secreto que solo vive en nuestra computadora, Tambien es necesario crear un archivo ‘.env-example’ que va tener los elementos ejemplo de que variables necesita este proyecto.

Para guardar ya las variables de entorno usamos:

API=https://randomuser.me/api

Y en .env-example agregaremos:

API=

Porque solo es un ejemplo de que variables de entorn otenemos, mas no las asignadas, este si estara en nuestro repositorio pero sin los valores.

Ahora configuraremos en webpack con lo siguiente:

const Dotenv = require('dotenv-webpack');

Ahora en la parte de los plugin lo vamos a agregar:

new Dotenv(),

Ahora vamos a poder buscar leer las variables de entorno directamente en los archivos de la siguiente forma:

const API = process.env.API.

Es muy importante tener en cuenta que usar variables de entorno en el frontend no protege la información cuando se despliega, solo la elimina del código fuente. Como se ve en 5:05, la información privada está en el código de producción.

Variables de entorno

Cuando trabajamos con proyectos que van creciendo y tenemos que compartirlos con otros compañeros, es importante considerar las variables de entorno.
⠀
Es un espacio seguro donde podremos tener estas variables, ya sea conexiones a bases de datos o elementos que hacen referencia a un punto especifico de la configuración del proyecto, pero no queremos exponerlo frente a ningún código.
⠀

npm install dotenv-webpack -D

Luego de instalarlo, tenemos que configurarlo. En la carpeta principal, vamos a crear un file .env
⠀
Este archivo no se sube al repositorio, si en el trabajo quieres debes solicitar estas variables a tu líder. Pues es algo secreto, que solo vive en tu computadora.
⠀
Por eso mismo, creamos un .evn-example, donde las variables vienen declaradas pero no inicializadas. De esta forma los desarrolladores saben que existen, pero tienen que autorizarles usarlas.
⠀

Para configurar el plugin vamos a nuestro webpack.config.js

const Dotenv = require('dotenv-webpack')

Luego llamamos el plugin.

plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/[name].[contenthash].css'
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"),
          to: "assets/images"
        }
      ]
    }),
    ***new Dotenv(),***
  ],

Ahora que ya está instalado y configurado, podemos utilizar nuestras variables de entorno.

# Agregar un API
API= https://randomuser.me/api/

Inicializando la constante en .env podremos llamarla.

Y la llamaremos en nuestro getData. De esta forma no se puede ver el valor real de API, es una medida de seguridad.

const API = process.env.API;

const getData = async (id) => {
  const apiURl = id ? `${API}${id}` : API;
  try {
    const response = await fetch(apiURl);
    const data = await response.json();
    return data.results[0];
  } catch (error) {
    console.log('Fetch Error', error);
  };
};

export default getData;

Buena clase!