# Creación de una aplicación FrontEnd
Para la creación de una aplicación FrontEnd se utilizará el FrameWork Next.js, el cual amplía la biblioteca React original para proporcionar un framework React extensible y fácil de usar.
Abrimos una consola en el directorio de nuestro proyecto para crearla dentro de este y ejecutamos el siguiente comando:
```ssh
npx create-next-app@latest app-name --typescript --tailwind --app
```
Al ejecutarse este comando, solicitará aprobación para crear la aplicación, respondemos afirmativamente: `y` (yes):
```ssh
Ok to proceed? (y) y
```
Posteriormente realizará algunas preguntas, a todas ellas contestaremos `yes`:
Creamos entonces la aplicación que llamaremos `my-app`
```typescript
√ Which linter would you like to use? » ESLint
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use Turbopack? (recommended) ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in C:\develop\polite\my-app.
```
Una vez haya concluido el proceso, desplegará el mensaje "Success!..."
```ssh
added 388 packages, and audited 389 packages in 2m
138 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created app-test-001 at C:\develop\polite\my-app
```
### Instalación de librerías
Acto seguido instalamos las librerías necesarias en el nuevo directorio:
```typescript
cd my-app
```
Agregamos el preprocesador de estilos SASS y el namejador de estado global de la aplicación:
```typescript
yarn add zustand
```
### Directorios
Dentro del directorio `/src`, creamos los siguientes subdirectorios:
- `components` para alojar los componentes
- `data` para datos estáticos en json
- `interfaces` para las interfaces globales del sistema
- `labels` para los textos que se desplegarán por pantalla
- `store` para creación de stores y hooks para manejo de estado global de la aplicación
- `utils` para librerías y funciones útiles para toda la aplicación
Dentro del subdirectorio `/src/components`, creamos los siguientes subdirectorios:
- `functional` para alojar los componentes funcionales
- `layout` para alojar los componentes de tipo layout
- `ui` para alojar los componentes de tipo UI
Dentro del subdirectorio `/src/store`, creamos los siguientes subdirectorios:
- `hooks` para alojar los hooks que van a interactuar con los stores
- `zustand` para alojar los stores
- `services` pas alojar los servicios de conexión a la api
Adicionalmente la aplicación ya cuenta con directorios previamente creados dentro de `/src` como `app` para alojar las páginas (rutas) de nuestra aplicación.
Dentro de `/src/app`, se deben hacer algunas modificaciones:
- Reemplazar `favicon.ico` por el definitivo de la aplicación
- Reemplazar el contenido de `globals.scss` por [**Global Styles**](https://hackmd.io/@mGoZaVHZQTWgwFlq-J3U0w/HJiOQ7SQR)<br>
- Eliminar directorio /src/app/fonts
- Modificar contenido archivo /src/app/layout.tsx
- Modificar contenido archivo /src/app/page.tsx
/src/app/layout.tsx:
```typescript=
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Título de la aplicación",
description: "Descripción de la aplicación",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
```
/src/app/page.tsx:
```typescript=
export default function Home() {
return <div></div>;
}
```
### Variables de entorno
Lo siguiente es crear un archivo de variables de entorno, este debe llamarse `.env` y debe posicionarse en la raíz del proyecto, dentro de él deben establecerse los valores de estas, algunas pueden ser, por ejemplo, la URL donde se ubica la API y si api-key:
- `NEXT_PUBLIC_API_URL` URL de la api
- `NEXT_PUBLIC_API_KEY` Key de la api
> **NOTA:**
> Los nombres de las variables deben comenzar con el prefijo `NEXT_PUBLIC_` para ser consideradas como parte del FrontEnd.
### package.json
En el archivo `package.json` se mencionan los componentes, librerías y script que necesita la aplicación para funcionar correctamente y de forma completa. En la sección `script` de su contenido, especificaremos el puerto en el cual vamos a requerir que la aplicación funcione, agregamos `-p <N° de puerto>`, en este caso 3002, debe quedar como sigue:
```json
"scripts": {
"dev": "next dev -p 3002",
"build": "next build",
"start": "next start -p 3002",
"lint": "next lint"
}
```
De esta forma, nuestra aplicación para este ejemplo podrá verse localmente en la URL `http://localhost:3002`
### Resultado final
Para verificar que todo está correcto, el proyecto debe tener la siguiente estructura mínima de directorios y archivos:
```ssh
/[main-app]
/app-[name]
/src
/app
favicon.ico
globals.css
layout.tsx
page.tsx
/components
/functional
/layout
/ui
/data
/store
/hooks
/zustand
/services
/interfaces
/utils
.env
.gitignore
Dockerfile
package.json
tsconfig.json
next.config.ts
...
```
Ver los siguientes documentos:
- [**Pages**](https://hackmd.io/@mGoZaVHZQTWgwFlq-J3U0w/HkJHLMrQA)<br>
- [**Components**](https://hackmd.io/@mGoZaVHZQTWgwFlq-J3U0w/SydCepHr1l)<br>
- [**Store**](https://hackmd.io/@mGoZaVHZQTWgwFlq-J3U0w/rkN3MQrQC)<br>
- [**Styles**](https://hackmd.io/@mGoZaVHZQTWgwFlq-J3U0w/HJiOQ7SQR)<br>
- [**Utils**](https://hackmd.io/@mGoZaVHZQTWgwFlq-J3U0w/ByaoQmHQA)<br>
Sign in with Wallet
Connect another wallet