Crie seu próprio template customizado para seus apps Reactjs
Tags: react, npm, cra, template
Published: 2021-01-04 23:57:59

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:

&nbsp;

Para isso você vai precisar de uma conta [npm](https://www.npmjs.com). É 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.

```bash
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:

```bash
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](https://github.com/facebook/create-react-app/tree/master/packages/cra-template)

template.json

```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:

```json
{
  "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: 

```bash

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:

```bash
npm login
```

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

```bash
npm publish --access public
```

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

Vamos testar!!

```bash
yarn create react-app --template meu-template
```

&nbsp;

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 🤘🏼

&nbsp;

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](https://github.com/vinisaveg/cra-template-vinisaveg)

Links úteis:

[Custom Templates | Create React App](https://create-react-app.dev/docs/custom-templates/)

[Creating and publishing scoped public packages | npm Docs](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages)

&nbsp;

Happy Coding! 🙂