Basic Front Boilerplate (BFB)
Boilerplate front-end para projetos de teste/estudos.
Pré-requisitos
- Node.js
- npm
Uso
O BFB usa Parcel, uma build tool rápida, eficiente e que não precisa de configuração (zero configuration).
Em função disso, oferece suporte a CSS e JavaScript modernos, Sass, e todas as outras modernidades/comonidades da ferramenta.
Comandos
| Comando | O que faz? | Observação |
|---|---|---|
npm install |
Instala pacotes necessários | Execute isso primeiro! |
npm start |
Inicia o desenvolvimento | Acesse http://localhost:1234 |
npm run build |
Faz build do site | Resultado na pasta dist |
Considerações
Basicamente, depois da instalação inicial de pacotes, só é preciso executar npm start e começar a mexer no projeto como se não houvesse amanhã.
Parcel oferece hot reload: conforme alterações de código são feitas, ele faz rebuild automático dos arquivos alterados e atualiza o navegador.
O arquivo style/index.scss carrega todos os demais (partials), então, sempre que criar um novo arquivo na estrutura, lembre-se de importá-lo -- dentro dos conceitos da arquitetura ITCSS.
💡 Não sabe ITCSS?
Caso não saiba o que é ou como usar ITCSS, conheça nosso curso para aprender mais sobre como estruturar seu CSS de maneira profissional.
Para saber mais, cadastre seu e-mail na lista preferencial para ser avisado quando abriremos uma nova turma.
Tweaks
CSS Cascade Layers
Caso queira usar CSS Cascade Layers, o plugin PostCSS Cascade Layers já está disponível no BFB.
Para ativá-lo, adicione o seguinte código ao arquivo .postcssrc (dentro do nó plugins):
"@csstools/postcss-cascade-layers": true,
Solução de Problemas
Pacotes Node não estão sendo instalados
Caso aconteçam erros ao tentar instalar os pacotes Node, pode ser algo relacionado à compatibilidade.
Recomendamos o uso do nvm para controlar as versões do Node.
Então, você pode executar nvm use para ativar a mesma versão do Node usada para desenvolver o BFB.
Licença
Este projeto usa a licença WTFPL. Consulte o arquivo LICENSE.md para mais detalhes.