Usando Nodemon y Dotenv

Clase 6 de 22 • Curso de Server Side Render con Express

Alver Alexander Grisales Ortega

student•

Mi aporte:

Crear un archivo index.js en una carpeta nueva llamada config dentro de server

import dotenv from 'dotenv';

dotenv.config();

const { ENV, PORT } = process.env;

export default {
    env: ENV,
    port: PORT,
}

y en server.js solo llamo esa configuración

import express from 'express';

import config from './config';

const { env, port } = config;

const app = express();
if (env === 'development') {
    console.log(env);
}

app.get('*', (req, res) =&gt; {
    console.log('hola man')
    res.send({ hello: 'express'}).end();
});


app.listen(port, (err) =&gt; {
    if (err) console.log(err);
    else console.log(`Server running on port ${port}`);
});

Carlos Sampol

Team Platzi•

Excelente aporte, de hecho usarlo asi es la manera mas limpia porque solo lo defines una vez.

Alver Alexander Grisales Ortega

student•

si es una buena manera de modularizar las cosas

Cristian Fabian Tovar

student•

Para que más adelante no haya inconvenientes para correr este proyecto en otra máquina o que se esté corriendo este proyecto en un commit posterior, es buena práctica dejar un .env.example para recordarle al desarrollador qué configuraciones de variables de entorno debe tener el proyecto

Robinson De La Cruz

student•

Si, buen aporte. Como el archivo .env no se debe subir al repositorio, se crea el .env.example indicando los parametros sin valores.

PORT=
ENV=

Sergio Perez

student•

Comparto mis notas, con algunos aportes agregados. Agradezco feedback:

Nodemon: nodemon es una herramienta que ayuda a desarrollar aplicaciones. Cuando se detecten cambios de archivo en el directorio Nodemon reiniciara automáticamente la aplicación de node.
```
npm install nodemon --dev
```
Teniendo instalado nodemon, podemos utilizarlo en nuestro script de desarrollo en el archivo de package.json
```
"start:dev": "nodemon src/server/index"
```
Dotenv: es un modulo de dependencia que carga variables de entorno desde un archivo .env para utilizarlas con process.env. esto permite que podamos tener la configuración del entorno almacenada y separada del código
```
npm install dotenv
```

para configurar dotenv tenemos que crear el archivo .env que es donde irán todas nuestras variables de entorno

ENV=development // Entorno de desarrollo en el cual estaremos trabajando
PORT=3000 // Puerto donde sera ejecutada la aplicacion

Es buena practica crear un archivo de configuración para eso , creamos un nuevo directorio llamado config y creamos un archivo llamado index.js. que tendrá lo siguiente:

require('dotenv').config(); //requerimos dotenv a la vez que ejecutamos la funcion config

const config = { // Definimos un objeto config
	//llamamos la variable ENV desde el process.env y hacemos una validacion de seguridad
	// para indicar que no estemos en modo de producción
	env: process.env.ENV !== 'production',  
	// de igual forma llamamos al puerto
	port: process.env.PORT,
};

//exportamos el objeto config
module.exports = { config };

En nuestro archivo de server.js importamos nuestro archivo de configuración que será el modulo donde están toda nuestra configuración de variables de entorno
```
const { config } = require('./config');
```

quedando server.js de la siguiente forma:

import express from 'express'
//importamos el archivo config con las variables
const { config } = require('./config');

const app = express();

//validación que sí estemos en desarrollo
if(config.env === 'development'){
	console.log('Development config');
}

app.get('*', (req, res) => {
	res.send({ hello: 'express' });
});

app.listen(config.port, (err) => {
	if (err) console.error();
	else console.log(`Server running on port: ${config.port}`);
})

Andres David Sanchez

student•

excelente aporte. agrego que es util crear un .env.example y subirlo al repositorio, este nos ayudara a recordar que vaiables debemos definir para correr nuestra aplicacion. Como el archivo original .env no se versiona, el de ejemplo nos ayudara

José Manuel Puicón Rodas

student•

console.log(server running in mode ${ENV} on port ${PORT});

Wilson Fernando Antury Torres

student•

Las variables de entorno son muy útiles para no exponer data sensible, como credenciales de conexión a bases de datos.

Garcia Gar

student•

Hola a todos tengo una duda como puedo configurar dos archivos .env.dev .env.prod y poder acceder desde el server de express

Gracias

Luis Lira

student•

¡Hola!

Para realizar eso lo que tienes que hacer es pasar el path de tu archivo en variables de entorno dentro de un objeto en el método config. De la siguiente manera:

require('dotenv').config({ path: './.env.prod' })
console.log(process.env.PORT)

La lógica de cuál usar ya sería algo que tienes que definir tú. En qué se basará para usar el .env.dev o el .env.prod

Esteban Martini

student•

a esta altura me surge la siguiente duda, la configuracion de babel require en el archivo index, es principalmente para usar la forma de import de ES Modules en vez de los modulos de node que son por defecto

const modulo = require('modulo')

es asi?

Tomas Matus

student•

nodemon con wsl2 funciona muy lento, alguien sabe como solucionarlo?

Héctor Eduardo López Carballo

student•

Hola!

Dónde almacenas tus archivos? Tienes WSL 1 o 2? WSL2 está optimizado para leer los archivos directo desde Linux y es comun ver gente que tiene este problema corriendo los archivos de Windows.

Antony Jose Cabeza Rauseo

student•

Excelente explicacion

Naldo Duran

student•

✌

Cesar Eliezer Gomez Gutierrez

student•

Como les permite usar el ( import express from 'express' ) sin obtener un error? A mi solo me deja usar el require

Ever Alfredo Sorto Ayala

student•

como se llama el plugin para que salga el tag en las funciones ?

Lluis Pitarch Ripolles

student•

Interesante también que nos muestre la consola en que puerto estamos escuchando

console.log(`Server is running in port ${PORT}`);

Carlos Enrique Ramírez Flores

student•

Instalamos la dependencia nodemon para actualizar el server con cada cambio del código del back

nodemon

npm i nodemon

Neryt Alexander Herrera Iñiguez

student•

Recomendacion personal:

app.set('port', process.env.PORT || 3000)

app.listen(app.get('port'), (err) => {
    console.log(`Server on port ${app.get('port')}`)
})

Rodrigo Esgueva Ordóñez

student•

DEPRECATED:

npm i nodemon --dev

RECOMIENDO

npm i nodemon --only=dev

Rodrigo Esgueva Ordóñez

student•

PERDON ESTA ES LA BUENA

npm i nodemon -D

Jose Daniel Molina

student•

Es recomendable tener un archivo .env.example para indicar a futuros colaboradores qué variables de entorno utiliza el proyecto. Importante también nunca subir el archivo .env a un repositorio, ya que dejaríamos la información sensible expuesta

Gaspar Dolcemascolo

student•

Recuerden que .env nunca debe subirse al repositorio. También recuerden crear el archivo .env.example, este si se sube y es una guía para otros devs de que variables se necesitan

CONFIG

ENV=
PORT=

Armando Chindoy

student•

Por lo que usamos babel no hay inconveniente a la hora de usar

import {function,variable} from dependencia

aunque tambien podriamos usar "require" para traernos modulos propios o dependencias

Cristofher Jumbo Jimenez

student•

Instalamos nodemon -D para no tener que escribir el script en cada cambio (como el hot reload del frontend) dotenv para poder guardar variables en el entorno del projecto y hacer escalable el projecto (significa dar flexibilidad al proyecto, es decir cambios ha futuro no romperar la App) :green_heart:

import express from 'express';

import config from './config';

const { env, port } = config;

const app = express();
if (env === 'development') {
    console.log(env);
}

app.get('*', (req, res) =&gt; {
    console.log('hola man')
    res.send({ hello: 'express'}).end();
});


app.listen(port, (err) =&gt; {
    if (err) console.log(err);
    else console.log(`Server running on port ${port}`);
});

require('dotenv').config(); //requerimos dotenv a la vez que ejecutamos la funcion config

const config = { // Definimos un objeto config
	//llamamos la variable ENV desde el process.env y hacemos una validacion de seguridad
	// para indicar que no estemos en modo de producción
	env: process.env.ENV !== 'production',  
	// de igual forma llamamos al puerto
	port: process.env.PORT,
};

//exportamos el objeto config
module.exports = { config };

import express from 'express'
//importamos el archivo config con las variables
const { config } = require('./config');

const app = express();

//validación que sí estemos en desarrollo
if(config.env === 'development'){
	console.log('Development config');
}

app.get('*', (req, res) => {
	res.send({ hello: 'express' });
});

app.listen(config.port, (err) => {
	if (err) console.error();
	else console.log(`Server running on port: ${config.port}`);
})

Usando Nodemon y Dotenv

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas