Skip to content
StudioCMS
We've renamed the package to studiocms 🎉

Getting Started with StudioCMS

Let’s get started

To start using StudioCMS, you’ll need:

  • An Astro project
  • A libSQL provider or self-hosted libSQL server
  • The StudioCMS integration

Understanding Options for @astrojs/db

Using libSQL

With the latest version of @astrojs/db (v0.14.0), you can now link to any libSQL server from any platform that exposes the libSQL remote protocol of the server, or can be self-hosted.

To use libSQL with Astro Db, you will need to set the following environment variables:

  • ASTRO_DB_REMOTE_URL - The connection URL to your libSQL server
  • ASTRO_DB_APP_TOKEN - The app token for your libSQL server
For more information about these environment varibales, see Using libSQL with @astrojs/db

The commands for deploying and pushing changes to your database are the same when using libSQL as when connecting to an Astro Studio hosted database. However, both of your environment variables need to be set locally when running commands with the --remote option like astro build and astro db push.

See Astro’s Astro DB LibSQL Docs for more information

Using Astro Studio

Astro Studio Account Required

Creating a new Astro project

To create a new Astro project, simply run the following command in your terminal:

Terminal window
npm create astro@latest

After running the command, you’ll be prompted to answer a few questions about your project. Once completed, the CLI will create a new Astro project in the specified directory.

If all goes well, you should see a “Liftoff confirmed. Explore your project!” message followed by some recommended next steps.

cd into your new project directory to begin using Astro. cd my-project

If you skipped the npm install step during the CLI wizard, then be sure to install your dependencies before continuing.

Adding the StudioCMS integration

To add the StudioCMS integration to your project, you’ll need to install the Astro StudioCMS package and it’s dependencies:

Terminal window
npx astro add db node studiocms

After installing the package, make sure that your astro.config.mjs file is correctly importing and calling the integration:

astro.config.mjs
import db from '@astrojs/db';
import node from '@astrojs/node';
import studioCMS from 'studiocms';
import { defineConfig } from 'astro/config';


export default defineConfig({
    site: 'https://demo.astro-studiocms.xyz/',
    output: 'server',
    adapter: node({ mode: "standalone" }),
    integrations: [
        db(),
        studioCMS({
            dbStartPage: true, // After the first time running the dev server and following the instructions at http://localhost:4321/start this will be set to false.
        }),
    ],
});

Configure your package.json scripts

Setup your package.json scripts to include the --remote flag for build, and optionally for dev. (You can also run the dev command as shown in the “Running your StudioCMS Project” section)

package.json
{
    "name": "my-studiocms-project",
    "scripts": {
        "dev": "astro dev --remote",
        "build": "astro check & astro build --remote",
        "astro": "astro"
    }
}

Running your StudioCMS project

Thanks to the power of Astro running StudioCMS is as easy as running the dev command for local preview, or building and deploying to your server, for the basics of how to use it locally without building here is what you need to do.

First time Setup (or during updates if the tables schema is updated)

To start your Astro project, run the following commands in your terminal:

Terminal window
npx astro db push # Add '--remote' if using a remote database
Terminal window
npm run dev --remote

After running the commands, you should see a message indicating that your project is running at localhost:4321. When first setting up StudioCMS, you will prompted to finish configuring StudioCMS at http://localhost:4321/start

Running in Astro Development mode locally

To start your Astro project, run the following command in your terminal:

Terminal window
npm run dev --remote

After running the command, you should see a message indicating that your project is running at localhost:4321. Open your browser and navigate to http://localhost:4321 to see your Astro project in action.

Congratulations! 🥳 You now have StudioCMS installed in your Astro project.

Next steps

Now that you have StudioCMS installed, you can start building your project with StudioCMS.

Check out how to set environment variables in StudioCMS by heading to Environment Variables.

To learn more about the API and how to use StudioCMS, check out the StudioCMS Reference.

You can also learn more about themes and how to author them by using Astro Theme Provider.