Skip to content
StudioCMS Docs
Main Site

@studiocms/devapps

v0.1.0-beta.31 GitHub npm Changelog

Introduction

Section titled “Introduction”

A Collection of useful tools available during dev mode in Astro.

Installation

Section titled “Installation”

  1. Install the package and add to your astro config using the following command:

    Terminal window
    npx astro add @studiocms/devapps

  2. Update your config file as shown under Example Config below.

Usage

Section titled “Usage”

All tools will only be available during astro dev and will not be available during production deployments!

Example config

Section titled “Example config”
astro.config.mjs
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(), // REQUIRED
    
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(/* See Config Options Below */),
  ],
});

Config Options

Section titled “Config Options”

Full list of options available for the devApps integration, with default values shown. All options are optional.

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

Tools

Section titled “Tools”

Wordpress Importer

Section titled “Wordpress Importer”

Development tool to import WordPress posts and pages into the StudioCMS database.

Requirements

Section titled “Requirements”
  • StudioCMS Integration
  • WordPress Install
  • @studiocms/blog (Optional: for importing Posts under a blog)

Preview Usage

Section titled “Preview Usage”
  • Toolbar app

Astro DevToolbarApp