Pular para o conteúdo principal

Criar com React

Este processo de criação pode ser aplicado em outros contextos, por exemplo para criar qualquer tipo de projeto React, neste caso fazer as devidas adaptações de nome e a pasta onde os comandos são executados.

A base de entendimento é que será criada a camada web, ou seja o frontend da nossa aplicação Netuno.

Por isso é assumido que será criado dentro da aplicação Netuno o website, nome padrão para a camada de frontend mas que pode ser qualquer outro nome desejado.

Pré-requisitos

Deve ter o Netuno instalado:

Devido a melhor performance entre outras vantagens deve ter o PNPM e o Bun instalados:

Criação

Para criar uma aplicação React dentro de uma aplicação Netuno normalmente chamamos de website.

Então com o terminal dentro da raíz da sua aplicação Netuno, que normalmente fica dentro da pasta:

  • netuno/apps/MINHA_APP

Onde MINHA_APP é o nome da aplicação Netuno.

Execute o comando:

pnpm create vite

De seguida com a pergunta: Project name:

Digite website e pressione a tecla ENTER.

Na sequência vem a pergunta: Select a framework:

Utilize as setas do teclado, e pressione a tecla para baixo até a escolha da opção React e pressione a tecla ENTER.

Para finalizar, a seguitne pergunta: Select a variant:

Utilize as setas do teclado, e pressione a tecla para baixo até a escolha da opção JavaScript e pressione a telca ENTER.

Este comando irá criar um novo diretório denominado 📂 website onde estará contida o frontend com React.

Após ter criado o frontend com React, execute da seguinte forma para instalar as dependências:

cd website
pnpm install

Abra a pasta da sua aplicação Netuno no seu editor preferido (como o VSCode, WebStorm, entre outros), e entre na pasta website que foi criada.

Executar

Antes de executar deve alterar o arquivo package.json para executar os comandos de script com o Bun.

Alterer os scripts no package.json da seguinte forma:

package.json
...
"scripts": {
"dev": "bunx --bun vite",
"build": "bunx --bun vite build ",
"watch": "bunx --bun vite build --watch",
"preview": "bunx --bun vite preview"
},
...

Deve colocar o prefixo bunx --bun nos scripts.

Agora é possível iniciar o servidor de frontend com React utilizando o comando:

pnpm run dev

Isto fará com que o frontend esteja disponível no endereço http://localhost:5173/, normalmente ou em outro endereço com outro número de porta poderá aparecer no terminal, de qualquer forma basta abrir no browser o endereço apresentado no terminal.

Para terminar a execucão no terminal prescione as teclas CTRL e C simultaneamente.

Instalação de Dependências

Caso esteja executando o servidor de frontend no terminal, ou seja pnpm run dev, é recomendado parar, prescione as teclas CTRL e C simultaneamente.

Aconselhamos vivamente que instale os seguintes pacotes NPM, visto serem bastante úteis para o desenvolvimento de aplicações React com Netuno (clique em cada link para obter mais informações sobre cada um):

Para instalar os pacotes acima listados basta executar o seguinte conjunto de comandos no terminal:

pnpm install react-router
pnpm install antd
pnpm install @ant-design/icons
pnpm install less
pnpm install @netuno/service-client

Em alternativa também pode instalar todos os pacotes de uma única vez:

pnpm install react-router antd @ant-design/icons less @netuno/service-client

Configurações

Após executar os comandos acima, pode forçar um endereço de porta padrão, dirija-se a 📂 website/vite.config.js e acrescente a configuração do server da seguinte forma:

website/vite.config.js
export default defineConfig({
server: {
port: 3000,
strictPort: true
},
plugins: [
react()
]
})

Agora ao iniciar com o comando pnpm run dev vai utilizar sempre a porta 3000.

Less

Altere todos os ficheiros .css que estão em website/src para a extensão .less.

Não esqueça de realizar está alteração no código JSX nas linhas que faz o import dos ficheiros .css, alterar para .less.

O LESS permite um desenvolvimento mais estruturado e moderno do CSS.

Customização do Tema do Ant.Design

Para customizar as cores do Ant.Design utilize o componente ConfigProvider no App.jsx.

Por exemplo:

website/src/App.jsx
import { ConfigProvider, Button } from 'antd';
...
function App() {
...
return (
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
...
<Button type="primary">Meu Botão com Cor Customizada</Button>
...
</ConfigProvider>
);
}
...

Assim é possível ajustar qualquer configuração de estilização do Ant.Design.

Dark Theme

Também é possível utilizar o tema escuro do Ant.Design, para isto basta importar o theme que contém o dark mode e aplicar no ConfigProvider:

import { ConfigProvider, Button, theme } from 'antd';
...
<ConfigProvider theme={{
token: {
colorPrimary: '#FF6500'
},
algorithm: theme.darkAlgorithm,
}}>
...
<Button type="primary">Meu Botão com Cor Customizada</Button>
...
</ConfigProvider>
...

Restyle

Repare que nas parametrizações do ConfigProvider acima, é possível alterar facilmente o estilo do Ant.Design, mais sobre a customização do Ant.Design:

Em cada componente do Ant.Design tem as configurações possíveis de Design Token, por exemplo nos Botões:

<ConfigProvider theme={{
token: {
colorPrimary: '#00b96b',
fontSize: 18,
},
components: {
Button: {
defaultBg: '#D6BD98',
defaultColor: '#1D1616',
primaryColor: '#000B58',
textTextColor: '#181C14',
}
}
}}>
...
<Button type="primary">Meu Botão com Cor Customizada</Button>
...
</ConfigProvider>

Início automático do frontend com o Netuno

O Netuno permite-lhe iniciar a aplicação em React juntamente com o processo de servidor da aplicação Netuno.

Todas as mensagens de compilação da aplicação em React estarão integradas no mesmo terminal que a aplicação Netuno.

Para tal basta adicionar à configuração commands da aplicação Netuno em 📂 config/_development.json o seguinte:

config/_development.json
{
...
"commands": [
...
{
"path": "website",
"command": "pnpm run dev",
"install": "pnpm install",
"enabled": true
}
]
...
}

Sempre que editar ficheiros de configuração da aplicação Netuno será necessário reiniciar a aplicação para que esta possa assumir as novas alterações.

Por fim inicie/reinicie a sua aplicação Netuno para comprovar o seu funcionamento.

Configuração de CORS (Cross-Origin Resource Sharing)

Para configurar o CORS e evitar possíveis erros entre comunicação do frontend com os serviços da aplicação Netuno, edite a configuração da aplicação em:

  • 📂 config/_development.json

Repare se já existe a configuração de cors, e se estiver no origins o *, então serve bem para o desenvolvimento podendo ficar assim.

Caso não haja a configuração de cors, então adicione com base neste exemplo, sendo que o endereço deve ser o mesmo endereço do frontend:

config/_development.json
{
...
"cors": [
{
"enabled": true,
"origins": [ "http://localhost:3000" ]
}
],
...
}

Se o origins conter um * quer dizer que qualquer endereço de front-end será suportado, por exemplo:

  • "origins": [ "*" ] Normalmente utilizamos o * em desenvolvimento.

Estando a configuração implementada pode integrar os serviços de API que pretender com o frontend, sem problemas com a segurança de CORS.

Mais sobre CORS

Variáveis de Ambiente

Pode ser definida a configuração das variávies de ambiente através da criação do ficheiro website/.env, com as definições das variáveis, por exemplo:

NODE_ENV=development

Ou através da configuração da aplicação do Netuno, por exemplo em:

  • 📂 config/_development.json

E definindo as variáveis de ambiente na configuração do comando na parametrização env, por exemplo:

config/_development.json
{
...
"commands": [
...,
{
"env": ["NODE_ENV=development"],
"path": "website",
"command": "pnpm run start",
"install": "pnpm install",
"enabled": true
}
]
}