Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

Clase 46 de 53 • Curso Profesional de Vue.js 2

Resumen

¿Qué es Nact JS y cómo funciona?

Nact JS es un framework similar a Next.js, pero diseñado para Vue.js, creado para facilitar el server-side rendering (SSR). A través de node y herramientas como Babel y Webpack, Nact JS se convierte en una solución potente para aplicaciones Vue.js que requieren prerenderizado. Como es común con los frameworks modernos, Nact JS combina funcionalidades de Vue.js, como VueRouter y Vuex, permitiendo una experiencia enriquecida.

¿Cuáles son las características principales de Nact JS?

Algunas de las características más destacadas de Nact JS incluyen:

Integración con Node.js: Para manejar el server-side rendering.
Compatibilidad con Babel y Webpack: Se utilizan internamente para una experiencia de desarrollo enriquecida.
Funcionalidades integradas: Incluye VueRouter y Vuex, entre otros, para simplificar el desarrollo.
Fácil instalación con npm: Vue CLI ofrece plantillas para facilitar la creación de proyectos con Nact.

¿Cómo instalar y configurar un proyecto con Nact JS?

La instalación de Nact JS es sencilla si ya tienes el CLI de Vue instalado. Simplemente utiliza el comando vue init para iniciar un nuevo proyecto con el template de Nact:

vue init nuxt/starter nombre-del-proyecto

Este comando generará una nueva estructura de proyecto lista para comenzar. Durante la configuración inicial, se te solicitará información básica como el nombre del proyecto y el autor.

Estructura de carpetas y archivos en Nact JS

La estructura de directorios y archivos que proporciona Nact JS es diferente a la del web tradicional. La organización del proyecto permite un desarrollo más ordenado y eficiente.

¿Qué directorios incluye un proyecto de Nact JS?

Assets: Para archivos estáticos como CSS, JS, SAS y imágenes.
Components: Contiene componentes reutilizables definidos como archivos .vue.
Layouts: Define componentes de tipo layout, como headers y footers.
Middleware: Ejecuta código automáticamente antes de renderizar páginas.
Pages: El más importante, define las páginas de la aplicación como componentes .vue.
Plugins: Para código JavaScript específico del proyecto.
Static: Archivos estáticos adicionales, como el favicon.
Store: Definiciones de Vuex para stores centrales de la aplicación.

¿Cuáles son los archivos esenciales en un proyecto de Nact JS?

Nax.config.js: Sustituye a Webpack para toda la configuración del proyecto.
Package.json: Información del proyecto, scripts como nux, nux build, etc.

Inicio de un servidor y desarrollo con Nact JS

Para desarrollar y levantar el servidor de una aplicación creada con Nact, simplemente ejecuta:

npm run dev

Este comando ejecuta un servidor local, típicamente en localhost:3000, y monitorea cambios en el código durante el desarrollo.

¿Cómo se gestionan las rutas y componentes en Nact JS?

Las rutas se generan automáticamente basándose en la estructura de archivos dentro del directorio pages. Los nombres de los archivos en este directorio corresponderán a las rutas de URL, facilitando el enrutamiento automático con VueRouter integrado.

¿Cómo personalizo mi aplicación con Nact JS?

Nax.config.js: Personaliza configuraciones como metadata del HTML, el color de la barra de carga, scripts adicionales, entre otros.
Layouts y Components: Implementa tus propios diseños y componentes reutilizables.

Nact JS ofrece una experiencia robusta para aquellos familiarizados con Vue que necesitan capacidades de SSR, manteniendo una flexibilidad alta y un enfoque sencillo para el desarrollo de aplicaciones modernas. Con esta base, los desarrolladores pueden profundizar en sus necesidades y aprovechar todo el potencial que ofrece el framework.

jonathan sanchez

student•

actualmente la version de Nuxt.js es la 2.11.x y el comando de instalacion es.

npx create-nuxt-app <project-name>```

Eduardo Reyes

student•

Gracias por el aporte :D

Miguel Angel Reyes Moreno

student•

Marzo 2022: La versión más reciente de 2.15.8 (y la versión 3 está en beta).

Jesús Miguel Quinto Teran

student•

Si alguno acá necesita cambiar el host y el port donde esta escuchando el proyecto, lo pueden hacer muy fácilmente desde su package.json

Ejemplo:

"dev": "nuxt --hostname 172.17.0.2 --port 82",

Jose Daniel Atencio Manzanillo

student•

me da este error al ejecutar npm run dev con nuxt intento instalar el nuxt/webpack pero sigue el error

 FATAL  Module @nuxt/webpack not found.

 Please install missing dependency:

 Using npm:  npm i @nuxt/webpack

 Using yarn: yarn add @nuxt/webpack


   ╭─────────────────────────────────────╮
   │                                     │
   │   ✖ Nuxt Fatal Error                │
   │                                     │
   │   Module @nuxt/webpack not found.   │
   │                                     │
   │                                     │
   │                                     │
   ╰─────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuenuxt@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuenuxt@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\codework\AppData\Roaming\npm-cache\_logs\2019-03-05T13_59_44_706Z-debug.log

Alvaro Julian Acosta Rivera

student•

Probaste usando

npm i @nuxt/webpack

Jose Daniel Atencio Manzanillo

student•

si claro lo utilice y no hace nada me sigue dando el mismo error el node y lo reinstale y nada es extraño.

Carlos Eduardo Gomez García

teacher•

Uhhh:0 Me gustó Nuxt xD en la versión actual te hacen más preguntas, me encanta que Vue DevTools detecta Nuxt, aunque aún me raya el hecho de tener que cambiar el modo de trabajo con Vue a como lo veniamos haciendo.

¿Pero prácticamente Nuxt es como un Laravel no? Donde ya te da la estructura de carpetas y así

Axel Vasquez

student•

no puedo usar pug, marca error al intentar usar lang=“pug”

Seba Cardoso

student•

npm install pug pug-plain-loader --save-dev

Paolo Joaquin Pinto Perez

student•

Esta fue mi configuracion para la creación del proyecto en Nuxt:

Juan Valentin Perdomo Bonilla

student•

a fecha de hoy es una ofensa ver esto, este curso necesita una actualizacion, me duele el bolsillo haber pagado Platzi, Nuxt es de las mejores cosas que hay para Vue, aca solo dicen que Nuxt es dificil, cuando hace mucho mas facil manejar Vuejs

Irving Acosta Hernández

student•

Si alguien más tuvo el siguiente error:

Module build failed (from ./node_modules/eslint-loader/index.js)

Lo arreglé añadiendo en el nuxt.config.js lo siguiente:

extend (config, { isDev }) {
  if (isDev && process.client) {
	config.module.rules.push({
	  enforce: 'pre',
	  test: /\.(js|vue)$/,
	  loader: 'eslint-loader',
	  exclude: /(node_modules)/
	})
  }
}

Darwin Rodríguez

student•

Tengo el siguiente error:

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:3000
    at Object._errnoException (util.js:1022:11)
    at _exceptionWithHostPort (util.js:1044:20)
    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
    at listenInCluster (net.js:1392:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1501:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:97:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzi-music-nuxt@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platzi-music-nuxt@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Darwi\AppData\Roaming\npm-cache\_logs\2018-04-08T13_29_37_552Z-debug.log

Darwin Rodríguez

student•

Resuelto! Si les sale este error en caso de que usen Windows debe de cerrar todos los procesos en segundo plano de node.

Julio Yacot

student•

También este error puede generarse porque el puerto 3000 esté en uso por otra aplicación o instancia de Nodejs

Alejandro Villegas Carvajal

student•

si iniciamos una app con Nuxt.js puedo iniciarla en un bucket de s3? o debo tener node?

Diego Forero

Team Platzi•

Siempre es necesario tener node para poder compilar los archivos, s3 solo te sirve para almacenar archivos finales, pero no para compilar, puedes compilar y subir tus archivos compilados a s3 y usar esos.

Jesús Rafalel Calderin Antón

student•

Estando dentro de la carpeta del proyecto, para abrir el editor de código: Visual Studio Code: code . Atom: aton .

Carlos Villarroel

student•

De que depende las versiones de vuetify que se instala cuando creo mi proyecto,

yarn create-nuxt-app <project-name>

Como especifico la version de vue y vuetify que deseo instalar?

Darwin Rodríguez

student•

Si es necesario usar node del lado del servidor entonces, nuxt sería alternativa para trabajar con php?

Diego Forero

Team Platzi•

No, php es un lenguaje, en este caso el lenguaje seria JavaScript, nuxt es una librería o framework que tiene incluido el server side render.

Darwin Rodríguez

student•

Gracias, que alternativa podría aplicar a php o simplemente trabajo con Vue de forma normal, integrandolo y ya?

Enzo Aliatis

student•

Nuxt reemplazaría a express? o se pueden integrar después, o ya no necesitaríamos express de lado del servidor con Nuxt?
Con Nuxt ya no estaríamos haciendo solo la vistas sino tambien un lado del servidor?
Express puede hacer lo mismo que Nuxt? son equivalentes? se complementan? no tiene nada que ver el uno con lo otro?

Nacho Anaya

teacher•

Nuxt puede o no reemplazar express (en realidad Nuxt usa express internamente). Eso depende de que tipo de app quieras hacer, si queres una app monolitica (servidor + cliente) o una app cliente (con SSR pero sin logica en el server).

Jose L. Figueroa

student•

Suena excelente!! Veamos qué más viene!!