@studiocms/devapps

v0.2.1 GitHub npm Registro de cambios

Introducción

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

Instalación

Método Astro
Método Manual

Instala el paquete y añádelo a tu configuración de Astro usando el siguiente comando:
- npm
- pnpm
- yarn
Ventana de terminal
npx astro add @studiocms/devapps
Ventana de terminal
pnpm astro add @studiocms/devapps
Ventana de terminal
yarn astro add @studiocms/devapps
Actualiza tu archivo de configuración como se muestra en Ejemplo de Configuración a continuación.

Instala el paquete usando el siguiente comando:
- npm
- pnpm
- yarn
Ventana de terminal
npm i @studiocms/devapps
Ventana de terminal
pnpm add @studiocms/devapps
Ventana de terminal
yarn add @studiocms/devapps

Añade @studiocms/devapps a tu archivo de configuración de Astro:

import { defineConfig } from 'astro/config';
import studiocms from 'studiocms';
import devApps from '@studiocms/devapps';

export default defineConfig({
   site: "https://example.com",
   integrations: [
       studiocms(), // REQUERIDO
       devApps(),
   ],
});

Uso

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

Ejemplo de configuración

import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never, const TFontFamilies extends FontFamily[] = never>(config: AstroUserConfig<TLocales, TDriver, TFontFamilies>): AstroUserConfig<TLocales, TDriver, TFontFamilies>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
const studiocms: () => AstroIntegration
StudioCMS Integration
StudioCMS is an open-source headless CMS built for Astro, by members of the Astro community.
To configure StudioCMS, create a studiocms.config.* file in the root of your Astro project.
Then, import the defineStudioCMSConfig function from studiocms/config and export the configuration as the default export.

Note: Supported config file extensions are .ts, .js, .mts, and .mjs.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studiocms from 'studiocms';
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',
        },
      },
      verbose: true,
    }),
  ],
};
devApps from '@studiocms/devapps';

export default 
defineConfig<never, never, never>(config: AstroUserConfig<never, never, never>): AstroUserConfig<never, never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
  
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = 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, TFontFamilies extends FontFamily[] = 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 studiocms(): AstroIntegration
StudioCMS Integration
StudioCMS is an open-source headless CMS built for Astro, by members of the Astro community.
To configure StudioCMS, create a studiocms.config.* file in the root of your Astro project.
Then, import the defineStudioCMSConfig function from studiocms/config and export the configuration as the default export.

Note: Supported config file extensions are .ts, .js, .mts, and .mjs.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studiocms(), // 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',
        },
      },
      verbose: true,
    }),
  ],
};
devApps(/* Ver Opciones de Configuración a continuación */),
  ],
});

Opciones de Configuración

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


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

Herramientas

Importador de WordPress

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

Requisitos

Integración de StudioCMS
WordPress instalado
@studiocms/blog (Opcional: para importar publicaciones bajo un blog)

Uso de vista previa

Aplicación de la barra de herramientas

Astro DevToolbarApp