Escolhendo entre Vite e CRA para seu projeto em React

Ramon Xavier — Thu, 07 Mar 2024 01:50:02 +0000

Desenvolver aplicações em React é uma prática comum, e para facilitar esse processo, duas ferramentas bastante populares são o Vite e o CRA (Create React App).

Estrutura de Projeto

Ao escolher entre Vite e CRA, uma das diferenças notáveis é a estrutura de projeto. O CRA oferece uma estrutura pré-definida, com arquivos e pastas organizados de uma maneira específica. Em contrapartida, o Vite é mais flexível, permitindo que você escolha a estrutura de projeto que melhor atenda às suas necessidades.

Desempenho Superior com Vite

O Vite se destaca pelo seu desempenho superior, principalmente devido à sua arquitetura baseada em módulos ES e ao uso eficiente da tecnologia de hot module replacement (HMR). Enquanto o CRA também é rápido, o Vite é conhecido por sua velocidade excepcional, garantindo uma experiência de desenvolvimento ágil e produtiva. O HMR no Vite, executado sobre o ESM nativo, resulta em atualizações mais rápidas, independentemente do tamanho do aplicativo.

Modelo do Servidor CRA

Modelo do Servidor Vite

Ferramenta de Construção Eficiente

O Vite utiliza o esbuild como sua ferramenta de construção padrão, uma escolha que contribui para tempos de compilação extremamente rápidos e um desempenho de tempo de execução aprimorado. Essa eficiência no desenvolvimento é possível graças ao esbuild, uma ferramenta de construção de pacotes JavaScript rápida e eficiente.

Configuração Flexível

A configuração é outra área em que o Vite e o CRA diferem. O CRA oferece uma configuração mais limitada, mas que é suficiente para a maioria dos projetos. Já o Vite proporciona uma configuração mais avançada, permitindo a personalização de diversas opções e extensões.

Compatibilidade de Plug-ins Extensiva

O Vite utiliza a interface de plug-ins do Rollup, o que significa que é compatível com a maioria dos plug-ins Rollup prontos para uso. Isso proporciona uma ampla gama de recursos para os desenvolvedores, permitindo a personalização e otimização de projetos.

Tempo de Compilação Mais Rápido

Para a criação de aplicativos para produção, o Vite utiliza o Rollup pré-configurado, conhecido por ser um empacotador mais eficiente que o webpack. Isso resulta em um tempo de compilação geralmente mais rápido que o do CRA, gerando uma saída menor em tamanho.

Conclusão

Com a mudança de recomendação do React para novos projetos, é crucial explorar opções além do CRA. Enquanto o Create Next App e o Remix são alternativas sugeridas pelo React, o Vite também se destaca como uma excelente opção para iniciar um projeto React. Sua velocidade, flexibilidade e compatibilidade de plug-ins oferecem uma experiência de desenvolvimento mais rápida e eficiente. Em última análise, a escolha da ferramenta dependerá das necessidades específicas do projeto e das preferências do desenvolvedor.

Publishing an NPM package to the Gitlab Package Registry

Ramon Xavier — Tue, 05 Mar 2024 16:31:30 +0000

In this post, we will explore how to publish a package on NPM using the GitLab Package Registry within a private repository. To get started, you will need to have the latest versions of Node and a package manager (npm or yarn) installed, as well as a GitLab account and a text editor of your choice, such as VSCode.

Prerequisites: Node and (npm or yarn) in the latest versions.
GitLab account
VSCode or a text editor of your choice

Initializing the Project

To manage a Monorepo and Yarn Workspaces, we will use Lerna. To start the project, follow the steps below:

$ mkdir my-project
$ cd my-project
$ npx lerna init

To add the necessary configurations to the lerna.json file, you should include the following code block:

// In ./lerna.json
{
  "packages": ["packages/*"],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "independent",
  "command": {
    "publish": {
      "registry": "https://gitlab.com/api/v4/projects/<your-project-id>/packages/npm/"
    }
  }
}

To capture the Project ID, go to your GitLab repository settings and check the value that appears in the URL. The Project ID is the number that appears after the slash in https://gitlab.com/<your_user>/<your_repository>/edit, for example:
https://gitlab.com/my_user/my_repository/edit -> Project-ID: 123456

To create a project within the repository, you can use the following command:

$ cd packages
$ mkdir my-lib

Inside this repository, you can create an NPM project using the commands npm init, yarn init, or pnpm init.
After creating your project, open the package.json file and add the following configurations:

"publishConfig": {
    "@my-project:registry": "https://gitlab.com/api/v4/projects/<your-project-id>/packages/npm/"
  },
"sideEffects": false,

Returning to the GitLab Package Registry, after creating your project, let's see how to publish it to NPM within a private repository. To do this, return to the project root and create a file called .npmrc.
This file is important because it contains the necessary configuration information to publish a package to NPM, including access credentials for the GitLab Package Registry. To create it, simply run the command touch .npmrc in the terminal while in the root directory of your project.
Next, add the following lines to the .npmrc file:

// inside .npmrc
@my-project:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=<authentication_token>
//gitlab.com/api/v4/projects/<project_id>/packages/npm/:<authentication_token>

Replace <project_id> with your GitLab project ID and <authentication_token> with the access token you generated earlier. Remember that this token is sensitive and should not be shared publicly.

Creating Our AUTH TOKEN

To begin, go to your GitLab repository settings by clicking on "Settings" at the bottom. To create an access token, go to your project settings in GitLab and access the "Access Tokens" section.

When creating your access token, it is important to set the correct attributes to ensure the security of your project. Some of the information you should define includes:
After creating your access token, you can return to your local project and publish it to the GitLab Package Registry using the following command:

AUTH_TOKEN_GITLAB=<your_token_value> yarn build && lerna publish --yes

If everything went well, by following the described steps, you will be able to see your project published in the Package Registry tab. This means that your library is available for use by other developers who have access to the GitLab repository. Remember that to ensure the security of your project and users, it is important to follow best security practices when configuring access permissions and sharing credentials. This way, you can contribute to a safer and more reliable development ecosystem.

Now, to add your library to a project, you will need to create an .npmrc file in the project's root directory and add your library variables.

// inside .npmrc
@my-project:registry=https://gitlab.com/api/v4/projects/<project-id>/packages/npm/
//gitlab.com/api/v4/projects/36997980/packages/npm/:_authToken=AUTH_TOKEN_GITLAB
// finally, add your package to your project.
$ yarn add @my-project/my-lib or npm install @my-project/my-lib

Thank you for reading, and I hope this was helpful! If you have any questions or suggestions, feel free to leave a comment below. We are always available to help improve your development experience. See you next time!

DEV Community: Ramon Xavier