Construcción de la app

1. Crear una carpeta vacía #

1mkdir taskapp
2cd taskapp

En este momento no tenemos nada:

1taskapp/

2. Inicializar un proyecto npm #

Ejecutamos:

1npm init

npm nos irá preguntando:

1package name: (taskapp)
2version: (1.0.0)
3description:
4entry point: (index.js)
5test command:
6git repository:
7keywords:
8author:
9license: (ISC)

Al terminar aparece:

1taskapp/
2└── package.json

package.json es el archivo que describe nuestro proyecto Node/npm.

Todavía no tenemos Vite ni ninguna otra dependencia instalada.

También puedes utilizar:

1npm init -y

para aceptar automáticamente los valores predeterminados.

3. Examinar el primer `package.json` #

Tendremos algo parecido a:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla de tareas",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC"
11}

No existe todavía:

1"dependencies": {}

ni:

1"devDependencies": {}

porque todavía no hemos instalado ningún paquete.

4. Instalar Vite #

Ahora queremos utilizar Vite como herramienta de desarrollo:

1npm install --save-dev vite

También podemos escribir:

1npm i -D vite

Ahora ocurren tres cosas importantes:

1taskapp/
2├── node_modules/
3├── package.json
4└── package-lock.json

Y nuestro package.json ha cambiado:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla de tareas",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC",
11  "devDependencies": {
12    "vite": "^7.x.x"
13  }
14}

node_modules → contiene físicamente los paquetes instalados.
package.json → declara que nuestro proyecto utiliza Vite.
package-lock.json → registra las versiones concretas instaladas.

5. Crear nuestra aplicación #

Ahora creamos:

1taskapp/
2├── index.html
3├── package.json
4├── package-lock.json
5├── node_modules/
6└── src/
7    ├── main.js
8    └── style.css

Por ejemplo, index.html:

1<!DOCTYPE html>
2<html lang="es">
3<head>
4  <meta charset="UTF-8">
5  <title>TaskApp</title>
6</head>
7
8<body>
9
10  <h1>Mis tareas</h1>
11
12  <input id="tarea" placeholder="Escribe una tarea">
13  <button id="añadir">Añadir</button>
14
15  <ul id="lista"></ul>
16
17  <script type="module" src="/src/main.js"></script>
18
19</body>
20</html>

Y src/main.js:

1const input = document.querySelector("#tarea");
2const boton = document.querySelector("#añadir");
3const lista = document.querySelector("#lista");
4
5boton.addEventListener("click", () => {
6  const li = document.createElement("li");
7
8  li.textContent = input.value;
9
10  lista.appendChild(li);
11
12  input.value = "";
13});

Ya tenemos una aplicación real extremadamente sencilla.

6. Crear nuestro primer script npm #

En lugar de ejecutar directamente:

1npx vite

modificamos package.json:

1"scripts": {
2  "dev": "vite"
3}

Ahora podemos ejecutar:

1npm run dev

7. Instalar una dependencia real #

Ahora podemos hacer que cada tarea muestre la fecha de creación.

Instalamos Day.js:

1npm install dayjs

Esta vez no ponemos -D, porque Day.js forma parte del código de nuestra aplicación.

El package.json cambia otra vez:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4
5  "scripts": {
6    "dev": "vite"
7  },
8
9  "dependencies": {
10    "dayjs": "^1.x.x"
11  },
12
13  "devDependencies": {
14    "vite": "^7.x.x"
15  }
16}

1dependencies
2└── dayjs
3    La utiliza nuestra aplicación.
4
5devDependencies
6└── vite
7    Herramienta utilizada para desarrollar/construir la aplicación.

Y podemos utilizarla en nuestro codigo src/main.js:

1import dayjs from "dayjs";
2
3const input = document.querySelector("#tarea");
4const boton = document.querySelector("#añadir");
5const lista = document.querySelector("#lista");
6
7boton.addEventListener("click", () => {
8
9  const li = document.createElement("li");
10
11  const fecha = dayjs().format("DD/MM/YYYY HH:mm");
12
13  li.textContent = `${input.value} - ${fecha}`;
14
15  lista.appendChild(li);
16
17  input.value = "";
18});

8. Añadir el script de producción #

Añadimos:

1"scripts": {
2  "dev": "vite",
3  "build": "vite build"
4}

Ejecutamos:

1npm run build

Vite crea la carpeta dist/ con los archivos optimizados para producción:

1dist/

9. La demostración de que node_modules no es necesaria #

Borras:

1node_modules/

Ejecutamos:

1npm install

NPM lee:

1package.json
2        +
3package-lock.json
4        ↓
5   npm install
6        ↓
7 node_modules/

Y vuelve a instalar todo.

10. Finalizando la práctica #

En package.json pondría "type": "module", aunque Vite ya trabaja bien con módulos en el frontend:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para gestionar tareas",
5  "type": "module",
6  "scripts": {
7    "dev": "vite",
8    "build": "vite build",
9    "preview": "vite preview"
10  },
11  "dependencies": {
12    "dayjs": "^1.11.0"
13  },
14  "devDependencies": {
15    "vite": "^7.0.0"
16  }
17}

Añadiría también el script:

1"preview": "vite preview"

→ probar localmente el resultado de producción.

Añadiría .gitignore:

1node_modules/
2dist/

node_modules no se suele subir al repositorio porque puede reconstruirse con npm install.

Construcción de la app

1. Crear una carpeta vacía #

1mkdir taskapp
2cd taskapp

En este momento no tenemos nada:

1taskapp/

2. Inicializar un proyecto npm #

Ejecutamos:

1npm init

npm nos irá preguntando:

1package name: (taskapp)
2version: (1.0.0)
3description:
4entry point: (index.js)
5test command:
6git repository:
7keywords:
8author:
9license: (ISC)

Al terminar aparece:

1taskapp/
2└── package.json

package.json es el archivo que describe nuestro proyecto Node/npm.

Todavía no tenemos Vite ni ninguna otra dependencia instalada.

También puedes utilizar:

1npm init -y

para aceptar automáticamente los valores predeterminados.

3. Examinar el primer `package.json` #

Tendremos algo parecido a:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla de tareas",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC"
11}

No existe todavía:

1"dependencies": {}

ni:

1"devDependencies": {}

porque todavía no hemos instalado ningún paquete.

4. Instalar Vite #

Ahora queremos utilizar Vite como herramienta de desarrollo:

1npm install --save-dev vite

También podemos escribir:

1npm i -D vite

Ahora ocurren tres cosas importantes:

1taskapp/
2├── node_modules/
3├── package.json
4└── package-lock.json

Y nuestro package.json ha cambiado:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla de tareas",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC",
11  "devDependencies": {
12    "vite": "^7.x.x"
13  }
14}

node_modules → contiene físicamente los paquetes instalados.
package.json → declara que nuestro proyecto utiliza Vite.
package-lock.json → registra las versiones concretas instaladas.

5. Crear nuestra aplicación #

Ahora creamos:

1taskapp/
2├── index.html
3├── package.json
4├── package-lock.json
5├── node_modules/
6└── src/
7    ├── main.js
8    └── style.css

Por ejemplo, index.html:

1<!DOCTYPE html>
2<html lang="es">
3<head>
4  <meta charset="UTF-8">
5  <title>TaskApp</title>
6</head>
7
8<body>
9
10  <h1>Mis tareas</h1>
11
12  <input id="tarea" placeholder="Escribe una tarea">
13  <button id="añadir">Añadir</button>
14
15  <ul id="lista"></ul>
16
17  <script type="module" src="/src/main.js"></script>
18
19</body>
20</html>

Y src/main.js:

1const input = document.querySelector("#tarea");
2const boton = document.querySelector("#añadir");
3const lista = document.querySelector("#lista");
4
5boton.addEventListener("click", () => {
6  const li = document.createElement("li");
7
8  li.textContent = input.value;
9
10  lista.appendChild(li);
11
12  input.value = "";
13});

Ya tenemos una aplicación real extremadamente sencilla.

6. Crear nuestro primer script npm #

En lugar de ejecutar directamente:

1npx vite

modificamos package.json:

1"scripts": {
2  "dev": "vite"
3}

Ahora podemos ejecutar:

1npm run dev

7. Instalar una dependencia real #

Ahora podemos hacer que cada tarea muestre la fecha de creación.

Instalamos Day.js:

1npm install dayjs

Esta vez no ponemos -D, porque Day.js forma parte del código de nuestra aplicación.

El package.json cambia otra vez:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4
5  "scripts": {
6    "dev": "vite"
7  },
8
9  "dependencies": {
10    "dayjs": "^1.x.x"
11  },
12
13  "devDependencies": {
14    "vite": "^7.x.x"
15  }
16}

1dependencies
2└── dayjs
3    La utiliza nuestra aplicación.
4
5devDependencies
6└── vite
7    Herramienta utilizada para desarrollar/construir la aplicación.

Y podemos utilizarla en nuestro codigo src/main.js:

1import dayjs from "dayjs";
2
3const input = document.querySelector("#tarea");
4const boton = document.querySelector("#añadir");
5const lista = document.querySelector("#lista");
6
7boton.addEventListener("click", () => {
8
9  const li = document.createElement("li");
10
11  const fecha = dayjs().format("DD/MM/YYYY HH:mm");
12
13  li.textContent = `${input.value} - ${fecha}`;
14
15  lista.appendChild(li);
16
17  input.value = "";
18});

8. Añadir el script de producción #

Añadimos:

1"scripts": {
2  "dev": "vite",
3  "build": "vite build"
4}

Ejecutamos:

1npm run build

Vite crea la carpeta dist/ con los archivos optimizados para producción:

1dist/

9. La demostración de que node_modules no es necesaria #

Borras:

1node_modules/

Ejecutamos:

1npm install

NPM lee:

1package.json
2        +
3package-lock.json
4        ↓
5   npm install
6        ↓
7 node_modules/

Y vuelve a instalar todo.

10. Finalizando la práctica #

En package.json pondría "type": "module", aunque Vite ya trabaja bien con módulos en el frontend:

1{
2  "name": "taskapp",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para gestionar tareas",
5  "type": "module",
6  "scripts": {
7    "dev": "vite",
8    "build": "vite build",
9    "preview": "vite preview"
10  },
11  "dependencies": {
12    "dayjs": "^1.11.0"
13  },
14  "devDependencies": {
15    "vite": "^7.0.0"
16  }
17}

Añadiría también el script:

1"preview": "vite preview"

→ probar localmente el resultado de producción.

Añadiría .gitignore:

1node_modules/
2dist/

node_modules no se suele subir al repositorio porque puede reconstruirse con npm install.

Construcción de la app

1. Crear una carpeta vacía #

2. Inicializar un proyecto npm #

3. Examinar el primer `package.json` #

4. Instalar Vite #

5. Crear nuestra aplicación #

6. Crear nuestro primer script npm #

7. Instalar una dependencia real #

8. Añadir el script de producción #

9. La demostración de que node_modules no es necesaria #

10. Finalizando la práctica #

Cuestionario: Construcción de la aplicación con Vite y npm

Construcción de la app

1. Crear una carpeta vacía #

2. Inicializar un proyecto npm #

3. Examinar el primer `package.json` #

4. Instalar Vite #

5. Crear nuestra aplicación #

6. Crear nuestro primer script npm #

7. Instalar una dependencia real #

8. Añadir el script de producción #

9. La demostración de que node_modules no es necesaria #

10. Finalizando la práctica #

Cuestionario: Construcción de la aplicación con Vite y npm

Construcción de la app

1. Crear una carpeta vacía #

2. Inicializar un proyecto npm #

3. Examinar el primer package.json #

4. Instalar Vite #

5. Crear nuestra aplicación #

6. Crear nuestro primer script npm #

7. Instalar una dependencia real #

8. Añadir el script de producción #

9. La demostración de que node_modules no es necesaria #

10. Finalizando la práctica #

Cuestionario: Construcción de la aplicación con Vite y npm

Construcción de la app

1. Crear una carpeta vacía #

2. Inicializar un proyecto npm #

3. Examinar el primer package.json #

4. Instalar Vite #

5. Crear nuestra aplicación #

6. Crear nuestro primer script npm #

7. Instalar una dependencia real #

8. Añadir el script de producción #

9. La demostración de que node_modules no es necesaria #

10. Finalizando la práctica #

Cuestionario: Construcción de la aplicación con Vite y npm

3. Examinar el primer `package.json` #

3. Examinar el primer `package.json` #