Crie seu próprio template customizado para seus apps Reactjs

Nestes últimos tempos, tenho utilizado bastante o framework Reactjs, e iniciando meus projetos com o pacote Create React App. Porém sempre que faço essa inicialização, há uma estrutura pronta que sempre acabo removendo por completo, então resolvi criar um template personalizado para me ajudar com o setup inicial de meus projetos.

Eu só não achava que seria tão simples...

Segue aqui uma breve explicação de como fazer isso:

Para isso você vai precisar de uma conta npm. É lá que vamos publicar o nosso template para utilizar com o Create React App.

Primeiro de tudo, vamos criar uma pasta e iniciar um projeto com o pacote CRA. Assim vamos ter a base do projeto para deixar do nosso jeito antes de publicar.

yarn create react-app meu-template

Após a instalação, podemos remover ou adicionar os pacotes e bibliotecas que desejarmos.

Assim que tudo estiver do jeito que você gosta, podemos preparar o nosso template. (O seu projeto será iniciado do mesmo jeito em que você deixou os arquivos)

Para isso vamos criar uma pasta com o nome template. É nela que vamos deixar todos os nossos arquivos do template.

Dentro dela, podemos colocar a nossa pasta /public e /src. Além de nosso arquivo .gitignore (Só devemos remover o ponto no começo do nome do arquivo, ficando assim: gitignore)

Não vamos precisar da pasta /node_modules. Então podemos excluí-la.

Além disso também podemos adicionar um README.md, tsconfig, .prettierrc, e entre outros arquivos que você desejar.

Segue a estrutura até agora:

meu-template/
  README.md (Para o npm)
  package.json
    /template
        README.md (Para os projetos criados com este template)
        gitignore (sem o ponto no começo do arquivo)
        public/
          index.html
                /...outros arquivos que desejar
        src/
          index.js (or index.tsx)
                /...outros arquivos que desejar

Agora vamos adicionar um arquivo com o nome de template.json

Nele vai estar todas as nossas dependências e configurações do template, inclusive scripts, se desejarmos.

Vou utilizar o template base oficial do Create React App como exemplo:

facebook/create-react-app

template.json

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.4",
      "@testing-library/react": "^11.1.0",
      "@testing-library/user-event": "^12.1.10",
      "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
      "extends": ["react-app", "react-app/jest"]
    }
  }
}

E em em nosso package.json, podemos adicionar algumas informações, além do nome do nosso template, que precisa ter o prefixo: cra-template-[nome-do-template].

Também é importante adicionar o arquivo principal em main e a opção files, com os itens: template e template.json

Segue o exemplo:

{
  "name": "cra-template-meu-template",
  "main": "template.json",
  "version": "1.0.0",
  "keywords": [
    "react",
    "create-react-app",
    "template"
  ],
  "description": "Meu template personalizado",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "template",
    "template.json"
  ]
}

E nossa estrutura está assim:

meu-template/
  README.md (Para o npm)
  template.json
  package.json
  template/
    README.md (Para os projetos criados com este template)
    gitignore
    public/
      index.html
            /...outros arquivos que desejar
    src/
      index.js (or index.tsx)
            /...outros arquivos que desejar

Agora podemos fazer login no NPM pelo terminal e publicar o nosso template 😎

Vamos abrir o terminal e rodar:

npm login

Insira suas credenciais para fazer o login e em seguida podemos publicar:

npm publish --access public

Agora em sua conta NPM você pode ver o seu novo pacote 👍🏼

Vamos testar!!

yarn create react-app --template meu-template

Irado!! 🔥

Agora podemos utilizar o nosso novo template para projetos futuros.

Você também pode fazer outros tipos de templates, ou adicionar scripts, para deixar o seu setup inicial de projetos turbinado 🤘🏼

Então é isso. Se esse post foi útil de alguma maneira, deixe um comentário ou uma reação 😉

Valeu!

Segue o repositório do meu template:

vinisaveg/cra-template-vinisaveg

Links úteis:

Custom Templates | Create React App

Creating and publishing scoped public packages | npm Docs

Happy Coding! 🙂