@studiocms/devapps

v0.1.0-beta.31 GitHub npm 변경 로그

소개

Astro의 개발 모드에서 사용할 수 있는 유용한 도구 모음입니다.

설치

Astro를 통한 설치
직접 설치하기

다음 명령을 사용하여 패키지를 설치하고 Astro 구성에 추가합니다.
- npm
- pnpm
- yarn
Terminal window
npx astro add @studiocms/devapps
Terminal window
pnpm astro add @studiocms/devapps
Terminal window
yarn astro add @studiocms/devapps
아래의 예시 구성에 나와있는대로 구성 파일을 업데이트합니다.

다음 명령을 사용하여 패키지를 설치합니다.
- npm
- pnpm
- yarn
Terminal window
npm i @studiocms/devapps
Terminal window
pnpm add @studiocms/devapps
Terminal window
yarn add @studiocms/devapps

Astro 구성 파일에 @studiocms/devapps를 추가합니다.

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(),
   ],
});

사용법

모든 도구는 astro dev 실행 중에만 사용할 수 있으며, 프로덕션 배포 중에는 사용할 수 없습니다!

예시 구성

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(/* 아래 구성 옵션을 참조하세요. */),
  ],
});

구성 옵션

devApps 통합에 사용할 수 있는 모든 옵션의 전체 목록입니다. 기본값이 표시되어 있으며, 모든 옵션은 선택 사항입니다.


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,
},

도구

libSQL Viewer

브라우저에서 libSQL 데이터베이스의 SQL 테이블을 볼 수 있는 개발 도구입니다. 이 도구는 @astrojs/db libSQL 원격 데이터베이스 연결 자격 증명을 사용합니다.

요구 사항

설정된 다음 환경 변수 ( @astrojs/db에도 사용됨)

ASTRO_DB_REMOTE_URL
ASTRO_DB_APP_TOKEN

사용법 미리 보기

도구 모음 앱 (닫힌 상태)

Astro DevToolbarApp

도구 모음 앱 (열린 상태)

Astro DevToolbarApp (Expanded)

Wordpress Importer

WordPress 게시물과 페이지를 StudioCMS 데이터베이스로 가져오는 개발 도구입니다.

요구 사항

StudioCMS 통합
WordPress 설치
@studiocms/blog (선택 사항: 블로그 하위 항목으로 게시물을 가져오는 경우)

사용법 미리보기

도구 모음 앱

Astro DevToolbarApp