¿Cómo crear y desplegar una aplicación Nuxt?

How to build and deploy a Nuxt application_
How to build and deploy a Nuxt application_

Nuxt.js es un framework de código abierto creado sobre Vue.js, Nitro y Vite, que permite desarrollar aplicaciones web.

Inspirado en Next.js (un framework de React para el renderizado del lado del servidor), Nuxt.js permite a los desarrolladores crear aplicaciones web rápidas aplicando diferentes modos de renderizado.

Lanzado en 2016, Nuxt.js ha ganado una gran aceptación entre los desarrolladores debido a su filosofía de fácil uso para desarrolladores y sus ricas características.

Ventajas de Nuxt.js

Nuxt.js ofrece varias ventajas que lo convierten en una opción convincente para el desarrollo de Vue.js:

Renderizado universal

Nuxt.js controla cómo se muestra tu aplicación web para el usuario. Comienza renderizando la página inicial en el servidor, lo que hace que la carga sea muy rápida, especialmente para personas con conexiones a Internet lentas.

Esto ayuda a los motores de búsqueda a rastrear su sitio web más rápidamente, lo que conduce a una mejor SEO.

Nuxt.js cambia entonces suavemente a un renderizado del lado del cliente (SPA) para navegar entre páginas dentro de tu aplicación. De este modo, la navegación es rápida y receptiva, como cabe esperar de un sitio web moderno.

Rendimiento optimizado mediante hidratación y división del código

Nuxt 3 permite la hidratación selectiva, lo que significa que los segmentos del estado de la aplicación se hidratan en el lado del cliente para una carga más rápida de la primera página y una experiencia de usuario mejorada, lo que resulta muy útil para una aplicación con un árbol de estado enorme y muchas partes.

De forma similar a Next.js, Nuxt divide los archivos automáticamente en paquetes más pequeños en función de las rutas.

De este modo, el navegador sólo necesita del servidor el código relacionado con la vista actual, lo que reduce significativamente el tiempo de carga de la página por parte del usuario.

Esto significa que se utilizan menos recursos de ancho de banda y se mejora la experiencia del usuario.

Enrutamiento integrado

Nuxt.js, por defecto, gestiona las rutas a través de enrutamiento basado en archivos, simplificando la navegación y la gestión de rutas dentro de tu aplicación.

También le permite optar por configurar sus rutas de forma dinámica para escenarios de enrutamiento más complejos.

Rutas API

Nuxt.js te permite saltarte la configuración de un servidor independiente para tareas sencillas. Tiene accesos directos integrados llamados rutas API.

Las rutas API pueden gestionar la obtención de datos durante la renderización del lado del servidor y son compatibles con las API RESTful y GraphQL. Esto agiliza la aplicación y ayuda a los motores de búsqueda a comprender mejor su contenido.

Limitaciones de Nuxt.js

Aunque Nuxt.js ofrece una potente experiencia de desarrollo, hay que tener en cuenta algunas limitaciones:

Curva de aprendizaje

Nuxt.js introduce conceptos que difieren del desarrollo tradicional con Vue.js. Ser nuevo en Nuxt.js requiere tiempo para adaptarse a su arquitectura y características específicas.

Nuxt también ofrece un vasto ecosistema de herramientas, bibliotecas y plugins. Familiarizarse con estas opciones puede aumentar la curva de aprendizaje inicial.

Ecosistema limitado

A diferencia de otros grandes frameworks como React y Angular, Nuxt es relativamente joven. Como resultado, su ecosistema de bibliotecas y plugins de terceros sigue creciendo.

Tendrá que crear soluciones a medida para cumplir determinados requisitos en situaciones específicas.

Complejidad en el renderizado del lado del servidor

Aunque la renderización del lado del servidor (SSR) es una potente función de Nuxt.js, puede hacer más complejo el desarrollo de aplicaciones. En comparación con otros métodos de renderizado más sencillos, SSR tiene una curva de aprendizaje más pronunciada.

Además, la aplicación eficaz de SSR requiere una planificación y gestión cuidadosas de la obtención de datos y del estado de la aplicación.

Esto puede dar lugar a posibles errores o incoherencias entre el contenido renderizado inicialmente en el servidor y la versión final e interactiva renderizada en el cliente.

Creación e implementación de una aplicación Nuxt.js en Back4app

Vamos a construir una aplicación de gestión de contactos para entender mejor cómo construir y desplegar una aplicación Nuxt con Back4App.

Esta aplicación permitirá a los usuarios crear, ver y eliminar su información de contacto, manteniendo su agenda de contactos de red organizada y fácilmente accesible.

Para el backend de este proyecto, utilizaremos la base de datos PostgreSQL incorporada en Back4app para almacenar información de contacto como nombre, correo electrónico, números de teléfono y empresa.

Este proceso será más fácil con la ayuda del Agente AI de Back4App.

Para el front-end del proyecto, utilizaremos Nuxt.js para crear la interfaz de usuario de la aplicación. A continuación, conectaremos el front-end y el back-end utilizando Parse SDK antes de desplegar el front-end Nuxt con Back4App Containers.

Empecemos.

Creación del backend para tu aplicación Nuxt.js

El primer paso para crear una aplicación Nuxt es preparar el backend.

Para comenzar a crear el back end de tu aplicación de Contactos, navega al sitio web de Back4App, inicia sesión y crea una nueva aplicación haciendo clic en “Build New App“.

Panel de aplicaciones Back4app

Seleccione la opción “Backend as a Service“, que verá después de crear una nueva aplicación, como se muestra en la imagen siguiente.

Back4app Baas y CaaS

Dale un nombre a tu aplicación y selecciona la opción PostgreSQL, que utilizaremos para la base de datos.

B4A DBs

Después de hacer clic en el botón “CREAR“, Back4app tomará un poco de tiempo para configurar su aplicación, incluyendo la base de datos.

Una vez que todo esté listo, se le dirigirá automáticamente a su aplicación, como se muestra en la imagen siguiente.

Navegador Back4app.

Para estructurar el diseño de la base de datos PostgreSQL que utilizará para la aplicación, navegue al Agente AI de Back4app y escriba el siguiente prompt.

Create database tables in my Back4app app; do you need me to provide any information?
Agente de IA de Back4app

Para configurar su base de datos, el Agente AI generará una lista de cosas que necesita. Esta lista incluirá detalles como las claves únicas para su aplicación y cómo se estructuran sus datos (el esquema).

Después de darle al Agente AI las claves de su aplicación, indíquele cómo debe ser el esquema de su base de datos. Debe ser similar al siguiente para la aplicación de contactos que estamos construyendo:

1. Contact Class:
Class Name: Contact

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)

Después de pasar la información anterior al agente, puede confirmar navegando por la base de datos para ver si se han creado la clase de contacto y los campos relacionados.

Navegador Back4app

A continuación, solicite al agente de IA que rellene su base de datos con datos de prueba utilizando la siguiente solicitud.

Populate my contact database with some test data with around 10 test contacts with variations in their information.
Registros de Back4app

Ahora tiene datos de prueba con los que trabajar.

Base de datos Back4app poblada

Creación de código en la nube

La función Cloud Code de Back4App le permite ejecutar código JavaScript personalizado directamente en los servidores de Back4App.

Esta característica le ayuda a reducir la carga de procesamiento en su aplicación móvil o sitio web. También ayuda a proteger tus datos y tu aplicación frente a vulnerabilidades de seguridad, ya que el código en la nube se ejecuta en los servidores seguros de Back4App.

Ahora que ya tienes una base de datos de prueba repleta de contactos, es hora de implementar funciones para tu sistema de gestión de contactos.

En esta sección, aprenderás a crear código en la nube para implementar ciertas características para tu aplicación, tales como:

  • Ver todos los contactos
  • Crear nuevos contactos
  • Borrar contactos

Usted implementará estas características con el Agente AI de Back4App. Vamos a empezar.

Para obtener todos los libros de la biblioteca, proporcione al agente Back4App AI el siguiente mensaje para generar el código de nube necesario.

Develop a cloud code function named "getContacts" to retrieve all contacts 
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.
Agente de IA de Back4app

A continuación, también encargará al Agente Back4App AI la creación de nuevos contactos pasando el siguiente prompt:

Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.
Agente de IA de Back4app

Por último, también proporcionará al Agente AI de Back4App la siguiente solicitud para crear una función para eliminar contactos de la base de datos.

Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.
Agente de IA de Back4app

Para comprobar si el Agente ha generado correctamente sus funciones en la nube, revise el archivo main.js situado al final de esta ruta de navegación.

Back4app dashboard → Código en la nube → Funciones y alojamiento web → nube → main.js.

Código Back4app Cloud

Deberías ver las tres funciones que has definido en el mismo archivo main.js para asegurarte de que tus funciones en la nube se han creado correctamente.

Construir el front-end de su aplicación

Vamos a crear un front-end para interactuar con todas las funciones de código en la nube que hemos creado. Vamos a crear el front-end con Nuxt.js.

Para empezar con el desarrollo del front-end, ejecute el siguiente código en serie en el terminal de su directorio preferido:

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

Estas líneas de código inicializarán una aplicación Nuxt con b4a_nuxt_app como nombre, y a continuación se instalarán todos los paquetes y dependencias necesarios para que tu aplicación funcione correctamente.

Después de ejecutar los comandos anteriores en tu terminal, instala algunos paquetes npm para ayudar a dar estilo a tu aplicación. Ejecuta los siguientes comandos npm en serie en tu terminal para instalar estos paquetes:

npm install sass
npm install -D tailwindcss postcss autoprefixer

Las líneas de código anteriores instalarán SASS, un preprocesador CSS, y TailwindCSS, un framework CSS de utilidad. Utilizarás estos paquetes para dar estilo a tu aplicación rápidamente.

A continuación, configure TailwindCSS en su aplicación ejecutando el siguiente comando:

npx tailwindcss init

El código anterior crea un archivo tailwind.config.js en el directorio raíz de tu aplicación Nuxt.

Este archivo tailwind.config.js es el punto central de configuración para tu integración de Tailwind CSS dentro de Nuxt.js. Te permite personalizar varios aspectos de Tailwind CSS para adaptarlo a los requisitos específicos de tu proyecto.

Abra su aplicación en su editor de texto preferido (VSCode, Eclipse, Sublime Text). Navega hasta el archivo tailwind.config.js y estructúralo para que tenga el aspecto del bloque de código siguiente:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

La matriz de contenido del bloque de código anterior contiene las rutas de los archivos que Tailwind CSS supervisará para generar sus clases de utilidad.

A continuación, crea una carpeta assets en el directorio raíz de tu aplicación. En la carpeta, crea un archivo main. scss para añadir estilos a tu aplicación. Pega el siguiente código en el archivo main.sc ss:

/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f2f2f2;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

El bloque de código anterior importa dos Google Fonts diferentes, integra CSS de Tailwind para estilizar elementos, establece un color de fondo gris claro para tu aplicación web y define clases personalizadas para aplicar de forma eficiente las fuentes importadas.

Este archivo main.scss proporciona una base sólida para construir el estilo visual de su aplicación web.

En su archivo nuxt.config.ts, que alberga las configuraciones para su aplicación Nuxt, pegue el siguiente código:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
});

En su archivo de configuración de Nuxt, definió el archivo main.scss como el único archivo CSS que utilizará su aplicación Nuxt. También has desactivado la renderización del lado del servidor para tu aplicación Nuxt.

Dado que Nuxt maneja el enrutamiento automáticamente a través del sistema de enrutamiento basado en archivos y hemos terminado de configurar la aplicación, podemos dirigirnos a la creación de diferentes páginas web.

Para construir la interfaz de usuario de esta aplicación, crearemos tres páginas dentro de una carpeta pages en la raíz del proyecto. Estas páginas serán:

  • index.vue: Esta es la página de inicio, introduciendo el propósito de la aplicación.
  • contactForm.vue: Esta página permite a los usuarios crear y guardar nuevos contactos en la base de datos.
  • contactsList.vue: Esta página enumera todos los contactos almacenados en la base de datos.

Ahora, en tu archivo index.vue, pega el siguiente código:

// index.vue
<template>
  <div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
    <h1 class="text-4xl">Welcome to {{ appName }}!</h1>
    <p class="text-[#888888] font-md text-md w-1/2">
      This application helps you manage your contacts. You can view existing
      contacts, add new ones, and keep your contact information organized.
    </p>
    <NuxtLink to="/contactForm">
      <button
        class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
      >
        Add Contact
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
const appName = "Contact Book";
</script>

<style scoped>
.welcome {
  text-align: center;
  padding: 2rem;
}
</style>

Este bloque de código crea la página de bienvenida de tu aplicación de gestión de contactos.

Muestra un título, una descripción del propósito de la aplicación y un botón para navegar a la página del formulario de contacto. El bloque de código también define clases TailWind para dar estilo a la aplicación.

Además, en su archivo contactForm.vue, pegue el siguiente código:

<template>
  <div>
    <p class="montserrat text-2xl font-medium text-center">
      Fill the form below to create a contact
    </p>
    <form
      @submit.prevent="createContact"
      class="flex flex-col gap-8 items-center mt-10"
    >
      <input
        v-model="contact.name"
        type="text"
        placeholder="Name"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.email"
        type="email"
        placeholder="Email"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.phone"
        type="tel"
        placeholder="Phone"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.address"
        type="text"
        placeholder="Address"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.company"
        type="text"
        placeholder="Company"
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <div>
        <button
          class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          type="submit"
        >
          Submit
        </button>
      </div>
      <p v-if="message" :class="{ error: isError }">{{ message }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const contact = ref({
  name: "",
  email: "",
  phone: "",
  address: "",
  company: "",
});
const message = ref("");
const isError = ref(false);

</script>

<style>
.error {
  color: red;
}
</style>

El bloque de código anterior define la estructura de un formulario que los usuarios de la aplicación pueden utilizar para crear y almacenar contactos. Estos son los puntos clave:

Un elemento de formulario captura los datos de contacto (nombre, correo electrónico, teléfono, dirección, empresa) mediante varios campos de entrada.

Cada campo de entrada está vinculado a una propiedad del objeto de contacto(v-model) y utiliza tipos de entrada adecuados para la validación.

Un botón de envío activará la función createContact, que implementaremos en la siguiente sección. Un área de mensajes también mostrará información (éxito o error) basada en las variables message e isError.

El bloque de código utiliza ref de Vue para crear 3 variables reactivas:

  • contacto: Almacena la información de contacto introducida.
  • mensaje: Contiene mensajes de retroalimentación para el usuario.
  • isError: Indica si el mensaje representa un error.

Una simple regla de estilo define la apariencia de los mensajes de error utilizando la clase .error en el bloque de código.

Además, en su archivo contactsList.vue, pegue el siguiente código:

<template>
  <div class="px-8">
    <p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
    <div class="grid grid-cols-3 gap-5 items-center justify-center">
      <div
        v-for="contact in contacts"
        :key="contact.objectId"
        class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg 
				        flex flex-col gap-3 p-3 w-11/12 items-center"
      >
        <p class="text-lg">Name: {{ contact.name }}</p>
        <p class="text-lg">Email: {{ contact.email }}</p>
        <p class="text-lg">Phone: {{ contact.phone }}</p>
        <p class="text-lg">Address: {{ contact.address }}</p>
        <p class="text-lg">Company: {{ contact.company }}</p>
        <div class="mt-5">
          <button
            @click="deleteContact(contact.objectId)"
            class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const contacts = ref([]);
</script>

El bloque de código anterior muestra una lista de contactos en tu aplicación. Aquí están los puntos clave:

El bloque de código crea una sección titulada “Tus contactos” y utiliza un diseño de cuadrícula adaptable (3 columnas) para mostrar los contactos.

Recorre una matriz de contactos utilizando v-for y presenta la información de cada contacto (nombre, correo electrónico, teléfono, dirección, empresa).

Cada entrada de contacto tiene un botón “Eliminar” que activará la función deleteContact, que implementaremos más adelante.

El bloque de código utiliza una matriz reactiva(contactos) para almacenar la lista de contactos. Esto asegura que la interfaz de usuario se actualiza dinámicamente a medida que cambian los datos. La matriz de contactos almacenará los datos obtenidos de la base de datos de Back4app.

Pega el siguiente código en tu archivo app.vue en el directorio raíz para incluir rutas a todas estas páginas.

<template>
  <div>
    <NuxtLayout>
      <header class="flex justify-between p-8 roboto font-light">
        <NuxtLink to="/">
          <p class="text-2xl">Contact Book</p>
        </NuxtLink>

        <nav class="flex gap-5 text-md">
          <NuxtLink to="/contactsList" class="hover:text-[#888888]"
            >Contacts</NuxtLink
          >
          <NuxtLink to="/contactForm" class="hover:text-[#888888]"
            >Add Contact</NuxtLink
          >
        </nav>
      </header>
      <main>
        <NuxtPage />
      </main>
    </NuxtLayout>
  </div>
</template>

El bloque de código define el diseño general de la aplicación Nuxt con el componente componente.

El bloque de código presenta un menú de navegación horizontal con enlaces a las páginas contactsList.vue y contactForm.vue.

El bloque de código también incluye el componente un componente clave de Nuxt.js que muestra dinámicamente el contenido de la página actual.

Esto garantiza que su aplicación muestre el contenido adecuado en función de la navegación del usuario dentro de la aplicación.

Conexión de los componentes front-end y back-end de la aplicación

Para conectar tu aplicación de contactos Nuxt a tu base de datos Back4app y a tu instancia backend, necesitarás instalar el SDK Parse.

El SDK Parse sirve de puente entre su aplicación front-end (interfaz de usuario) y su backend Back4App, permitiéndole interactuar con las bases de datos y las funciones cloud de Back4App.

Para instalar Parse SDK, ejecute el siguiente comando en el terminal de su directorio raíz:

npm install parse

Después de la instalación, necesitas inicializar Parse obteniendo la siguiente información:

  • Identificación de la solicitud
  • Clave JavaScript
  • URL del servidor Back4app

Usted puede obtener esta información navegando a Seguridad y Claves en el tablero de su aplicación Back4app. Mantenga su App ID y JavaScript Key de forma segura en su aplicación.

Ahora, modifica tu archivo app.vue para inicializar Parse en tu aplicación:

<template>
<!--   Previous Content -->
</template>

<script setup>
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>

Además, modifica tus archivos contactForm.vue y contactsList.vue para conectar tus funciones de código en la nube con el front-end de tu aplicación.

En tu página contactForm.vue, pega el siguiente código:

<template>
<!--   Previous Content -->
</template>

<script setup>
import { ref } from 'vue';
import Parse from 'parse';

const contact = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  company: '',
});
const message = ref('');
const isError = ref(false);

const createContact = async () => {
  try {
    await Parse.Cloud.run('createContact', { ...contact.value });
    message.value = 'Contact created successfully!';
    isError.value = false;
    
    contact.value = { name: '', email: '', phone: '', address: '', company: '' };
  } catch (error) {
    message.value = `Error: ${error.message}`;
    isError.value = true;
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

El bloque de código anterior conecta su función de código de nube para la lógica detrás de la creación de un nuevo contacto a su aplicación Nuxt.

Interactúa con el backend para almacenar la información de contacto y proporciona información al usuario en función del éxito o fracaso de la operación.

El bloque de código intenta (con un bloque try-catch) ejecutar una función llamada createContact en el servidor Back4App usando el Parse SDK(await Parse.Cloud.run('createContact', {...contact.value})). Esto envía la información del contacto(contact.value) al servidor Back4App para su almacenamiento.

Si el almacenamiento se realiza correctamente, aparece el mensaje “¡Contacto creado correctamente!” y el formulario se borra, restableciendo el objeto de contacto y permitiendo nuevas entradas.

Sin embargo, si se produce un error, se muestra un mensaje de error informativo, que incluye detalles del servidor con literales de plantilla(${error.message}).

Pega el siguiente código en tu archivo contactsList.vue:

<template>
  <!--   Previous Content -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";

const contacts = ref([]);

const fetchContacts = async () => {
  try {
    contacts.value = await Parse.Cloud.run("getContacts");
  } catch (error) {
    console.error("Failed to fetch contacts", error);
  }
};

const deleteContact = async (objectId) => {
  try {
    await Parse.Cloud.run("deleteContact", { objectId });
    contacts.value = contacts.value.filter(
      (contact) => contact.objectId !== objectId,
    );
  } catch (error) {
    console.error("Failed to delete contact", error);
  }
};

onMounted(fetchContacts);
</script>

El código anterior gestiona la obtención y eliminación de contactos para su aplicación. Interactúa con el Back4App Backend para manejar el almacenamiento y recuperación de datos.

El bloque de código define dos funciones esenciales:

  • fetchContacts: Esta función asíncrona recupera la lista de contactos del backend. Utiliza Parse.Cloud.run('getContacts'), llamando a la función de código de la nube “getContacts” en su servidor Back4App. Los contactos recuperados se almacenan en un array reactivo llamado contacts.
  • eliminarContacto: Esta función asíncrona se encarga de eliminar un contacto específico. Toma un objectId como argumento, un identificador único para el contacto dentro de la base de datos backend. La función utiliza Parse.Cloud.run('deleteContact', { objectId }) para llamar a la función de código de la nube llamada “deleteContact”, pasando el objectId a borrar. Cuando se realiza correctamente, el código filtra la matriz de contactos locales para eliminar los contactos eliminados.

Ahora que has terminado de conectar el front y el back end de la aplicación, puedes previsualizar la aplicación ejecutando el siguiente comando npm.

npm run dev

Verá que se carga el servidor Nuxt Nitro. Una vez cargada, la aplicación debería estar disponible en la URL http://localhost:3000/. Debería ver una pantalla similar a la imagen siguiente cuando navegue a la URL.

Aplicación de agenda de contactos

Navegando a la Página de Contactos, debería ver un conjunto de contactos. Estos contactos son los datos ficticios que el Agente AI de Back4app creó para usted durante la creación del backend de Back4app.

Aplicación de agenda de contactos

Al hacer clic en el enlace Añadir contacto, debería ver un formulario para introducir los datos del nuevo contacto. Por ejemplo

Solicitud de contacto

Al pulsar el botón “Enviar”, los campos aparecerán claramente. Navegando a la página de Contactos, verá el contacto recién creado.

Solicitud de contacto

Despliegue de la aplicación web completa

A continuación se muestran los pasos para desplegar una aplicación Nuxt. Ahora que ha terminado de construir y probar la aplicación, puede desplegar la aplicación Nuxt utilizando contenedores Back4app para hacer pública su aplicación.

Para acelerar el proceso de despliegue, solicite al Agente AI de Back4app las siguientes instrucciones:

Give me simplified steps to deploy my Nuxt application with Back4app containers
Agente AI

Debería ver pasos similares a los que se indican a continuación.

Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container

Para dockerizar tu aplicación, crea un archivo Dockerfile y un archivo .dockerignore en el directorio raíz y pega los siguientes scripts a continuación.

En el Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]

Además, en el archivo .dockerignore:

node_modules
.nuxt

Un Dockerfile contiene instrucciones para crear una imagen Docker. El archivo Dockerfile incluye pasos de instalación para las dependencias necesarias de la aplicación.

El archivo .dockerignore es un simple archivo de texto que enumera patrones para indicar a Docker qué archivos y carpetas debe excluir al construir la imagen.

Ahora, para construir la imagen docker de tu aplicación, ejecuta el siguiente comando docker en tu terminal:

docker build -t b4a_contacts_app .

Asegúrese de empujar su aplicación a su cuenta de GitHub antes de intentar desplegar la aplicación en Back4app. Una vez que empuje la aplicación, integre su cuenta de GitHub con Back4app.

Puedes hacerlo con la aplicación Back4app Github. Después de integrar tu GitHub con Back4app, ya puedes desplegar tu aplicación.

Navegue a la página de Contenedores desde su panel de Back4app.

Back4app Backend y Selección de Contenedores

A continuación, haz clic en el botón “Crear nueva aplicación” de la pantalla. Entonces seleccionarás el repositorio que quieres desplegar, le darás el nombre b4a_contacts_app, y crearás la aplicación. Tardará algún tiempo en terminar de desplegarse.

Registros de Contenedores Back4app

Una vez desplegada, tu aplicación debería estar disponible en esta URL: https://b4acontactsapp1-5990olnw.b4a.run/.

Libro de contactos desplegado

Conclusión

En este artículo, aprendiste cómo construir y desplegar una aplicación Nuxt.js con una base de datos PostgreSQL, todo dentro del ecosistema Back4app.

También has aprendido las ventajas y desventajas de crear aplicaciones web con Nuxt.js.

Desde la creación de las funciones de código en la nube y el diseño de la base de datos con el agente de IA de Back4App hasta la comprensión de la interfaz de bajo código y fácil de usar del backend de Back4App.

También implementó la aplicación Nuxt con Back4App Containers y se familiarizó con la variedad de herramientas que Back4App ofrece para agilizar el desarrollo de aplicaciones.

Con esta combinación de herramientas, estará bien encaminado para crear e implantar rápidamente aplicaciones web.

Puede obtener más información sobre cómo funciona el Agente AI para familiarizarse con la agilización del desarrollo de su aplicación.


Noble Okafor

Leave a reply

Your email address will not be published.