
# Semelhanças entre os framworks NestJS e Angular

Com essa combinação, é possível construir aplicações completas, tanto no back-end quanto no front-end, utilizando a mesma arquitetura, linguagem e testes.

## Nomeclatura dos arquivos

A nomenclatura dos arquivos segue o mesmo padrão: `nome.função.extensão`. No NestJS, um controller seria `cat.controller.ts`, enquanto no Angular, um componente seria `cat.component.ts`. Alguns arquivos até compartilham o mesmo nome, como módulos e serviços. Por exemplo: `app.module.ts` e `cat.service.ts`.

## main.js

O arquivo de inicialização de ambos possue o mesmo nome, diretório e função. O arquivo `src/main.js` realiza o bootstrap e inicia o AppModule.

NestJS

```typescript
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();
```

Angular

```typescript
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));
```

## Modulorização

No arquivo `src/main.js`, o `AppModule` é passado como parâmetro para o bootstrap. Tanto no NestJS quanto no Angular o AppModule representa o módulo principal da aplicação.

```typescript
@Module({
  imports: [BrowserModule, FormsModule],
  controllers: [CatsController],
  providers: [CatsService],
})
export class CatsModule {}
```

NestJS - O módulo é exportado como uma classe decorada com @Module() que recebe um objeto de configuração."

```typescript
@NgModule({
  declarations: [CatsComponent],
  imports: [FormsModule],
  providers: [CatsService],
  bootstrap: [AppComponent],
})
export class CatsModule {}
```

Angular - A única diferença é o nome do decorador `@NgModule()`.

import, export, providers são idênticos.

## Serviços

Ao criar um serviço tanto no aplicativo no NestJS quanto no Angular é utilizado o decorator @Injectable().

NestJS / Angular

```typescript
@Injectable()
class HeroService {}
```

- Injeção de dependencia também é idêntica. Tudo é classe e as dependência são passadas via constructor,

```typescript
@Component({ … })
class HeroListComponent {
  constructor(private service: HeroService) {}
}
```

## CLI

Ambos possuem CLI que geram códigos prontos já com módulos configurados. exemplo:

```bash
ng generate component product-details
```

gerar um componente no angular

```bash
nest generate service product
```

gerar um service no NestJS

```bash
nest generate resource product
```

Gerar uma pasta com um módulo contendo um CRUD básico: controller, service e teste

Essas são algumas das semelhanças entre Angular e NestJS.


Angular e NestJS: Utilizam a mesma arquitetura? Vamos explorar as principais semelhanças e diferenças entre eles.


## Introdução

fala dev, Beleza ? Me chamo Lucas, sou cearense, programador há alguns anos e atualmeite trabalho construindo coisas incríveis na Trivod.

Este blog tem o objetivo de falar sobre os desafios do dia-a-dia do dev web, compartilhar boas práticas, fundamentos e soluções que servirão para ajudar outros devs. Além disso, acredito que passar conhecimento é uma excelente forma de aprimorar meus próprios conhecimentos além de fazer a diferença.

meus planos envolvem falar de Javascript/Typescript, Fundamentos, framworks, erros, e resolução de problemas.

Obrigado, até a própxima 🖖🏻.


🙋🏻‍♂️ Hello World!


## Como implementar modo dark em um projeto nextjs e tailwindcss

No primeiro post mostrei como este blog foi implementado a partir de um exemplo oficial do nextjs e hospedado no github pages. Agora preciso implementar o modo dark nele para conseguirmos ler o conteúdo sem prejudicar nossa visão. hoje implementaremos um botão com ícones de sol/lua para alternar entre os modos dark e light.

Usaremos o next-themes que já nos fornece o funcionamento dos modos dark/light e o react-icons apenas para inserir os ícones de sol e lua.

```
npm install next-themes react-icons
```

ou

```
yarn add next-themes react-icons
```

## instalando o ThemeProvider

No `pages/_app.tsx` deveremos importar o `ThemeProvider` e usa-lo para envolver o <Component>

Para habilitar o modo dark como padrão insira o atributo `defaultTheme="dark"` no `ThemeProvider`

O atributo `attribute="class"` é obrigatório para fazer funcionar com as classes do tailwind

```
import { ThemeProvider } from "next-themes";
import { AppProps } from 'next/app'
import '../styles/index.css'


export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider defaultTheme="dark" attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
    );
}

```

## Habilitando o modo dark

No arquivo `tailwind.config.js` insira a linha `darkMode: 'class',` para habilitar o modo dark

```
module.exports = {
  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
  darkMode: 'class',
```

## Definindo as classes css de textos e background

Setaremos as cores do texto e backgrounds em cada modo.
No arquivo `styles/index.css` acrescente o seguinte código

```
@layer base {
    body {
        @apply bg-gray-50
        dark:bg-gray-900
        text-gray-900
        dark:text-gray-50
        transition-colors;
    }
}
```

## Componente para alternar modos.

Crie um componente chamado `components/themeToggle` com o seguinte conteúdo:

```
import { useEffect, useState } from "react";
import { useTheme } from "next-themes";

// Aqui temos os ícones de Lua e Sol
import { BiMoon, BiSun } from "react-icons/bi";

export default function ThemeToggle() {
    const [mounted, setMounted] = useState(false);
    const { theme, setTheme } = useTheme();

    useEffect(() => setMounted(true), []);
    if (!mounted) return null;

    function isDark() {
        return theme === "dark";
    }

    return (
        <button
            className="focus:outline-none"
            onClick={() => setTheme(isDark() ? "light" : "dark")}
            aria-label="Theme toggle"
        >
            {isDark() ? <BiSun size={20} /> : <BiMoon size={20} />}
        </button>
    );
}
```

Agora é só importa-lo e usa-lo em qualquer lugar. aqui no blog coloquei no `components/layout.tsx` para ficar presente em todas as telas

```
<div className="p-3 fixed right-0 top-0">
  <ThemeToggle />
</div>
```


Como implementar modo dark em um projeto nextjs e tailwindcss


## Como hospedar um site nextjs no github pages

A idéia é clonar o repositório oficial que já contém um [blog markdown do nextjs](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) e configurar o build para gerar as páginas estáticas a serem hospedadas no github pages.

## Criar um novo projeto Blog Nextjs

Clone o seguinte repositório:
<https://github.com/vercel/next.js/tree/canary/examples/blog-starter>

ou rode algum dos comandos abaixo para criar um diretório local com o conteúdo do repositório citado.

não se esqueça de trocar o texto ¨blog-starter-app¨ pelo nome do diretório do projeto.

```bash
npx create-next-app --example blog-starter blog-starter-app
```

ou

```bash
yarn create next-app --example blog-starter blog-starter-app
```

ou

```bash
pnpm create next-app --example blog-starter blog-starter-app
```

## Analizando o projeto

Cada arquivo markdown dentro da pasta /\_posts é compilado como um post do blog. Dados como título, thumbnail, author, entre outros, também são declarados no arquivo com extensão .md

entre na pasta do projeto pelo terminal e rode os comandos de start,

```bash
npm install
npm run dev
```

ou

```bash
yarn
yarn dev
```

Isso iniciará um servidor nextjs e retornará um link provavelmente http://localhost:3000 pelo terminal.

Acesse o link e veja seu blog pelo navegador.

[navegue na documentação do nextjs](https://nextjs.org/docs) para aprender a modifica-lo como quiser.

## Como gerar páginas estáticas com nextjs

Para gerar páginas estáticas com next é necessário rodar o comando [next export](https://nextjs.org/docs/advanced-features/static-html-export), para isso vamos editar nosso arquivo **package.json** para acrescentar o comando export ao build.

acrescente ¨ && next export¨ à linha ¨build¨ como no exemplo abaixo.

```
"scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "next start",
    "typecheck": "tsc"
  }
```

agora ao rodar o comando build uma pasta ./out será criada, com arquivos estáticos que servem seu blog, isso é útil para ser rodado como uma action do github.

## Criar variável de ambiente

Precisamos de uma variável de ambiente com o nome do nosso repositório para que as rotas funcionem, para isso vamos criar um arquivo `.env`.

Crie o arquivo `touch .env` e insira a variável como abaixo

```
NEXT_PUBLIC_REPO_NAME = "/nome-do-seu-repositorio-aqui"
```

## Como configurar o github actions para servir um site nextjs estático.

Com o github actions é possível automatizar a compilação com a utilização de diversos comandos, inclusive node, disponíveis para serem executados direto de um repositório no github.

Usaremos o Github Actions para em cada push gerar as páginas estáticas e coloca-las em uma nova branch pronta para seren servidas.

crie um arquivo node.js.yml no diretório ./.github/workflows/

```bash
touch ./.github/workflows/node.js.yml
```

cole o seguinte código no arquivo node.js.yml

```
name: Node.js CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      NEXT_PUBLIC_REPO_NAME: "/nome-do-seu-repositorio-aqui"
    steps:
    - uses: actions/checkout@v1
      with:
        node-version: 12
    - run: npm install -g yarn
    - run: yarn install --frozen-lockfile
    - run: yarn build
    - run: touch ./out/.nojekyll

    - name: Deploy 🚀
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        folder: out
```

1. em NEXT_PUBLIC_REPO_NAME: "/insira-aqui-o-nome-do-repositorio"

Acesse a [documentação do github actions](https://docs.github.com/pt/actions/learn-github-actions/understanding-github-actions) para obter mais informaões.

agora seus próximos commits rodarão o build configurado acima.

## Como configurar basePath e assetPrefix do next.config.js para github pages

Para que as rotas, arquivos e imagens funcionem bem no github pages é necessário ativar as opções basePath e assetPrefix no seu arquivo next.config.js.

caso ele não exista na raiz do projeto crie-o. com o comando

```
touch next.config.js
```

Insira o seguite código em next.config.js substitua com a variável de ambiente do seu repositório.

```
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    basePath: process.env.NEXT_PUBLIC_REPO_NAME,
    assetPrefix: process.env.NEXT_PUBLIC_REPO_NAME
}
module.exports = nextConfig
```

## Problema com imagens

As imagens também precisam do nome do diretório como prefixo para funcionarem, a unica solução que achei pra isso é inserindo como stringo ou como variável de ambiente manualmente nas tags <img> do projeto.

Neste projeto apenas os componentes /components/avatar.tsx e /components/cover-image.tsx usam a tag <img>

a alteração é apenas inserir a string com o nome do repositörio no início do atributo src, ou apenas usar a variável de ambiente que já definimos:

```
<img src={process.env.NEXT_PUBLIC_REPO_NAME + picture} />
```

## Conclusão

Agora temos um blog hospedado pronto para uso. Em settings/pages é possível configurar um domínio perosnalizado, voçe pode adquirir um domínio em uma plataforma como registro.br, domains.google, godaddy.com [e aponta-lo para o dns do github] (https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site)
[Projeto hospedaddo no github pages](https://github.com/lucsa-dev/blog).


Como hospedar um site nextjs no github pages

<h2>Introdução</h2>
<p>fala dev, Beleza ? Me chamo Lucas, sou cearense, programador há alguns anos e atualmeite trabalho construindo coisas incríveis na Trivod.</p>
<p>Este blog tem o objetivo de falar sobre os desafios do dia-a-dia do dev web, compartilhar boas práticas, fundamentos e soluções que servirão para ajudar outros devs. Além disso, acredito que passar conhecimento é uma excelente forma de aprimorar meus próprios conhecimentos além de fazer a diferença.</p>
<p>meus planos envolvem falar de Javascript/Typescript, Fundamentos, framworks, erros, e resolução de problemas.</p>
<p>Obrigado, até a própxima 🖖🏻.</p>


Introdução

Posts

Angular e NestJS: Utilizam a mesma arquitetura? Vamos explorar as principais semelhanças e diferenças entre eles.

Como implementar modo dark em um projeto nextjs e tailwindcss

Como hospedar um site nextjs no github pages