No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Variables de entorno

14/28
Recursos

Aportes 27

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

El archivo deberia llamrse 鈥.env.example鈥 y as铆 pueden ver el icono de las variables de entorno si usan la extension 鈥淢aterial Icon Theme鈥

馃攽 Variables de entorno

<h4>Apuntes</h4>
  • 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?

Al fin entiendo lo que es una variable de entorno!! 馃槃

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.

<h3>Variables de entorno</h3>

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.

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!

Para los que les sale el error 鈥淔ailed 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 鈥渄otenv-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/

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.

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.

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

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

Holo, de nuevo 馃槈


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

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.

<h4>Instalaci贸n</h4>
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.

<h4>Configuraci贸n</h4>

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!