Nota de tradução: assim como em outros artigos mais antigos sobre React, enfatizamos que, a partir da versão 18 do React, muitas modificações ocorreram e é possível que, tendo a versão mais recente instalada, as configurações feitas neste projeto não funcionem. Para o projeto funcionar, é preciso a instalação da versão sugerida no projeto.

Você já vem usando o create-react-app, também conhecido como CRA, há algum tempo. É ótimo e você pode começar a programar diretamente. Porém, quando você precisar sair do create-react-app e começar a configurar sua própria aplicação do React, haverá um momento em que precisará abrir mão do controle automático e começar a explorar por conta própria.

Este guia abordará uma configuração mais simples do React que, pessoalmente, tenho usado em quase todos os meus projetos com React. Ao final deste tutorial, teremos nosso próprio esqueleto (em inglês, boilerplate) pessoal e aprenderemos algumas configurações a partir dele.

Índice

• Por que criar sua própria configuração?
• Configurando o Webpack 4
• Configurando o Babel 7
• Adicionando o Prettier
• Adicionando mapa de origem para obter melhores logs de erro
• Configurando o ESLint
• Encontrei erros! O que faço agora?
• Adicionando o processador de CSS LESS
• Fazendo o deploy da aplicação do React no Netlify
• Conclusão

Por que criar sua própria configuração?

Existem razões específicas que tornam a criação da sua própria configuração do React algo sensato a se fazer. Provavelmente, você já está familiarizado com o React e deseja aprender a usar ferramentas como o Webpack e o Babel por conta própria. Essas ferramentas de construção são poderosas. Se tiver um tempo extra, sempre é bom aprender mais sobre elas.

Os desenvolvedores são naturalmente pessoas curiosas. Se você sente que gostaria de saber como as coisas funcionam e qual parte faz o quê, deixe-me ajudá-lo com isso.

Além disso, ocultar a configuração do React por meio do create-react-app é voltado para desenvolvedores que estão começando a aprender React, já que a configuração não deve ser um obstáculo para começar. No entanto, quando as coisas ficam mais sérias, é claro que você precisa de mais ferramentas para integrar ao seu projeto. Pense em:

• Adicionar carregadores do Webpack para LESS e SASS
• Realizar a renderização no lado do servidor
• Usar novas versões do ES
• Adicionar MobX e Redux
• Criar sua própria configuração apenas para fins de aprendizado

Se você procurar pela Internet, encontrará alguns truques para contornar as limitações do CRA, como o "create-react-app rewired". Por que não aprender a configurar o React por conta própria, no entanto? Eu vou ajudar você a chegar lá, passo a passo.

Agora que você está convencido a aprender um pouco sobre configuração, vamos começar iniciando um projeto em React do zero.

Abra o prompt de comando ou o Git bash e crie um diretório.

mkdir react-config-tutorial && cd react-config-tutorial

Inicialize o projeto com o NPM executando:

npm init -y

Agora, instale o React:

npm install react react-dom

Além disso, você pode visualizar o código-fonte no GitHub enquanto lê este tutorial para obter explicações sobre as configurações.

Configurando o Webpack 4

Nota da tradução: o próprio Webpack recomendado neste tutorial está na versão 4. No momento da tradução, a versão do Webpack é a versão 5.

Nosso primeiro passo será configurar o Webpack. É uma ferramenta muito popular e poderosa para configurar não apenas o React, mas também quase todos os projetos de front-end. A função principal do Webpack é pegar vários arquivos JavaScript que escrevemos em nosso projeto e transformá-los em um único arquivo minificado, para que ele seja rápido de ser servido. A partir do Webpack 4, não é mais necessário escrever um arquivo de configuração para usá-lo, mas neste tutorial escreveremos um para entendermos melhor.

Primeiro, vamos fazer algumas instalações

npm install --save-dev webpack webpack-dev-server webpack-cli

Isso instalará:

• webpack — que inclui todas as funcionalidades principais do Webpack
• webpack-dev-server — esse servidor de desenvolvimento executa automaticamente o Webpack novamente quando nosso arquivo é alterado
• webpack-cli — permite executar o Webpack a partir da linha de comando

Vamos tentar executar o Webpack adicionando o seguinte script ao arquivo package.json:

"scripts": {
 "start": "webpack-dev-server --mode development",
},

Agora, crie um arquivo index.html na raiz do seu projeto com o seguinte conteúdo:

<!DOCTYPE html>
<html>
 <head>
 <title>My React Configuration Setup</title>
 </head>
 <body>
 <div id="root"></div>
 <script src="./dist/bundle.js"></script>
 </body>
</html>

Crie um diretório chamado src e, dentro dele, crie um arquivo chamado index.js.

mkdir src && cd src && touch index.js

Então, escreva um componente do React no arquivo:

import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}
ReactDOM.render(<Welcome />, document.getElementById("root"));

Execute o Webpack usando npm run start … Ocorrerá um erro.

You may need an appropriate loader to handle this file type

Configurando o Babel 7

O componente do React que escrevemos acima utilizou a sintaxe de classe, que é uma característica do ES6. O Webpack precisa do Babel para processar o ES6 em sintaxes do ES5, a fim de que essa classe funcione.

Vamos instalar o Babel no nosso projeto:

npm install --save-dev @babel/core @babel/preset-env \@babel/preset-react babel-loader

Por que precisamos desses pacotes?

• @babel/core é a dependência principal que inclui o script de transformação do Babel.
• @babel/preset-env é o preset padrão do Babel usado para transformar ES6+ em código ES5 válido. Opcionalmente, configura automaticamente polyfills do navegador.
• @babel/preset-react é usado para transformar JSX e a sintaxe de classe do React em código JavaScript válido.
• babel-loader é um loader do Webpack que conecta o Babel ao Webpack. Vamos executar o Babel a partir do Webpack usando este pacote.

Para integrar o Babel ao nosso Webpack, precisamos criar um arquivo de configuração do Webpack. Vamos criar um arquivo webpack.config.js:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
  },
};

Esta configuração do Webpack basicamente está dizendo que o ponto de entrada (em inglês, entry)) da nossa aplicação é index.js, então pegue tudo o que é necessário por esse arquivo e coloque a saída (em inglês, output) do processo de agrupamento (bundling) no diretório dist, com o nome bundle.js. Ah, se estivermos executando no webpack-dev-server, diga ao servidor para servir o conteúdo a partir da configuração contentBase, que é também o diretório onde a configuração está. Para os arquivos .js ou .jsx, utilize o babel-loader para transpilar todos eles.

Para usar os presets do Babel, crie um arquivo .babelrc.

touch .babelrc

Escreva o seguinte conteúdo:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Agora, execute npm run start novamente. Dessa vez, funcionará.

Adicionando o Prettier

Para acelerar ainda mais o desenvolvimento, vamos criar um formatador de código usando o Prettier. Instale a dependência localmente e use o argumento --save-exact, já que o Prettier introduz mudanças estilísticas em lançamentos de correções.

npm install --save-dev --save-exact prettier

Agora, precisamos escrever o arquivo de configuração .prettierrc:

{
 "semi": true,
 "singleQuote": true,
 "trailingComma": "es5"
}

As regras significam que queremos adicionar ponto e vírgula no final de cada instrução, usar aspas simples sempre que apropriado e adicionar vírgulas finais para código ES5 com várias linhas, como objetos ou arrays.

Você pode executar o Prettier a partir da linha de comando com:

npx prettier --write "src/**/*.js"

Também é possível adicionar um novo script ao arquivo package.json:

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack-dev-server --mode development",
 "format": "prettier --write \"src/**/*.js\""
},

Agora, podemos executar o Prettier usando npm run format.

Além disso, se você estiver usando o VSCode para desenvolvimento, pode instalar a extensão do Prettier e executá-la toda vez que salvar suas alterações, adicionando esta configuração:

"editor.formatOnSave": true

Adicionando mapa de origem para obter melhores logs de erro

Uma vez que o Webpack empacota o código, os mapas de origem são obrigatórios para obter uma referência ao arquivo original que gerou um erro. Por exemplo, se você empacotar três arquivos de origem (a.js, b.js, e c.js) em um único pacote (bundler.js) e um dos arquivos de origem contiver um erro, o rastreamento de pilha simplesmente apontará para bundle.js. Isso é problemático, pois você provavelmente deseja saber exatamente se é o arquivo a, b ou c que está causando um erro.

Você pode instruir o Webpack a gerar mapas de origem usando a propriedade devtool na configuração:

module.exports = {
  devtool: 'inline-source-map',
  // … o resto da configuração
};

Embora isso possa tornar a compilação mais lenta, não afeta a produção. Os sourcemaps só são baixados se você abrir as ferramentas de desenvolvimento do navegador (DevTools) (texto em inglês).

Configurando o ESLint

Um linter é um programa que verifica nosso código em busca de erros ou avisos que possam causar bugs. O linter do JavaScript, o ESLint, é um programa de linting muito flexível que pode ser configurado de várias maneiras.

Antes de prosseguirmos, contudo, vamos instalar o ESLint em nosso projeto:

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react

• O eslint é a dependência principal para todas as funcionalidades, enquanto o eslint-loader nos permite integrar o eslint ao Webpack. Agora, como o React usa a sintaxe ES6+, vamos adicionar o babel-eslint — um analisador que permite que o eslint verifique todos os códigos ES6+ válidos.
• eslint-config-react e eslint-plugin-react são ambos usados para permitir que o ESLint utilize regras pré-definidas.

Como já temos o Webpack, só precisamos modificar a configuração ligeiramente:

module.exports = {
  // modify the module
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'] // include eslint-loader
    }]
  },
};

Em seguida, crie um arquivo de configuração do ESLint chamado .eslintrc com este conteúdo:

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

A configuração basicamente está dizendo, "Ei, ESLint, por favor, analise o código usando o babel-eslint antes de verificá-lo e, ao fazer a verificação, verifique se todas as regras do nosso arquivo de configuração de regras do React estão sendo cumpridas. Pegue as variáveis globais do ambiente do navegador e do Node. Ah, e se for código do React, pegue a versão do próprio módulo. Desse modo, o usuário não precisará especificar a versão manualmente."

Em vez de especificar nossas próprias regras manualmente, simplesmente estendemos as regras do react, que foram disponibilizadas por eslint-config-react e eslint-plugin-react.

Encontrei erros! O que faço agora?

Infelizmente, a única maneira de realmente descobrir como corrigir erros do ESLint é olhando a documentação das regras. Há uma maneira rápida de corrigir erros do ESLint usando eslint--fix. Na verdade, isso é útil para uma correção rápida. Vamos adicionar um script ao nosso arquivo package.json:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --mode development",
  "format": "prettier --write \"src/**/*.js\"",
  "eslint-fix": “eslint --fix \"src/**/*.js\"", // the eslint script
  "build": "webpack --mode production"
},

Em seguida, execute-o com npm run eslint-fix. Não se preocupe se você ainda não está muito familiarizado com o ESLint por enquanto. Você aprenderá mais sobre o ESLint à medida que o utilizar.

Adicionando o processador de CSS LESS

Para adicionar o processador LESS à nossa aplicação do React, precisaremos dos pacotes less e loader do Webpack:

npm install --save-dev less less-loader css-loader style-loader

O less-loader compilará nosso arquivo less em CSS, enquanto o css-loader resolverá a sintaxe do CSS, como import or url(). O style-loader pegará nosso CSS compilado e o carregará na tag <style> em nosso pacote. Isso é ótimo para o desenvolvimento, pois nos permite atualizar nosso estilo instantaneamente, sem precisar atualizar o navegador.

Agora, vamos adicionar alguns arquivos de CSS para criar um diretório de estilo em src/style

cd src && mkdir style && touch header.less && touch main.less

Conteúdo do header.less:

.header {
  background-color: #3d3d;
}

Conteúdo do main.less:

@import "header.less";
@color: #f5adad;
body {
  background-color: @color;
}

Depois, importe nosso arquivo main.less do index.js:

import "./style/main.less";

Em seguida, atualize a propriedade module na configuração do Webpack:

module: {
  rules: [{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  },
  {
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader',
    ],
  },
 ]
},

Execute o script de start e estamos prontos para seguir em frente!

Fazendo o deploy da aplicação do React no Netlify

Todas as aplicações precisam passar pelo processo de deploy na etapa final, e para aplicações do React, o deploy é muito fácil.

Primeiro, vamos alterar a saída de build e o contentBase de dist para build em nossa configuração do Webpack.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'), // change this
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: "./build",
  },
//…

Agora, vamos instalar um novo plug-in do Webpack, chamado HtmlWebpackPlugin.

npm install html-webpack-plugin -D

Esse plug-in gerará um arquivo index.html no mesmo diretório onde o nosso bundle.js é criado pelo Webpack. Nesse caso, estamos falando do diretório build.

Por que precisamos desse plug-in? Porque o Netlify requer que um único diretório seja definido como o diretório raiz. Por isso, não podemos usar o index.html em nosso diretório raiz com o Netlify. Você precisa atualizar sua configuração do Webpack para que fique assim:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: //…
  output: {
    //…
  },
  devServer: {
    contentBase: "./build",
  },
  module: {
    //…
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
  ]
};

Não se esqueça de remover a tag script do seu index.html:

<!DOCTYPE html><html>  <head>    <title>My React Configuration Setup</title>  </head>  <body>    <div id="root"></div>  </body></html><!DOCTYPE html>
<html>
  <head>
    <title>My React Configuration Setup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Agora, você pode testar a configuração com o comando npm run build. Uma vez concluído, faça o push do seu esqueleto (boilerplate) para um repositório do GitHub. É hora de fazer o deploy da nossa aplicação!

Vamos criar uma conta no Netlify. Se você ainda não ouviu falar do Netlify antes, é um incrível serviço de hospedagem de sites estáticos que oferece todas as ferramentas necessárias para implantar um site estático gratuitamente. O que é um site estático? É um site criado a partir de um conjunto de páginas HTML estáticas, sem nenhum back-end. Nosso esqueleto (boilerplate) do React, como está agora, conta como um site estático, pois não configuramos nenhum back-end – sendo composto apenas por HTML e JavaScript.

Após se cadastrar, selecione "New site" do Git e escolha o GitHub como seu provedor de Git:

Você precisa conceder permissões para o Netlify e, em seguida, selecionar o repositório do seu esqueleto (boilerplate) do React.

Agora, você precisa inserir o comando de construção (build) e o diretório de publicação. Como você pode ver, é por isso que precisamos do HtmlWebpackPlugin, porque precisamos servir tudo a partir de um único diretório. Em vez de atualizar manualmente nosso arquivo index.html raiz para as alterações, simplesmente o geramos usando o plug-in.

Certifique-se de ter o mesmo comando que a captura de tela acima, ou sua aplicação pode não funcionar.

Assim que o status de deploy mudar para published (em português, publicado – número 2 acima), você pode acessar o nome de site aleatório que o Netlify atribuiu à sua aplicação (número 1).

Sua aplicação React foi implantada. Parabéns!

Conclusão

Você acaba de criar o seu próprio esqueleto (boilerplate) de projeto em React e de implantá-lo ao vivo no Netlify. É verdade que não mergulhamos muito fundo nas configurações do Webpack, porque este boilerplate foi projetado para ser um ponto de partida genérico. Em alguns casos, quando precisamos de recursos avançados como renderização no lado do servidor, precisamos ajustar a configuração novamente.

Porém, fique tranquilo! Você chegou até aqui, o que significa que já compreende o que o Webpack, o Babel, o Prettier e o ESLint fazem. O Webpack possui muitos carregadores poderosos que podem ajudar em muitos casos que você encontrará com frequência ao construir uma aplicação para a web.

Além disso, estou atualmente escrevendo um livro para ajudar os desenvolvedores de software a aprender sobre o React, que você talvez queira dar uma olhada (livro em inglês)!

Você também pode ler mais dos meus tutoriais sobre React em sebhastian.com.

Quando se trata de fazer o deploy (em português, implantação) de uma aplicação, geralmente existem duas opções: um VPS (servidor virtual privado) ou um PaaS (plataforma como serviço). Este artigo mostrará a você uma receita de como publicar uma aplicação em produção em um PaaS como o Heroku.

Nota da tradução: ao final de 2022, o Heroku encerrou o tier gratuito para implantação. Os planos mensais básicos por lá, no momento desta tradução, custam 5 dólares ao mês.

Passo 1 - criar o projeto

O primeiro passo é criar uma estrutura simples para o nosso projeto com alguns arquivos básicos. Para este artigo, vou criar um servidor de demonstração com NodeJS.

Em uma nova pasta, vou abrir um terminal e executar o comando npm init -y para criar um projeto. O servidor fictício será desenvolvido em Express. Assim, precisamos executar o comando npm install express para instalar esse módulo.

Assim que essa biblioteca estiver instalada, podemos criar um arquivo para o nosso projeto, chamado app.js. Dentro dele, escreveremos o código para o nosso servidor simples:

Podemos iniciar a aplicação executando node app.js. Em seguida, podemos testá-la no seguinte URL http://localhost:3000. Neste ponto, você deve ver a mensagem Hello World no navegador.

Passo 2 - sistema de controle de versão

O próximo passo é escolher um sistema de controle de versão e colocar nosso código em uma plataforma de desenvolvimento em um repositório.

O sistema de controle de versão mais popular é o Git, juntamente com o Github como plataforma de desenvolvimento. É isso que usaremos aqui.

No GitHub, crie um repositório para sua aplicação, como mostrado abaixo:

Para enviar o seu código local para um repositório, você precisa executar os comandos listados no GitHub após clicar no botão Create repository:

Importante: antes de fazer isso, precisamos ignorar alguns arquivos. Queremos enviar para o repositório apenas o código que escrevemos, sem as dependências (os módulos instalados).

Para isso, precisamos criar um arquivo .gitignore e, dentro dele, escrever o nome dos arquivos que queremos ignorar.

Agora, podemos escrever os comandos listados na imagem acima (aquela do GitHub).

Se você executou os comandos corretamente, eles estarão na página do seu repositório. Se você atualizar a página, deverá ver seus arquivos, exceto aqueles que você ignorou explicitamente, ou seja, os do diretório node_modules.

Passo 3 - vincular o repositório ao Heroku

Neste passo, podemos vincular o repositório do GitHub à nossa aplicação no Heroku.

Primeiro, crie uma aplicação no Heroku e siga os passos listados na plataforma.

Assim que a aplicação for criada, uma janela semelhante a esta deve aparecer:

Agora, se você olhar para a navegação na parte superior, verá Overview, Resources, Deploy, Metrics e assim por diante. Certifique-se que Deploy esteja selecionado. Em seguida, na segunda linha, clique no ícone do GitHub.

Procure pela aplicação desejada, que, no nosso caso, é demo-deploy-app-09 . Em seguida, clique em Connect.

Uma vez que a aplicação esteja conectada com sucesso à sua conta do Heroku, você pode clicar em Deploy Branch para implantar a sua aplicação.

Se desejar, você também pode selecionar a opção Enable Automatic Deploys, que buscará automaticamente o código do seu repositório do GitHub sempre que você fizer um push para esse repositório.

Assim que a aplicação for implantada, você pode clicar em View para abrir a sua aplicação.

Passo 4 - configurar o Heroku para executar corretamente a aplicação

Se você abrir a aplicação nesse momento, deverá ver algo parecido com isso:

Isso mesmo: um erro. Isso ocorre porque o Heroku não sabe como iniciar nossa aplicação.

Se você se lembra, executamos o comando node app.js para iniciar a aplicação localmente. O Heroku não tem como saber quais comandos precisa executar para iniciar a aplicação. É por isso que ele gerou um erro.

Para resolver esse problema, precisamos criar um arquivo chamado Procfile com o seguinte conteúdo: web: node ./app.js.

Para atualizar nossa aplicação, tudo o que precisamos fazer é enviar um novo commit para o GitHub. Se tivermos ativado a opção de Automatic Deploys, o código será automaticamente puxado para o Heroku. Caso contrário, precisamos clicar novamente Deploy Branch.

Assim que a aplicação for reconstruída, deveríamos vê-la funcionando assim:

Passo 5 - como adicionar um complemento

Um dos principais benefícios que o Heroku oferece é a facilidade de adicionar recursos na forma de complementos (add-ons) ao seu projeto. Esses recursos externos podem ser bancos de dados, ferramentas de registro e monitoramento, ferramentas de Integração e Entrega Contínua (CI/CD) ou ferramentas de teste.

Agora vamos ver como adicionar um novo recurso ao seu projeto. Primeiro, acessamos Resources (em português, recursos) e, a partir daí, adicionaremos uma nova ferramenta para testes.

Clique em Find more add-ons e, depois, procure por Loadmill.

O Loadmill é uma ferramenta de teste que é realmente ótima para testes de regressão e testes de carga.

Clique em Install…. Em seguida, escolha a aplicação que deseja vincular.

Neste passo, o Heroku criará automaticamente uma conta para você na plataforma fornecida.

Na guia de recursos, você pode ver o recurso que foi adicionado há pouco:

Se você acessar esse complemento, deverá ver o painel de controle com um tutorial de introdução e um teste de demonstração criado para você.

Conclusão

O Heroku permite que os desenvolvedores implantem rapidamente e quase sem esforço uma aplicação em um servidor web.

Ele também oferece uma variedade de plug-ins que você pode integrar à sua aplicação.

Uma solução PaaS sempre permitirá que você avance mais rapidamente do que uma solução com um VPS, onde você precisa configurar tudo desde o início.