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:
...
"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
nosscripts
.
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
eC
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:
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:
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:
{
...
"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:
{
...
"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:
{
...
"commands": [
...,
{
"env": ["NODE_ENV=development"],
"path": "website",
"command": "pnpm run start",
"install": "pnpm install",
"enabled": true
}
]
}