No tienes acceso a esta clase

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

Configuraci贸n del entorno de desarrollo

3/17
Recursos

Aportes 23

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Obviamente lo mejor es usar Variables de Entorno, pero creo que eso lo veremos m谩s adelante.

Me parecen geniales estas clases, ya que nos muestran como se inicia de manera real un proyecto.

Otra forma de exportar e importar
En el HTML decimos que nuestro js va a ser de tipo m贸dulo.

<script type="module" src="./src/main.js"></script>

Nuestra api-key

export const API_KEY = 'soy la secreta api-key';

La importamos en el main.js

import { API_KEY } from "./key.js";

Un aporte a mi repositorio con un entorno podriamos decir m谩s exigente, con linter eslint y formateador prettier, estas configuraciones puedes ajustarlas a tu gusto.
.
https://github.com/cerm88/platzi-movies
.
.
Si quieres que el autoformateo sea autom谩tico cada vez que guardes solo debes agregar esta configuraci贸n en tu setting.json en tu espacio de trabajo en la carpeta .vscode

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.rulers": [100],
        "editor.formatOnSave": true
    }
}
Estar铆a bueno ya que estamos trabajando desde el Frontend poder hacer un hide de la api-key ejemplo deploy a Netlify usando variables de entorno con Netlify functions. Me gustar铆a aprenderlo y no se como se hace! Gracias.

Primera forma de testing de cualquier web developer: background: red. La vieja confiable jajajaja

gracias por siempre iniciar desde un principio los proyectos, ya que muchas veces se da por sentado que todos saben y puede inicializarlos. Gracias

Yo quiero saber que agentes existir谩n en Michiagencia 馃槑

馃搾 Agregando variables de entorno para trabajar en React

  1. Agrega un archivo .env en el nivel donde se encuentra tu .gitignore.

  1. Declara tu(s) variable(s) de entorno dentro de tu archivo .env, dichas variables siempre deben comenzar por 鈥淩EACT_APP_鈥, sin las comillas y agregando el nombre de tu variable en may煤sculas espaciada por guiones bajos, posteriormente as铆gnale un valor a esta variable usando un 鈥=鈥.

Ejemplo de una variable de entorno:
REACT_APP_API_KEY=abcd1726gy57

  1. Para usar tu variable de entorno simplemente declara: 鈥減rocess.env.鈥 Sin las comillas y seguido del nombre de tu variable.

Ejemplo de uso:

console.log(process.env.REACT_APP_API_KEY)

  1. Ahora en tu archivo .gitignore agrega: 鈥.env鈥, sin comillas y en cualquier parte del documento, eso ignorar谩 los archivos .env y mantendr谩 a salvo tus secretos.

Nota:

Ten en cuenta que las variables de entorno se ejecutan al iniciar el servidor, as铆 que no te alteres si tu variable no se muestra a la primera, esto puede pasar porque ya te encontrabas trabajando dentro de tu servidor antes de agregar las variables de entorno, la soluci贸n es detener el servidor y volverlo a iniciar con el cl谩sico 鈥渘pm start鈥.

Si quieres saber m谩s sobre este tema, consulta la documentaci贸n aqu铆. 馃憟

Saludos, Poli. o(锟b柦锟)銉栶煉

Crear el archivo secrets.js y secrets.example.js me resulta 煤til, por ejemplo, cuando en entrevistas de trabajo te piden subir c贸digo que requiere un key que no debes compartir, as铆 les dejas instrucciones claras para que ellos usen su propio key.

Para activar la extensi贸n de Peacock

  • F1
  • escribe: Peacock
  • Elige: Peacock: Change to a favorite color

YO NO LO HAGO PORQUE YA LO TENGO INSTALADO 馃ぃ. Qui茅n haya escuchado esa frase en alguna parte de sus vidas den su like.

cu谩l es la forma m谩s usada para verificar que el archivo css este bien? body{ background-color: red; }

Por querer implementar Tailwind en el proyecto鈥 una clase que debio durar 15 minutos, me tomo 3 horas. Vamos a decir que valio la pena

Deber铆a haber una opci贸n para ocultar los comentarios, as铆 veo la pantalla en grande para ver solo el video.

Prefer铆 usar el archivo .env, para guardar el valor de mi api_key

Si a alguien, aun haciendo lo que Juan no se le 鈥榦culta鈥 el secrets.js, lo que te tienes que hacer es colocar la ruta completa si lo has guardado en una carpeta a dem谩s de en el src.

Ej:

moviesAPI > src > secrets.js

En el .gitignore tendr谩s que poner:

moviesAPI/src/secrets.js

Me he tirado horas intentado resolver porque no se ocultaba y era por la carpeta que tenia anterior al src :鈥)

Excelente explicai贸n para ocultar los archivos que no se deseen visualizar en el repositorio

Recomendaci贸n 馃馃挏

Me encantar铆a que para nuevos cursos se optimice el espacio de VSC de la manera en que lo hace el profe Fernando Herrera.

Ya que de la manera que lo hacen en Platzi nos roba mucho espacio cuando tenemos pantallas peque帽as.

Estudiante com煤n en Platzi y fuera 馃殌

Puedo seguir la clase con comodidad鈥

馃槩馃憞 espacio perdido, no se puede ver la clase con comodidad

El 煤nico problema es que al momento de publicar la app, si inspeccionamos el c贸digo fuente los usuarios pueden ver la KEY

Yo creo que es un HACK necesario

Me mir茅 muy noob, tuve que volver a hacer todo el entorno, ya que me falt贸 una cosa, y por eso tuve que volver a reiniciar todo 馃槄

鈥淪imple鈥 pero, necesario. Adem谩s, es una interesante introducci贸n a seguridad.

Me hubiera gustado como poder encriptarla la API_KEY de tal manera que sirviera en el github pages y mostrarla como portafolio =(