---
# System prepended metadata

title: FrontEnd - Creación de una aplicación

---

# 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>
