Implementando DOTENV nos seus projetos

Pra quem não conhece, o DOTENV é um package do NPM para armazenar de forma local informações que não devem ser compartilhadas em seus repositórios.

Vamos à um exemplo bem simples:

Você está atuando em um projeto, e precisa inserir dados de acesso para que você possa de forma tranquila utilizar uma tarefa do gulp onde ela observa o arquivo alterado e faz upload do mesmo para o ambiente do cliente, seja em produção ou desenvolvimento.

O .ENV fica na raiz do seu projeto, e nele você pode colocar informações de login, tokens e etc. Quando um repositório é criado, geralmente é gerado um arquivo chamado .gitignore. 

Para que serve?

O gitignore serve para você passar quais arquivos ou pastas ele irá ignorar na hora de subir seus commits para o repositório online. Ou seja, por padrão arquivos .env ja são configurados para não subirem para o servidor, sendo assim você tem menos risto de expor dados de acesso para qualquer um, mesmo que seu repositório não seja público.

Como utilizar o .ENV?

Dentro do seu repositório local (ou seja, na máquina já baixado do git ou de seu servidor), rode o seguinte comando;

npm i dotenv

Depois disso, aguarde a instalação do mesmo.

Agora, na raiz do seu projeto, crie um arquivo chamado .ENV (Sim, com ponto mesmo);

A syntaxe dele é bem simples. Com # você comenta as linhas;

# esta é uma linha de comentário
NOME = Canaleta Web
URL = https://canaletaweb.blogspot.com
USERNAME = login_username
PASS = password_aqui

Essas propriedades (nome, url, username, pass) você que irá configurar através do process.env;

No nosso caso utilizamos um arquivo na raiz em javascript chamado settings.js, onde carregamos a configuração do dotenv, e utilizamos o module.exports para configurar as propriedades, para poder repassa-las ao gulp;

// importando dotenv;
require('dotenv').config();
    
//configurando prorpiedades;
module.exports = {
	siteUrl: process.env.URL,
	username: process.env.USERNAME,
	password: process.env.PASS,
}
 
console.log(`Você esta no ambiente do cliente "${process.env.NOME}"!`)

Este código acima, pode ser salvo em um arquivo javascript na raiz do repositório também. Com isso você pode criar o arquivo gulpfile.js que será responsável por pegar as informações dentro do module.exports e repassar para o gulp-spsave, por exemplo.

Vou dar um exemplo simples do gulpfile. Lembrando que para usar este exemplo você também precisa ter o gulp e o gulp-spsave instalado em seu repositório.

let settings = require('./settings'),
	gulp = require(`gulp`),
	spsave = require(`gulp-spsave`),
	browserify = require('browserify');
    
    gulp.task(`watch-js`, function(){
    	gulp.watch([`./src/js/**/*.js`], function(event){
        	var b = browserify({
            	entries: event.path,
  				debug: true
            });
            
            return b
            	.pipe(spsave({
                	checkin: true,
                    checkinType: 1,
                    siteUrl: settings.siteUrl,
                    folder: `/style library/js/`
                });
        });
    });
  

Vejamos o código acima;

1. Importamos as dependências que iremos utilizar; (gulp, gulp-spsave, browserify)
2. Importamos as propriedades definidas no arquivo settings.js;
3. Criamos uma tarefa chamada watch-js que observa todos os arquivos js localizados na pasta raiz src/js;
4. Ao modificar um arquivo, ele armazena na variavel b os dados do arquivo modificado;
5. No retorno, executamos a extensão spsave que recebe algumas propriedades, que são:
1. checkin - se quer fazer checkin após altera-lo no SharePoint;
2. checkinType - qual tipo de checkin você pretente fazer: check-in apenas para você ou checkin publico para todos;
3. siteUrl: carrega os dados do module.exports lá no arquivo settings.js, que este, recebe o process.env.URL que foi configurado no arquivo .ENV
4. folder - local onde você deseja salvar este arquivo no SharePoint;

Muito bom, né não?

Isso garante (pelo menos offline) que os dados fiquem apenas no seu computador e não no servidor, onde podem ser expostos por alguma falha, desatenção etc.

Espero que tenham gostado!