Construcción de la app

1. Crear una carpeta vacía #

1mkdir planificador
2cd planificador

En este momento no tenemos nada:

1planificador/

2. Inicializar un proyecto npm #

Ejecutamos:

1npm init

npm nos irá preguntando:

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

Al terminar aparece:

1planificador/
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": "planificador",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para llevar el control de lo que se va viendo en clase",
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:

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

Y nuestro package.json ha cambiado:

1{
2  "name": "planificador",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para llevar el control de lo que se va viendo en clase",
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:

1planificador/
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="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=
6    , initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <h1>Planificación del curso 2</h1>
11    <input id="texto" type="text" placeholder="Escribe lo que has hecho hoy"/>
12    <button id="añadir">Añadir</button>
13
14    <ul id="lista">
15       <li>xxxxxxx</li>
16    </ul>
17
18    <script type="module" src="/src/main.js"></script>
19</body>
20</html>

Y src/main.js:

1const boton = document.getElementById("añadir")
2const input = document.getElementById("texto")
3const lista = document.getElementById("lista")
4
5boton.addEventListener("click", guardarPlan)
6
7function guardarPlan(){
8        const li = document.createElement("li")
9        li.textContent = input.value
10        lista.appendChild(li)
11        input.value = ""
12}

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 vista en clase 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": "planificador",
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 boton = document.getElementById("añadir")
4const input = document.getElementById("texto")
5const lista = document.getElementById("lista")
6
7boton.addEventListener("click", guardarPlan)
8
9function guardarPlan(){
10        const fechaHoy = dayjs().format("DD/MM/YYYY HH:mm")
11        const li = document.createElement("li")
12        li.textContent = input.value + " - " + fechaHoy
13        lista.appendChild(li)
14        input.value = ""
15}

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": "planificador",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para llevar el control de lo que se va viendo en clase",
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 planificador
2cd planificador

En este momento no tenemos nada:

1planificador/

2. Inicializar un proyecto npm #

Ejecutamos:

1npm init

npm nos irá preguntando:

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

Al terminar aparece:

1planificador/
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": "planificador",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para llevar el control de lo que se va viendo en clase",
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:

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

Y nuestro package.json ha cambiado:

1{
2  "name": "planificador",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para llevar el control de lo que se va viendo en clase",
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:

1planificador/
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="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=
6    , initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <h1>Planificación del curso 2</h1>
11    <input id="texto" type="text" placeholder="Escribe lo que has hecho hoy"/>
12    <button id="añadir">Añadir</button>
13
14    <ul id="lista">
15       <li>xxxxxxx</li>
16    </ul>
17
18    <script type="module" src="/src/main.js"></script>
19</body>
20</html>

Y src/main.js:

1const boton = document.getElementById("añadir")
2const input = document.getElementById("texto")
3const lista = document.getElementById("lista")
4
5boton.addEventListener("click", guardarPlan)
6
7function guardarPlan(){
8        const li = document.createElement("li")
9        li.textContent = input.value
10        lista.appendChild(li)
11        input.value = ""
12}

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 vista en clase 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": "planificador",
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 boton = document.getElementById("añadir")
4const input = document.getElementById("texto")
5const lista = document.getElementById("lista")
6
7boton.addEventListener("click", guardarPlan)
8
9function guardarPlan(){
10        const fechaHoy = dayjs().format("DD/MM/YYYY HH:mm")
11        const li = document.createElement("li")
12        li.textContent = input.value + " - " + fechaHoy
13        lista.appendChild(li)
14        input.value = ""
15}

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": "planificador",
3  "version": "1.0.0",
4  "description": "Aplicación sencilla para llevar el control de lo que se va viendo en clase",
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` #