Utilizando GitLab snippets para automação de criação de projetos React

Durante o processo de desenvolvimento de aplicações web com React, é gasto um bom tempo configurando ESLint, Prettier, lint-staged e husky, o que acaba sendo muito custoso e repetitivo. De forma a agilizar isso, nesse artigo busco apresentar como utilizando os snippeets do GitLab é possível automatizar isso.

De acordo com a documentação do GitLab:

Com os snippets do GitLab, você pode armazenar e compartilhar trechos de código e texto com outros usuários. É possível comentar, clonar e utilizar controle de versão em snippets. Eles podem conter vários arquivos. Além disso, suportam realce de sintaxe, incorporação, download, e você pode gerenciar seus snippets com a API de snippets

Como o snippets podem ser clonados, é possível clonar trechos de códigos e arquivos para dentro de seu projeto. Utilizando essa funcionalidade, podemos dividir partes das configurações iniciais do projeto em alguns snippets e depois clonar por partes dentro do nosso projeto. Além disso, vamos criar um script em bash para criar o projeto React com vite e clonar os snippets dentro do nosso projeto.

Criando os snippets

Neste artigo, abordaremos os seguintes snippets: start react project, react project configs, language config e react resets config. Cada snippet possui uma função específica, o que é necessário devido à limitação de 10 arquivos por snippet. Essa separação também facilitará a criação do script bash. A seguir, explico a função de cada um:

• start react project: esse é o snippet principal, a ideia dele é que o usuário possa fazer clone nele e executar o script bash;
• react project configs: esse arquivos contém os arquivos de configuração geral da aplicação React.
• language config: esse snippet contém os arquivos de configuração de internacionalização utilizando a biblioteca react-intl;
• react reset config: ao iniciar um projeto React, o vite gera alguns arquivos de exemplo que geralmente acabamos deletando. O objetivo deste snippet é fornecer um projeto “limpo” para evitar esse retrabalho.

React project configs

Os arquivos que estão presentes nesse snippet são os arquivos de configurações do projeto que ficam normalmente na raiz do projeto. São eles:

• .env.development: arquivo de variáveis de ambiente para o modo de desenvolvimento;
• .env.production: arquivo de variáveis de ambiente para o modo de produção;
• .eslintrc.yml: arquivo de configuração do ESLint. A nova versão 9 do ESLint tem usado um arquivo .js para essas configurações, no entanto, nem todas as bibliotecas de linting que nós utilizamos tinha suporte a versão 9, portanto, estamos utilizando a versão 8 que permite usar YAML;
• .prettierrc.yml: arquivo de configuração de formatação do Prettier;
• gitlab-ci.yml: arquivo de configuração de CI/CD do GitLab;
• Dockerfile: arquivo de instruções para gerar uma imagem Docker do projeto React;
• nginx/default.conf.template: arquivo de configuração default para iniciar um servidor NGINX. Estamos utilizando a extensão .template, pois, com ela é possível utilizar variáveis de ambiente. Essa feature foi introduzida na versão 25 do NGINX;
• nginx/nginx.conf: arquivo de configuração do NGINX que inclui as configurações default do nginx/default.conf.template;
• tsconfig.app.json: arquivo de configuração do TypeScript, configurado para habilitar o uso de aliases dentro da aplicação. O alias que utilizamos é o @ que faz referência ao diretório src;
• vite.config.ts: e por fim, o arquivo de configuração do vite, que além de habilitar e resolver os aliases na hora de empacotar, ele está configurado para utilizar o import de SVG como componentes utilizando o plugin vite-plugin-svgr.

É importante notar que os arquivos que iniciam com nginx/quando forem clonados via Git serão adicionados a mesma pasta nginx/.

React reset config

Como dito anteriormente, quando um projeto React é criado, por padrão, vem bastante código “poluído” de template. Normalmente, umas das primeiras fases do desenvolvimento do projeto é remover esse código template e organizar os arquivos App.tsx e o main.tsx. Para isso, utilizamos os seguintes arquivos:

• app.tsx: componente principal da aplicação React;

export const App = () => {
 return <div></div>
}

• main.tsx: componente que renderiza todo o projeto;

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import { App } from './app'

const container = document.querySelector('#root')!
const root = createRoot(container)

root.render(
 <StrictMode>
  <App />
 </StrictMode>
)

• env.d.ts: arquivo de configuração de definição das variáveis de ambiente para serem expostas ao import.meta.

/// <reference types="vite/client" />

interface ImportMetaEnv {
 readonly VITE_API_URL: string
 readonly VITE_APP_VERSION: string
}

interface ImportMeta {
 readonly env: ImportMetaEnv
}

Language config

Alguns projetos que desenvolvemos possuem como requisito ter dois idiomas: espanhol e português. Dessa forma, para manter um padrão, foi criado um snippet só com os arquivos necessário para agregar esse requisito nas nossas aplicações. Os arquivos desse snippet são:

• translations/es-PY.json: arquivo JSON com todas as labels em espanhol;
• translations/pt-BR.json: arquivo JSON com todas as labels em português;
• utils/lang.ts: arquivo com a função para pegar o idioma preferido do usuário;
• types/lang.ts: arquivo contendo os tipos e interfaces necessárias para a aplicação;
• translations/index.tsx: arquivo que exporta o objeto de messages utilizados pelo provider do react-intl, contendo as labels em português e espanhol.
• hooks/lang.ts: arquivo que exporta o hook userUserLanguage;
• app.tsx: neste caso, o arquivo app.tsx contém o provider do react-intl utilizando as messages do arquivo translations/index.tsx;

No futuro, pretendo criar uma artigo explicando desde o começo como
aplicamos internacionalização nas aplicações React que desenvolvemos.

Start react project

E por fim, esse é o principal snippet desse artigo. Ele contém somente dois arquivos, um README.md, explicando como utiliza-lo, e o arquivo bash para criar o projeto React. O script é divido em várias funções, irie apresentar uma por vez neste artigo.

#!/bin/bash
initial_branch="main"
remote_address=""
project_name=""
template=""

parse_params(){
    while getopts ":b:r:n:t:" opt; do
        case ${opt} in
            b )
                initial_branch=$OPTARG
                ;;
            r )
                remote_address=$OPTARG
                ;;
            n )
                project_name=$OPTARG
                ;;
            t )
                template=$OPTARG
                ;;
            \? )
                echo "Invalid option: -$OPTARG" >&2
                exit 1
                ;;
            : )
                echo "Invalid option: -$OPTARG requires an argument." >&2
                exit 1
                ;;
        esac
    done
    shift $((OPTIND -1))
    if [ -z "$project_name" ]; then
        echo "Error: Project name is required." >&2
        exit 1
    fi
}

O script aceita 4 parâmetros para ser executado:

n: nome do projeto React a ser criado (Obrigatório);
b: nome da branch inicial (Opcional);
r: endereço do repositório remoto (Opcional);
t: template que utilizamos, neste caso, um deles é o i18n, para sistemas internacionalizados (Opcional);

start_vite_project(){
    echo "Starting Vite project with React TS template..."

    npm create vite@latest "$project_name" -- --template react-ts --silent

    cd "$project_name" || { echo "Failed to change directory to $project_name"; exit 1; }
}

A função acima é responsável por inicializar um projeto utilizando a ferramenta vite, passando como nome do projeto, o nome informado como parâmetro. Após isso, é realizado um comando cd para entrar dentro do diretório do projeto.

install_dependencies(){
    echo "Installing dependencies..."

    npm install --silent
    npm i -D eslint@8.53.0 --silent
    npm i -D prettier --silent
    npm i -D husky