Cómo usar variables de entorno en el proyecto Platzi Conf Merch (localmente y en producción)

En este proyecto existen dos credenciales que debemos darles mucha importancia: el CLIENT_ID para conectarnos a la API de PayPal y el API_KEY de la API de Google. Estas dos credenciales no debemos quemarlas en nuestro código y deben ser tratadas como variables de entorno.

¿Pero cómo hacemos eso?

Debemos hacer algunas adiciones a nuestro proyecto porque necesitamos que estas variables queden disponibles en desarrollo y en producción.
También trate a la URL de la API de Strapi como variable de entorno.

Para desarrollo:

• Instalamos una dependencia que posiblemente ya conozcas para usar variables de entorno: dotenv

npm i dotenv -D

• dotenv nos permite importar variables de entorno desde un archivo .env. Esta librería se usa en el curso de Backend con Nodejs por que en Backend se usan mucho las variables de entorno.
• Ahora creamos el archivo .env en la raíz del proyecto donde escribimos las variables de entorno:

# .env

# PAYPAL
PAYPAL_CLIENT_ID=...

# GOOGLE_MAPS
GOOGLE_MAPS_API_KEY=...

# STRAPI
API_URL=...

• Ahora en el archivo webpack.config.js añadimos esta configuración:

// webpack.config.js

// Importamos EnvorinmentPlugin de webpack
const { EnvironmentPlugin } = require('webpack');

// Importamos y usamos dotenv
require('dotenv').config();

module.exports = {
  ...,
  plugins: [
    ...
		// Nuevo Plugin
    new EnvironmentPlugin([
      'PAYPAL_CLIENT_ID',
      'GOOGLE_MAPS_API_KEY',
      'API_URL',
    ]),
		...
  ],
  ...
};

• webpack tiene un plugin nativo llamado EnvironmentPlugin que se encarga de tomar las variables de entorno del proceso de Node por el que corre webpack y guardarlas en variables process.env.<nombre-variable> que podemos usar en nuestra aplicación.
• Ahora podemos usar estas variables en nuestros componentes, de esta forma:

// src/containers/Payment.jsx

const Payment = () => {
  ...

  const paypalOptions = {
    clientId: process.env.PAYPAL_CLIENT_ID, // 0.0
    intent: 'capture',
    currency: 'USD',
  };

  ...

  return ( ... );
};

Pero esto solo funciona en desarrollo, en tu entorno local.

Para producción:

• Nuestro proyecto es desplegado con GitHub Actions. Por lo que las variables de entorno las agregamos en los SECRETS de nuestro repo:

• En el archivo para hacer deploy, en build el comando es el siguiente:

# .github/workflows/deploy-to-firebase.yml

name: Build and Deploy
on: [push]
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build # Esto cambia
        run: PAYPAL_CLIENT_ID=$PAYPAL_CLIENT_ID GOOGLE_MAPS_API_KEY=$GOOGLE_MAPS_API_KEY API_URL=$API_URL npm run build
        env:
          GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
          PAYPAL_CLIENT_ID: ${{ secrets.PAYPAL_CLIENT_ID }}
          API_URL: ${{ secrets.API_URL }}
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

• Una vez hagas push a tu repo, este action correrá con las variables de entorno que guardaste en tus SECRETS, y tu proyecto funcionará.

Cabe resaltar que esto no hará que nuestras credenciales permanezcan secretas, ya que todo el código en el Frontend es visible y abierto, pero esto ayuda a que nosotros podamos cambiar estas variables sin tener que hacer un commit ya que no forman parte del repositorio.