Saltearse al contenido
StudioCMS Docs
Sitio Principal
Demo

@studiocms/devapps

v0.1.0-beta.11 GitHub npm Registro de cambios

Introducción

'Read the “', Introducción, '” section'

Una colección de herramientas útiles disponibles durante el modo de desarrollo en Astro.

Instalación

'Read the “', Instalación, '” section'

  1. Instala el paquete y añádelo a tu configuración de astro usando el siguiente comando:

    Ventana de terminal
    npx astro add @studiocms/devapps

  2. Actualiza tu archivo de configuración como se muestra en Configuración de Ejemplo a continuación.

Uso

'Read the “', Uso, '” section'

¡Todas las herramientas solo estarán disponibles durante astro dev y no estarán disponibles durante los despliegues de producción!

Configuración de ejemplo

'Read the “', Configuración de ejemplo, '” section'
astro.config.mjs
import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function db(): AstroIntegration[]
db from '@astrojs/db';
import 
function devApps(opts?: StudioCMSDevAppsOptions): AstroIntegration
Integrates StudioCMS development applications with Astro.
@param ― opts - Optional configuration options for StudioCMS DevApps.
@returns ― The Astro integration object for StudioCMS DevApps.
@example 
import { studioCMSDevApps } from '@studiocms/devapps';


export default {
  integrations: [
    studioCMSDevApps({
      endpoint: '/api',
      appsConfig: {
        wpImporter: {
          enabled: true,
          endpoint: '/wp-import',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps from '@studiocms/devapps';


export default 
defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
  
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.site?: string
@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.


{
  site: 'https://www.my-site.dev'
}
site: "https://example.com",
  
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]
@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).


Read our Integrations Guide for help getting started with Astro Integrations.


import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
    
function db(): AstroIntegration[]
db(), // REQUERIDO
    
function devApps(opts?: StudioCMSDevAppsOptions): AstroIntegration
Integrates StudioCMS development applications with Astro.
@param ― opts - Optional configuration options for StudioCMS DevApps.
@returns ― The Astro integration object for StudioCMS DevApps.
@example 
import { studioCMSDevApps } from '@studiocms/devapps';


export default {
  integrations: [
    studioCMSDevApps({
      endpoint: '/api',
      appsConfig: {
        wpImporter: {
          enabled: true,
          endpoint: '/wp-import',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps(/* Ver Opciones de Configuración Abajo */),
  ],
});

Opciones de Configuración

'Read the “', Opciones de Configuración, '” section'

Lista completa de opciones disponibles para la integración devApps, con valores predeterminados mostrados. Todas las opciones son opcionales.

endpoint?: string | undefined
endpoint: '_studiocms-devapps',
verbose?: boolean | undefined
verbose: false,
appsConfig?: {
    wpImporter: boolean | {
        endpoint?: string | undefined;
    };
    libSQLViewer?: boolean | undefined;
} | undefined
appsConfig: {
  
libSQLViewer?: boolean | undefined
libSQLViewer: true,
  
wpImporter: boolean | {
    endpoint?: string | undefined;
}
wpImporter: true,
},

Herramientas

'Read the “', Herramientas, '” section'

Visor de libSQL

'Read the “', Visor de libSQL, '” section'

Herramienta de desarrollo para ver las tablas SQL en la base de datos libSQL en el navegador. La herramienta depende de las credenciales de conexión de la base de datos remota libSQL de @astrojs/db.

Requisitos

'Read the “', Requisitos, '” section'

Las siguientes variables de entorno configuradas (También usadas para @astrojs/db):

  • ASTRO_DB_REMOTE_URL
  • ASTRO_DB_APP_TOKEN

Vista previa de uso

'Read the “', Vista previa de uso, '” section'
  • Aplicación de barra de herramientas (Cerrada)

Aplicación de barra de herramientas de Astro

  • Aplicación de barra de herramientas (Expandida)

Aplicación de barra de herramientas de Astro (Expandida)

Importador de WordPress

'Read the “', Importador de WordPress, '” section'

Herramienta de desarrollo para importar publicaciones y páginas de WordPress a la base de datos de StudioCMS.

Requisitos

'Read the “', Requisitos, '” section'
  • Integración StudioCMS
  • Instalación de WordPress
  • @studiocms/blog (Opcional: para importar Publicaciones bajo un blog)

Vista previa de uso

'Read the “', Vista previa de uso, '” section'
  • Aplicación de barra de herramientas

Aplicación de barra de herramientas de Astro