Ferramentas de construção são ativos valiosos para qualquer desenvolvedor da web. Atualmente, muitas ferramentas excelentes de construção estão disponíveis para todas as principais estruturas de JavaScript. Nx , uma estrutura de construção que permite que você crie monorepos e aplicativos completos de scaffold no local, é um exemplo que recentemente cresceu em popularidade.
O Nx automatiza muitas das etapas que os desenvolvedores geralmente devem executar manualmente ao construir aplicativos. Inclui recursos como cache de computação, gráficos de dependência e automação de compilação, além de uma integração de plug-in com Cypress .
Nesta postagem, veremos como usar o Nx com React para construir um aplicativo simples de lista de tarefas. Para acompanhar, verifique meu projeto de amostra no GitHub .
Vamos começar!
Configurar um espaço de trabalho
Para começar, você precisará criar um espaço de trabalho Nx. Você pode usar npx para fazer isso executando o seguinte código:
npx create-nx-workspace @ mais recente
Você também pode instalar o Nx globalmente .
Quando a CLI é executada, ela cria um espaço de trabalho, que é basicamente um contêiner para o seu projeto. Quando terminarmos, este contêiner se tornará um monorepo.
A CLI fará uma série de perguntas antes de criar o esqueleto principal do seu projeto. Estamos construindo um aplicativo React, então a estrutura do arquivo se parece com o bloco de código abaixo:
├── README.md ├── aplicativos │ ├── primeiro projeto │ └── first-project-e2e ├── babel.config.json ├── jest.config.js ├── jest.preset.js ├── libs ├── nx.json ├── package-lock.json ├── package.json ├── ferramentas │ ├── geradores │ └── tsconfig.tools.json ├── tsconfig.base.json └── workspace.json
A estrutura do arquivo inclui um diretório apps que possui duas pastas. Um é para o próprio projeto e o outro é para executar testes de ponta a ponta com Cypress .
Agora que você tem um aplicativo de scaffold, pode executá-lo usando npx nx serve first-project .
Você receberá a seguinte saída:
Criando uma API
Vamos criar uma API junto com nosso projeto React que podemos usar para realizar qualquer chamada REST. Um recurso interessante do Nx é a capacidade de adicionar uma API ao seu projeto em um único comando.
Criaremos uma API usando Express . Primeiro, você precisa instalar o plug-in express com o Nx CLI:
npm install--save-dev @ nrwl/express
Agora, você pode criar a API com o seguinte comando:
npx nx g @ nrwl/express: app api--frontendProject=first-project
A estrutura da pasta deve ser semelhante ao código abaixo:
├── README.md ├── aplicativos │ ├── api │ ├── primeiro projeto │ └── first-project-e2e ├── babel.config.json ├── jest.config.js ├── jest.preset.js ├── libs ├── nx.json ├── package-lock.json ├── package.json ├── ferramentas │ ├── geradores │ └── tsconfig.tools.json ├── tsconfig.base.json └── workspace.json
Scaffolding o aplicativo
Agora que temos os blocos de construção no lugar, vamos dar uma olhada no que construímos até agora! Se você olhar na pasta apps , verá o seguinte código:
├── api │ ├── jest.config.js │ ├── src │ │ ├── aplicativo │ │ ├── ativos Ambientes │ │ ├── │ │ └── main.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tsconfig.spec.json ├── primeiro projeto │ ├── jest.config.js │ ├── proxy.conf.json │ ├── src │ │ ├── aplicativo │ │ ├── ativos Ambientes │ │ ├── │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.tsx │ │ ├── polyfills.ts │ │ └── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tsconfig.spec.json └── first-project-e2e ├── cypress.json ├── src │ ├── acessórios │ ├── integração │ ├── plugins │ └── suporte ├── tsconfig.e2e.json └── tsconfig.json
O projeto api é um aplicativo Express completo estruturado com main.ts , um arquivo entrypoint :
/** * Este ainda não é um servidor de produção! * Este é apenas um back-end mínimo para começar. */
importar * como expresso de'expresso';
const app=express ();
app.get ('/api', (req, res)=> { res.send ({mensagem:'Bem-vindo à api!'});
});
const port=process.env.port || 3333;
const server=app.listen (port, ()=> { console.log (`Ouvindo em http://localhost: $ {port}/api`);
});
server.on ('erro', console.error);
Vá para a pasta primeiro projeto . Você verá o aplicativo React desenvolvido com a estrutura de pasta tradicional comumente vista em ativos , estilos , index , main e arquivos app :
import {StrictMode} de'react';
importar * como ReactDOM de'react-dom';
importar aplicativo de'./app/app';
ReactDOM.render ( , document.getElementById ('root')
);
Finalmente, se você olhar na pasta first-project-e2e , verá o projeto Cypress com a estrutura tradicional de qualquer suíte de teste Cypress:
├── cypress.json ├── src │ ├── acessórios │ ├── integração │ ├── plugins │ └── suporte ├── tsconfig.e2e.json └── tsconfig.json
Chamando a API
Até agora, criamos um aplicativo com scaffold. Agora, vamos adicionar um recurso que mostra a CLI em ação! Vou construir um aplicativo de tarefas pendentes simples com React e Nx .
Primeiro, copie o seguinte código para a pasta apps/first-project/src/app/app.tsx :
import React, {useState} de'react';
interface Todo { título: string;
}
export const App=()=> { const [todos, setTodos]=useState ([ {title:'Todo 1'}, {title:'Todo 2'}, ]); function addTodo () { setTodos ([ ... todos, { título: `Novo todo $ {Math.floor (Math.random () * 1000)}`, }, ]); } Retorna ( <> Todos
{todos.map ((t)=> ( - {t.title}
))}
);
};
exportar aplicativo padrão;
Se você executar npm run start a partir da raiz do projeto, verá o seguinte:
Até agora, tudo bem! Podemos melhorar nosso código integrando uma chamada ao projeto API. Primeiro, crie um arquivo chamado apps/api/src/app/todos.ts e adicione o seguinte código a ele:
importar {Express} de'express'; interface Todo { título: string;
} const todos: Todo []=[{title:'Todo 1'}, {title:'Todo 2'}]; export function addTodoRoutes (app: Express) { app.get ('/api/todos', (req, resp)=> resp.send (todos)); app.post ('/api/addTodo', (req, resp)=> { const newTodo={ título: `Novo todo $ {Math.floor (Math.random () * 1000)}`, }; todos.push (newTodo); resp.send (newTodo); });
}
O código acima cria muitas das rotas de que precisamos para nossa API. Agora, vamos registrar as rotas com nossa API, modificando o arquivo apps/api/src/main.ts para se parecer com o seguinte bloco de código:
importar * como expresso de'expresso';
import {addTodoRoutes} de'./app/todos';
const app=express ();
app.get ('/api', (req, res)=> { res.send ({mensagem:'Bem-vindo à api!'});
});
addTodoRoutes (app);
const port=process.env.port || 3333;
const server=app.listen (port, ()=> { console.log (`Ouvindo em http://localhost: $ {port}/api`);
});
server.on ('erro', console.error);
Execute npx nx serve api e pressione http://localhost: 3333/api/todos . Você verá o seguinte:
[{"title":"Todo 1"}, {"title":"Todo 2"}]
Agora, vamos chamar a API de nosso aplicativo. Vamos configurar um proxy para que as chamadas de API de nosso aplicativo React chamem a API diretamente.
Observe o arquivo workspace.json que está na raiz do projeto, onde você encontrará a configuração de todo o seu aplicativo.
Em seguida, precisamos localizar o proxyConfig no destino serve de nosso aplicativo React first-project , que deve se parecer com o seguinte bloco de código:
{ "servir": { "builder":"@ nrwl/web: dev-server", "opções": { "buildTarget":"first-project: build", "proxyConfig":"apps/first-project/proxy.conf.json" }, "configurações": { "Produção": { "buildTarget":"first-projects: build: production" } } }
}
Abra o arquivo na configuração proxyConifg em apps/first-project/proxy.conf.json e adicione o código a seguir. Ele fará o proxy de todas as chamadas de API para chamar seu projeto de API:
{ "/api": { "target":"http://localhost: 3333", "seguro": falso }
}
Agora, se modificarmos o arquivo main.ts na pasta first-rproject , podemos chamar a API em vez de usar o estado local que configuramos originalmente. Modifique apps/first-project/src/app/app.tsx para se parecer com o seguinte bloco de código:
import React, {useEffect, useState} de'react'; interface Todo { título: string;
} const App=()=> { const [todos, setTodos]=useState ([]); useEffect (()=> { fetch ('/api/todos') .então ((_)=> _.json ()) .então (definirTodos); }, []); function addTodo () { fetch ('/api/addTodo', { método:'POST', corpo:'', }) .então ((_)=> _.json ()) .então ((newTodo)=> { setTodos ([... todos, newTodo]); }); } Retorna ( <> Todos
{todos.map ((t)=> ( - {t.title}
))}
);
}; exportar aplicativo padrão;
Agora, nosso aplicativo React está chamando a API em vez de depender do estado local.
Vamos executar a API e o frontendProject ! Você pode usar npx nx serve primeiro projeto e npx nx serve api . Você também pode usar um pacote npm, como Simultaneamente e start-server-and-test , para executar a API automaticamente usando scripts.
Testando com Cypress
Conforme mencionado, o Nx vem com testes Cypress integrados quando o aplicativo é montado.
Para ver o teste em ação, modifique o arquivo de teste em apps/first-project-e2e/src/support/app.po.ts para incluir o seguinte:
export const getTodos=()=> cy.get ('li.todo');
export const getAddTodoButton=()=> cy.get ('button # add-todo');
Agora, modifique o arquivo em apps/first-project-e2e/src/integration/app.spec.ts para se parecer com o seguinte código:
import {getAddTodoButton, getTodos} de'../support/app.po'; describe ('TodoApps', ()=> { beforeEach (()=> cy.visit ('/')); it ('deve exibir todos', ()=> { getTodos (). should ((t)=> expect (t.length).equal (2)); getAddTodoButton (). click (); getTodos (). should ((t)=> expect (t.length).equal (3)); });
});
Execute npx nx e2e first-project-e2e--watch para ver seus testes em ação!
Recursos adicionais do Nx
O Nx CLI tem muitos recursos além dos que cobrimos até agora. Um dos mais úteis é a capacidade de gerar um gráfico de dependência para seu projeto, o que simplifica a complexidade projetos por meio de visualizações de dados. Nosso aplicativo simples de fazer não precisa disso, mas é legal ver mesmo assim!
Comece executando o seguinte código:
npx nx dep-graph
Você receberá uma saída parecida com a imagem abaixo:
Outro recurso muito legal é a capacidade do Nx de detectar alterações e reconstruir apenas as partes que foram afetadas pelas últimas modificações em seu projeto. Aqui estão alguns comandos de amostra que utilizam esse recurso, provenientes da documentação do Nx .
nx afetado: apps # imprime apps afetados nx afetado: libs # imprime bibliotecas afetadas nx afetado: build # builds apps e libs afetados nx afetado: lint # lints aplicativos e bibliotecas afetados nx afetado: test # testa aplicativos e libs afetados nx afetado: e2e # e2e testa aplicativos afetados
Finalmente, o Nx permite que você crie bibliotecas e cache de computação para desempenho. Eu recomendo altamente ler mais sobre esses e outros recursos!
Próximas etapas
Neste tutorial, cobrimos os fundamentos do uso do React e do Nx criando um aplicativo de tarefas simples. A próxima etapa do nosso projeto seria construir os ativos e implantá-los. Nx pode automatizar compilações para pequenos projetos e também escalar para projetos maiores com aplicativos empresariais .
Espero que você tenha gostado de ler esta postagem! Espero que tenha inspirado você a verificar Nx e usá-lo com React. Definitivamente, recomendo verificar a documentação do Nx e ler alguns de seus guias para obter mais informações.
Siga-me em andrewevans.dev e conecte-se comigo no Twitter em @ AndrewEvans0102 .
A postagem Construindo um aplicativo com React e Nx apareceu primeiro no LogRocket Blog .
