@studiocms/devapps

v0.1.0-beta.18 GitHub npm Journal des modifications

Présentation

Une collection d’outils utiles disponibles en mode développement dans Astro.

Installation

Méthode Astro
Méthode manuelle

Installez le paquet et ajoutez-le à votre configuration Astro à l’aide de la commande suivante :
- npm
- pnpm
- yarn
Fenêtre de terminal
npx astro add @studiocms/devapps
Fenêtre de terminal
pnpm astro add @studiocms/devapps
Fenêtre de terminal
yarn astro add @studiocms/devapps
Mettez à jour votre fichier de configuration comme indiqué dans l’exemple de configuration ci-dessous.

Installez le paquet à l’aide de la commande suivante :
- npm
- pnpm
- yarn
Fenêtre de terminal
npm i @studiocms/devapps
Fenêtre de terminal
pnpm add @studiocms/devapps
Fenêtre de terminal
yarn add @studiocms/devapps

Ajoutez @studiocms/devapps à votre fichier de configuration Astro :

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(): 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, 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(): 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',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps(),
   ],
});

Utilisation

Tous les outils ne seront disponibles que pendant l’utilisation de astro dev et ne seront pas disponibles pendant les déploiements en production !

Exemple de configuration

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(): 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, 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(): AstroIntegration[]
db(), // REQUIS
    
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(/* Voir les options de configuration ci-dessous */),
  ],
});

Options de configuration

Liste complète des options disponibles pour l’intégration devApps, avec les valeurs par défaut affichées. Toutes les options sont facultatives.


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

Outils

Visionneuse libSQL

Outil de développement permettant d’afficher les tables SQL de la base de données libSQL dans un navigateur. Cet outil s’appuie sur les identifiants de connexion à la base de données distante libSQL @astrojs/db.

Conditions requises

Les variables d’environnement suivantes sont définies (également utilisées pour @astrojs/db) :

ASTRO_DB_REMOTE_URL
ASTRO_DB_APP_TOKEN

Aperçu de l’utilisation

Application de la barre d’outils (fermée)

Application de la barre d’outils de développement d’Astro

Application de la barre d’outils (étendue)

Application de la barre d’outils de développement d’Astro (étendue)

Importateur Wordpress

Outil de développement pour importer des articles et des pages WordPress dans la base de données de StudioCMS.

Conditions requises

Intégration StudioCMS
Installation de WordPress
@studiocms/blog (Facultatif : pour importer des articles dans un blog)

Aperçu de l’utilisation

Application de la barre d’outils

Application de la barre d’outils de développement d’Astro