Quickstarters
How to Build a Blitz.js Frontend and Connect It to a Backend?

22min
En esta guía, construirás una aplicación de lista de tareas utilizando Blitz.js y la conectarás a un backend gestionado en Back4app.
Este tutorial paso a paso está diseñado para ayudarte a implementar operaciones CRUD esenciales y crear una interfaz de usuario dinámica utilizando Blitz.js.
Construir una aplicación de pila completa puede ser complejo si debes gestionar tanto los sistemas frontend como backend.
Al aprovechar Back4app, puedes simplificar la gestión del backend a través de un BaaS escalable, lo que te permite concentrarte en construir una interfaz atractiva de Blitz.js.
Back4app proporciona un conjunto de servicios de backend, incluyendo una base de datos NoSQL lista para usar, autenticación, funciones en la nube y puntos finales de API.
Estas características te permiten desarrollar y desplegar tu aplicación rápidamente sin la carga del mantenimiento del servidor.
Conclusiones clave
Al final de este tutorial, podrás:
Configurar un proyecto moderno de Blitz.js utilizando herramientas estándar de la industria.
Integrar un backend de Back4app con tu aplicación de Blitz.js utilizando el SDK de Parse.
Implementar operaciones CRUD para gestionar tu Lista de Tareas.
Contenerizar y desplegar tu aplicación de Blitz.js utilizando el Despliegue Web de Back4app.
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
Node.js y npm instalados en tu máquina. Verifica la instalación con node -v y npm -v en tu terminal.
Conocimientos básicos de Blitz.js, incluyendo enrutamiento, consultas y mutaciones. Familiaridad con React es beneficiosa ya que Blitz.js se basa en ello.
Una cuenta de Back4app para configurar y gestionar tus servicios de backend. Regístrate en Back4app si aún no lo has hecho.
Con estos requisitos previos cumplidos, estás listo para inicializar tu proyecto Blitz.js e integrarlo con un backend robusto.
Configuración del Proyecto
Comienza configurando tu aplicación Blitz.js. Blitz.js proporciona una experiencia de desarrollo simplificada al combinar el poder de Next.js con un marco de trabajo de pila completa.
Ejecuta el siguiente comando para crear un nuevo proyecto Blitz.js. Reemplaza todo-app con el nombre de proyecto que elijas:
Bash
npx blitz new todo-app
npx blitz new todo-app
﻿
Navega a tu directorio de proyecto:
Bash
cd todo-app
cd todo-app
﻿
Ejecuta tu servidor de desarrollo para verificar que todo esté configurado correctamente:
Bash
npm run dev
npm run dev
﻿
Visita la URL mostrada en tu terminal para confirmar que tu aplicación Blitz.js está en funcionamiento.
Configurando el Backend de Todo en Back4app
Back4app ofrece un backend Parse gestionado que simplifica la gestión de datos para tu aplicación. En esta sección, crearás un modelo de datos para almacenar tareas para tu lista de tareas.
Creando tu Aplicación Backend
Inicia sesión en tu panel de Back4app y haz clic en "Crear una Nueva Aplicación."
Proporciona un nombre para tu aplicación (por ejemplo, TodoBlitzApp) y selecciona NodeJS/Parse como el tipo de backend.
En la "Base de Datos" > "Navegador" sección, haz clic en "Crear una Clase" y selecciona "Personalizada." Nombra la clase Tarea y establece los permisos de nivel de clase para permitir lectura y escritura pública (puedes ajustar estos ajustes más tarde).
Agrega los siguientes campos a la Tarea clase:
título (String) – El título de la tarea.
descripción (String) – Detalles sobre la tarea.
completado (Boolean) – Si la tarea está terminada.
fechaDeVencimiento (Fecha) – La fecha límite para la tarea.
Haz clic en "Guardar" para crear el esquema.
Página de creación de clase de Back4app
﻿
Integrando Back4app con Blitz.js
Para conectar tu aplicación Blitz.js a Back4app, instala el SDK de JavaScript de Parse:
Bash
npm install parse
npm install parse
﻿
A continuación, configura el SDK de Parse en tu proyecto Blitz.js. Crea un nuevo archivo de configuración (por ejemplo, src/parseClient.js) e inicializa Parse como se muestra a continuación. Reemplaza los marcadores de posición con tus credenciales de Back4app de Configuración de la aplicación > Seguridad y claves:
JS
// src/parseClient.js
import Parse from "parse/dist/parse.min.js";
 
const PARSE_APP_ID = "your-application-id";
const PARSE_JS_KEY = "your-javascript-key";
const PARSE_SERVER_URL = "https://parseapi.back4app.com/";
 
Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
Parse.serverURL = PARSE_SERVER_URL;
 
export default Parse;
// src/parseClient.js
import Parse from "parse/dist/parse.min.js";
 
const PARSE_APP_ID = "your-application-id";
const PARSE_JS_KEY = "your-javascript-key";
const PARSE_SERVER_URL = "https://parseapi.back4app.com/";
 
Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
Parse.serverURL = PARSE_SERVER_URL;
 
export default Parse;
﻿
Ahora puedes importar esta configuración en tus consultas y mutaciones de Blitz.js para interactuar con tu backend.
Construyendo el Frontend con Blitz.js
Con el backend configurado, es hora de construir la interfaz de la lista de tareas en Blitz.js. Utilizarás las consultas y mutaciones integradas de Blitz.js para realizar operaciones CRUD.
Estructurando tus Páginas y Llamadas a la API
En Blitz.js, las páginas se encuentran en el src/pages directorio. Abre src/pages/index.tsx y agrega el siguiente código para configurar la página, consultar tareas desde Back4app y definir mutaciones para agregar, alternar y eliminar tareas:
TypeScript
// src/pages/index.tsx
import Layout from "src/core/layouts/Layout"
import { BlitzPage } from "@blitzjs/next"
import { useQuery } from "@tanstack/react-query"
import Parse from "../parseClient"
import { useState } from "react"

const fetchTasks = async () => {
  const Task = Parse.Object.extend("Task")
  const query = new Parse.Query(Task)
  const results = await query.find()
  return results.map((task) => ({ id: task.id, ...task.toJSON() }))
}

const addTask = async (title: string, description: string) => {
  const Task = Parse.Object.extend("Task")
  const task = new Task()
  task.set("title", title)
  task.set("description", description)
  task.set("completed", false)
  await task.save()
}

const toggleTask = async (id: string, currentStatus: boolean) => {
  const Task = Parse.Object.extend("Task")
  const query = new Parse.Query(Task)
  const task = await query.get(id)
  task.set("completed", !currentStatus)
  await task.save()
}

const deleteTask = async (id: string) => {
  const Task = Parse.Object.extend("Task")
  const query = new Parse.Query(Task)
  const task = await query.get(id)
  await task.destroy()
}

const Home: BlitzPage = () => {
  const { data: tasks, refetch, isLoading } = useQuery(["tasks"], fetchTasks)
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")

  if (isLoading) return <div>Loading...</div>

  return (
    <Layout title="Home">
      <div className="container">
        <h1>To-Do List</h1>
        <form
          onSubmit={async (e) => {
            e.preventDefault()
            await addTask(title, description)
            setTitle("")
            setDescription("")
            await refetch()
          }}
          className="form"
        >
          <input
            type="text"
            placeholder="Task Title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
          />
          <input
            type="text"
            placeholder="Description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            required
          />
          <button type="submit">Add Task</button>
        </form>
        <div className="tasks">
          {tasks.length === 0 ? (
            <p>No tasks available</p>
          ) : (
            tasks.map((task) => (
              <div key={task.id} className={`task-item ${task.completed ? "completed" : ""}`}>
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <button
                  onClick={async () => {
                    await toggleTask(task.id, task.completed)
                    await refetch()
                  }}
                >
                  {task.completed ? "Undo" : "Complete"}
                </button>
                <button
                  onClick={async () => {
                    await deleteTask(task.id)
                    await refetch()
                  }}
                >
                  Delete
                </button>
              </div>
            ))
          )}
        </div>
      </div>
    </Layout>
  )
}

export default Home

// src/pages/index.tsx
import Layout from "src/core/layouts/Layout"
import { BlitzPage } from "@blitzjs/next"
import { useQuery } from "@tanstack/react-query"
import Parse from "../parseClient"
import { useState } from "react"

const fetchTasks = async () => {
  const Task = Parse.Object.extend("Task")
  const query = new Parse.Query(Task)
  const results = await query.find()
  return results.map((task) => ({ id: task.id, ...task.toJSON() }))
}

const addTask = async (title: string, description: string) => {
  const Task = Parse.Object.extend("Task")
  const task = new Task()
  task.set("title", title)
  task.set("description", description)
  task.set("completed", false)
  await task.save()
}

const toggleTask = async (id: string, currentStatus: boolean) => {
  const Task = Parse.Object.extend("Task")
  const query = new Parse.Query(Task)
  const task = await query.get(id)
  task.set("completed", !currentStatus)
  await task.save()
}

const deleteTask = async (id: string) => {
  const Task = Parse.Object.extend("Task")
  const query = new Parse.Query(Task)
  const task = await query.get(id)
  await task.destroy()
}

const Home: BlitzPage = () => {
  const { data: tasks, refetch, isLoading } = useQuery(["tasks"], fetchTasks)
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")

  if (isLoading) return <div>Loading...</div>

  return (
    <Layout title="Home">
      <div className="container">
        <h1>To-Do List</h1>
        <form
          onSubmit={async (e) => {
            e.preventDefault()
            await addTask(title, description)
            setTitle("")
            setDescription("")
            await refetch()
          }}
          className="form"
        >
          <input
            type="text"
            placeholder="Task Title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
          />
          <input
            type="text"
            placeholder="Description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            required
          />
          <button type="submit">Add Task</button>
        </form>
        <div className="tasks">
          {tasks.length === 0 ? (
            <p>No tasks available</p>
          ) : (
            tasks.map((task) => (
              <div key={task.id} className={`task-item ${task.completed ? "completed" : ""}`}>
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <button
                  onClick={async () => {
                    await toggleTask(task.id, task.completed)
                    await refetch()
                  }}
                >
                  {task.completed ? "Undo" : "Complete"}
                </button>
                <button
                  onClick={async () => {
                    await deleteTask(task.id)
                    await refetch()
                  }}
                >
                  Delete
                </button>
              </div>
            ))
          )}
        </div>
      </div>
    </Layout>
  )
}

export default Home
﻿
Esta página aprovecha los ganchos de consulta de tanstack para obtener tareas y manejar acciones del usuario, asegurando una integración fluida con tu backend de Back4app.
Para asegurar que el useQuery funcione, necesitas envolver toda tu aplicación en un QueryClientProvider. Haces esto en el src/pages/_app.tsx archivo.
Reemplaza el código en el src/pages/_app.tsx archivo con el bloque de código a continuación:
TypeScript
// src/pages/_app.tsx
import { ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps } from "@blitzjs/next"
import React from "react"
import { withBlitz } from "src/blitz-client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
const queryClient = new QueryClient()

function RootErrorFallback({ error }: ErrorFallbackProps) {
  return (
    <ErrorComponent
      statusCode={(error as any)?.statusCode || 400}
      title={error.message || error.name}
    />
  )
}

function MyApp({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page)
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary FallbackComponent={RootErrorFallback}>
        {getLayout(<Component {...pageProps} />)}
      </ErrorBoundary>
    </QueryClientProvider>
  )
}

export default withBlitz(MyApp)

// src/pages/_app.tsx
import { ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps } from "@blitzjs/next"
import React from "react"
import { withBlitz } from "src/blitz-client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
const queryClient = new QueryClient()

function RootErrorFallback({ error }: ErrorFallbackProps) {
  return (
    <ErrorComponent
      statusCode={(error as any)?.statusCode || 400}
      title={error.message || error.name}
    />
  )
}

function MyApp({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page)
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary FallbackComponent={RootErrorFallback}>
        {getLayout(<Component {...pageProps} />)}
      </ErrorBoundary>
    </QueryClientProvider>
  )
}

export default withBlitz(MyApp)
﻿
Añadiendo Estilos Globales
Para definir el estilo básico de tu aplicación, agrega el bloque de código al archivo CSS en src/styles/globals.css.
CSS
/* src/styles/globals.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}
 
.container h1 {
  margin-bottom: 20px;
}
 
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
 
.form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  font-size: 1rem;
}
 
.form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}
 
.form button:hover {
  background-color: #ccc;
}
 
.tasks p {
  font-size: 1rem;
}
 
.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}
 
.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}
 
.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}
 
.task-item p {
  margin: 0;
  font-size: 1rem;
}
 
.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.task-item button:hover {
  background-color: #ccc;
}
 
@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
/* src/styles/globals.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}
 
.container h1 {
  margin-bottom: 20px;
}
 
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
 
.form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  font-size: 1rem;
}
 
.form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}
 
.form button:hover {
  background-color: #ccc;
}
 
.tasks p {
  font-size: 1rem;
}
 
.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}
 
.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}
 
.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}
 
.task-item p {
  margin: 0;
  font-size: 1rem;
}
 
.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.task-item button:hover {
  background-color: #ccc;
}
 
@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
﻿
Importa tus estilos globales agregando la siguiente línea en src/pages/_app.tsx (o tu archivo de componente App personalizado):
TypeScript
/* src/pages/_app.tsx */
import "../styles/globals.css";
/* src/pages/_app.tsx */
import "../styles/globals.css";
﻿
Tu aplicación Blitz.js ahora muestra una interfaz de lista de tareas completamente funcional integrada con Back4app.
Contenerizando y Desplegando Tu Aplicación Blitz.js en Back4app
El Despliegue Web de Back4app proporciona un entorno containerizado que simplifica el proceso de despliegue. Empaquetarás tu aplicación Blitz.js en un contenedor Docker y la desplegarás sin problemas.
Preparando Tu Aplicación Blitz.js para Producción
Primero, construye tu aplicación Blitz.js para producción:
Bash
blitz build
blitz build
﻿
Creando un Dockerfile
Crea un Dockerfile en el directorio raíz de tu proyecto con el siguiente contenido:
Dockerfile
FROM node:18

ARG DATABASE_URL
ARG PORT=3000
ENV DATABASE_URL ${DATABASE_URL}

WORKDIR /usr/src/app

COPY package.json ./
RUN npm install
RUN npm install -g blitz

COPY . .
RUN blitz build

EXPOSE 3000

CMD ["blitz", "start", "-p", "3000"]
FROM node:18

ARG DATABASE_URL
ARG PORT=3000
ENV DATABASE_URL ${DATABASE_URL}

WORKDIR /usr/src/app

COPY package.json ./
RUN npm install
RUN npm install -g blitz

COPY . .
RUN blitz build

EXPOSE 3000

CMD ["blitz", "start", "-p", "3000"]
﻿
Este Dockerfile construye tu proyecto Blitz.js y prepara una imagen de producción utilizando un entorno de ejecución de Node.js ligero. Después de crear tu Dockerfile, crea un .dockerignore archivo y copia y pega tu .gitignore archivo.
Construyendo y probando tu contenedor Docker
Construye la imagen de Docker localmente:
Bash
docker build -t todo-blitz-frontend .
docker build -t todo-blitz-frontend .
﻿
Ejecuta el contenedor para probarlo:
Bash
docker run -p 3000:3000 todo-blitz-frontend
docker run -p 3000:3000 todo-blitz-frontend
﻿
Visita http://localhost:3000 en tu navegador para verificar que tu aplicación Blitz.js está funcionando correctamente.
Desplegando tu aplicación a través de Back4app Web Deployment
Sube tu proyecto a GitHub:
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Luego, inicia sesión en Back4app Web Deployment y sigue estos pasos:
Haz clic en "Crear nueva aplicación" y ingresa los detalles de tu proyecto.
Elige Repositorio de GitHub y autoriza a Back4app.
Selecciona tu todo-blitz repositorio.
Elige Despliegue de Dockerfile y verifica la configuración de la construcción.
Haz clic en "Desplegar" para iniciar el proceso de despliegue.
Una vez desplegado, utiliza el panel de control de Back4app para monitorear registros, gestionar construcciones y configurar dominios personalizados si es necesario.
Pruebas y depuración de tu aplicación
Después del despliegue, asegúrate de que tu aplicación funcione como se espera:
Verificando la conectividad de la API: Utiliza las herramientas de desarrollador de tu navegador para verificar que las solicitudes de API para agregar, alternar y eliminar tareas sean exitosas.
Verificando la persistencia de datos: Agrega tareas a través de la interfaz de usuario y actualiza la página para confirmar que se guardan en la base de datos de Back4app.
Probando operaciones CRUD: Valida que las tareas se puedan alternar y eliminar, e inspecciona los registros de la consola en busca de errores.
Manejando casos extremos: Intenta enviar entradas no válidas para probar la solidez de tus validaciones.
Mejores prácticas y consejos de optimización
Considera las siguientes recomendaciones para una aplicación segura y eficiente:
Optimiza las solicitudes de API: Utiliza procesamiento por lotes y limita los campos consultados para reducir la sobrecarga de red.
Asegura las variables de entorno: Almacena credenciales sensibles (ID de aplicación y clave de JavaScript) en un archivo seguro .env.
Implementa control de acceso: Utiliza ACLs dinámicas para asegurar que solo los usuarios autorizados puedan modificar datos.
Aprovecha el código en la nube: Descarga la lógica compleja al código en la nube de Back4app para mejorar el rendimiento y la seguridad.
Conclusión
Ahora has construido una aplicación de lista de tareas de pila completa utilizando Blitz.js integrado con un backend de Back4app. 
Este tutorial te guió a través de la inicialización del proyecto, la integración del backend y el despliegue en contenedores.
A medida que avanzas, considera expandir tu aplicación con características como gestión avanzada de usuarios, actualizaciones en tiempo real e integraciones de terceros. 
Para obtener más información, explora la Documentación de Back4app y los recursos de Blitz.js.
How to Build a Redwood.js Frontend and Connect It to a Backend?
How to Build a Qwik Frontend and Connect It to a Backend?