@studiocms/devapps

v0.1.0-beta.31 GitHub npm Changelog

Einführung

Eine Sammlung nützlicher Werkzeuge, die im Entwicklungsmodus von Astro verfügbar sind.

Installation

Astro-Methode
Manuelle Methode

Installiere das Paket und füge es mit dem folgenden Befehl zu deiner Astro-Konfiguration hinzu:
- npm
- pnpm
- yarn
Terminal-Fenster
npx astro add @studiocms/devapps
Terminal-Fenster
pnpm astro add @studiocms/devapps
Terminal-Fenster
yarn astro add @studiocms/devapps
Aktualisiere deine Konfigurationsdatei wie unter der Beispielkonfiguration unten gezeigt.

Installiere das Paket mit dem folgenden Befehl:
- npm
- pnpm
- yarn
Terminal-Fenster
npm i @studiocms/devapps
Terminal-Fenster
pnpm add @studiocms/devapps
Terminal-Fenster
yarn add @studiocms/devapps

Füge @studiocms/devapps zu deiner Astro-Konfigurationsdatei hinzu:

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 
function db(options?: AstroDBConfig): 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',
        },
      },
      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 db(options?: AstroDBConfig): AstroIntegration[]
db(),
       
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(),
   ],
});

Verwendung

Alle Tools sind nur während der Entwicklungsphase (astro dev) verfügbar und nicht während der Produktionsphase!

Beispielkonfiguration

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 
function db(options?: AstroDBConfig): 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',
        },
      },
      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 db(options?: AstroDBConfig): AstroIntegration[]
db(), // ERFORDERLICH
    
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(/* Siehe Konfigurationsoptionen unten */),
  ],
});

Konfigurationsoptionen

Vollständige Liste der Optionen, die für die devApps-Integration verfügbar sind, mit Angabe der Standardwerte. Alle Optionen sind optional.


endpoint?: string | undefined
endpoint: '_studiocms-devapps',
verbose?: boolean | undefined
verbose: false,
appsConfig?: {
    wpImporter: boolean | {
        endpoint?: string | undefined;
    };
} | undefined
appsConfig: {
  libSQLViewer: true,Error ts(2353)  ― Object literal may only specify known properties, and 'libSQLViewer' does not exist in type '{ wpImporter: boolean | { endpoint?: string | undefined; }; }'.
  
wpImporter: boolean | {
    endpoint?: string | undefined;
}
wpImporter: true,
},

Werkzeuge

libSQL-Betrachter

Entwicklungswerkzeug, um die SQL-Tabellen in der libSQL-Datenbank im Browser anzuzeigen. Das Tool benötigt die Anmeldeinformationen für die libSQL-Remote-Datenbankverbindung @astrojs/db.

Voraussetzungen

Die folgenden Umgebungsvariablen werden gesetzt (auch für @astrojs/db verwendet):

ASTRO_DB_REMOTE_URL
ASTRO_DB_APP_TOKEN

Vorschau Verwendung

Symbolleisten-App (geschlossen)

Astro DevToolbarApp

Symbolleiste (Erweitert)

Astro DevToolbarApp (Erweitert)

Wordpress-Importer

Entwicklungstool zum Importieren von WordPress-Beiträgen und -Seiten in die StudioCMS-Datenbank.

Voraussetzungen

StudioCMS-Integration
WordPress installieren
@studiocms/blog (Optional: für den Import von Posts unter einem Blog)

Vorschau Verwendung

Symbolleisten-App

Astro DevToolbarApp