No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
13H
5M
40S
Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Sitios multi-p谩gina

15/19
Recursos

Con Vite podremos ser capaces de generar proyectos con m煤ltiples p谩ginas de inicio, esto quiere decir que adem谩s del index.html (por lo general entrada de un proyecto en Vite), podremos tener m谩s archivos que se comporten como una p谩gina separada a este, con sus propias dependencias, sus propios elementos y completamente individuales.

Configurando Vite

Para poder lograr esto vamos a hacer uso de la configuraci贸n de Vite, pero tambi茅n vamos a hacer uso de la configuraci贸n de rollup, con el cual podremos hacer m煤ltiples archivos de entrada.

Creando otra p谩gina inicial

Antes de empezar con la configuraci贸n vamos a crear una carpeta con el nombre de help y dentro de este un archivo html con el nombre de help.html, con un c贸digo bastante b谩sico.

```

Help

Help!

```

Ahora vamos a generar una configuraci贸n que nos permita retornar diferentes cosas dependiendo del modo. Es as铆 que si estamos en modo desarrollo retornaremos el puerto donde queremos que se ejecute la aplicaci贸n.

``` import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080; const env = loadEnv(mode, process.cwd());

console.log(comando: ${command} y modo: ${mode}); console.log("Variables de entorno:", env);

if (command === "development") { console.log("Modo desarrollo"); return { server: { port }, }; } else { console.log("Modo produccion"); } }); ```

Configurando rollup

En modo producci贸n retornaremos una configuraci贸n para el proceso de build, dentro de este acceder a la configuraci贸n de rollup e indicarle cu谩les son los diferentes archivos de entrada con la opci贸n input.

``` import { defineConfig, loadEnv } from "vite"; import { resolve } from "path";

export default defineConfig(({ command, mode }) => { const port = 8080; const env = loadEnv(mode, process.cwd());

console.log(comando: ${command} y modo: ${mode}); console.log("Variables de entorno:", env);

if (command === "development") { console.log("Modo desarrollo"); return { server: { port }, }; } else { console.log("Modo produccion"); return { build: { rollupOptions: { input: {}, }, }, }; } }); ```

Opci贸n input

La opci贸n input recibe las diferentes entradas que queremos para nuestro proyecto, que consisten en un nombre para el archivo y al frente su ubicaci贸n. Para la ubicaci贸n estamos usando resolve, una funci贸n de nodejs que se importa desde path.

resolve recibe como primer par谩metro el nombre del directorio donde se ejecuta nuestro proyecto, el cual puede ser obtenido a trav茅s de la variable __dirname y despu茅s tendr铆amos que escribir la direcci贸n del archivo a referenciar.

Ejemplo

Ahora debemos de definir las diferentes entradas para nuestro proyecto.

  1. El index.html, que se encuentra en la ra铆z del proyecto. Esta la podemos nombrar main y a continuaci贸n utilizar la funci贸n resolve con los par谩metros que ya conocemos. main: resolve(__dirname, "index.html")
  2. Crearemos una entrada para el archivo help.html, que se encuentra en la carpeta help. help: resolve(__dirname, "help/help.html"),

``` import { defineConfig, loadEnv } from "vite"; import { resolve } from "path";

export default defineConfig(({ command, mode }) => { const port = 8080; const env = loadEnv(mode, process.cwd());

console.log(comando: ${command} y modo: ${mode}); console.log("Variables de entorno:", env);

if (command === "development") { console.log("Modo desarrollo"); return { server: { port }, }; } else { console.log("Modo produccion"); return { build: { rollupOptions: { input: { main: resolve(__dirname, "index.html"), help: resolve(__dirname, "help/help.html"), }, }, }, }; } }); ```

Una vez tenemos esta configuraci贸n a la hora de hacer el build rollup va a partir desde ambos proyectos y tratarlos por separado. Si ejecutamos el proyecto con el comando dev y vamos al navegador podremos ver que ahora en la ruta /help/help.html se encuentra nuestro otro proyecto.

Por el contrario, si ejecutamos el comando build podremos ver en la consola un mensaje parecido al siguiente:

vite-multipage.png

El cual nos dice que se gener贸 un trozo para help y que en la carpeta dist encontraremos la carpeta help con el archivo help.html.

Micro Frontends

Lo que vimos anteriormente es una caracter铆stica en espec铆fico de Vite que puede llegar a ser muy 煤til para la tendencia de Mircro Frontends, una forma de pensar el frontend de manera que tengas m煤ltiples frameworks coexistiendo en el mismo proyecto.

Contribuci贸n creada por: Jofay Zhan Segura

Aportes 4

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Sitios Multi p谩ginas

Se pueden generar sitios de multi p谩ginas de inicio, normalmente en un proyecto el archivo principal es el index sin embargo hay proyectos donde se puede llegar a usar otro punto de entrada o un segundo sitio, que no se comporte como una p谩gina aparte principal si no como una p谩gina independiente.

Para esto debemos hacer uso de la configuraci贸n de Rollup y Vite.
Recordemos que el archivo de Config de Vite es para poder tomar el control del mismo

import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path' // Use NodeJS

export default defineConfig(({command, mode}) => {
	
	const env = loadEnv(mode, process.cwd())

	if(mode === 'development') {
			return {
                server: {
                port: env.VITE_PORT
                }
	    }
    }
  else {
			console.log("Mode production")
			return {
					build: {
						// Configuration de Rollup
						rollupOptions: {
								// Configuration rollup, not vite
								input: {
										main: resolve(__dirname, 'index.html'),
                                        hel: resolve(__dirname, 'help', 'help.html'),
									}
								}
						}
				}
			}
  })

Vite esta pensando en una tendencia que esta creciendo a d铆a de hoy que es MicroFrameworks, es decir que todos los Frameworks se puedan integrar

Me aparec铆a un error al momento de ejecutar el comando 鈥渘pm run build鈥 que dec铆a 鈥淩eferenceError: __dirname is not defined鈥.
Lo pude arreglar declarando la variable __dirname de esta forma.

import {resolve,dirname } from 'path';
const __dirname = resolve(dirname(''));

y con eso ya pude construir a producci贸n.

Yo estoy creando la configuraci贸n inicial para trabajar con React + TS (tomando como base la que ya fu茅 creada por la comunidad), pero igual alguno de estos tips les puede servir, trabajando con react solo, o incluso con vanila JS.

  • Funci贸n para crear alias
  • Crear un objeto con las configuraciones iniciales, y dependiendo del modo ir agregando diferentes propiedades, como en el c贸digo siguiente:
import * as path from 'path'
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// Add the paths you need as alias
const paths = [
  "assets",
  "components",
  "hooks",
  "pages",
  "styles",
  "utils",
]

/**
 * Function to create the aliases
 * @returns An array with the aliases
 */
const getAliases = () => paths.map(p => ({ find: `@${p}`, replacement: path.resolve(__dirname, `src/${p}`) }))

interface config {
  resolve: object;
  plugins: any[]
  [key: string]: any;
}

/**
 * Initial configuration for Vite
 */
export default defineConfig(({ command, mode }) => {
  console.log({ command, mode })

  const config: config = {
    plugins: [react()],
    resolve: {
      alias: getAliases(),
    }
  }

  if (mode === 'development') {
    const env = loadEnv(mode, process.cwd())
    
    config.server = {
      port: env.VITE_PORT,
    }
  }

  return config
})
  • Para aquellos que el __dirname les de un error la razon se encuentra en el archivo package.json.

  • Cuando configura type: module en package.json Node tratar谩 todos los archivos JS como m贸dulo ES y __dirname no est谩 disponible en el m贸dulo ES. Necesitas escribir tu propia __dirname variable o borrar dicha propiedad de la configuracion.

En caso contrario pueden usar las soluciones de los otro compa帽eros.
O esta:

import { dirname } from 'path'
import { fileURLToPath } from 'url'

const _dirname = typeof __dirname !== 'undefined'
  ? __dirname
  : dirname(fileURLToPath(import.meta.url))