CLI

Reference for all available commands in Webcore CMS

Webcore CMS exposes commands for every stage of development. From running a local server to pushing schema changes and scaffolding new components. All commands are run from the root of the project with your choice of package manager.

Development

# Starts the Astro dev server against your local database. Use this for day-to-day development.
npm run dev

# Starts the Astro dev server against your remote database. Useful for testing against live data.
npm run dev:prod

# Opens Drizzle Studio, a visual interface for inspecting and exploring your local database.
npm run dev:drizzle

Building

# Builds the project against your local database.
npm run build

# Builds the project against your remote database. Always use this when deploying to production.
npm run build:prod

# Serves the last local build output locally so you can verify it before deployment.
npm run preview

Database

The following commands interact with your remote Turso database and should be run whenever the schema or seed data needs to be updated. Make sure your .env file has valid ASTRO_DB_REMOTE_URL and ASTRO_DB_APP_TOKEN values before running any of these (See Configuration).

# Pushes the current schema to your remote database. Run this once during initial setup.
npm run db:push

# Seeds the remote database with the required default records,
# including the initial admin user defined in your .env file.
npm run db:seed

# Executes pending migration queries against the remote database.
# Run this after pulling an update that includes schema changes.
# Migration files are stored in `db/migrations` and applied in order.
npm run db:migrate

Scaffolding

These commands generate boilerplate for new components and templates, following the same structure as existing ones in the project.

# Scaffolds a new block component in `src/components/` with the expected file structure.
npm run create:component [Name]

# Scaffolds a new page template in `src/templates/`.
npm run create:template [Name]

For example, to create a new component called MyComponent, you would run:

npm run create:component MyComponent

CSS

Using Webcore-specific mixins helps you stay in line with the theme’s style, and allows you to use configuration-specific CSS. It’s the recommended way to style new components built using Webcore to ensure consistent styling with our existing component base.

However, you can also incorporate other CSS tools into your project, or combine WebcoreUI with an existing project. In this case, you might prefer to write CSS in your own way.

If you want to port the current module.scss files into a different technology, you can use the command below that helps you compile Sass files into vanilla CSS to make the migration process easier. Simply pass the component name to the command:

# Compiles a component's `.module.scss` file into vanilla CSS and places the output next to the source file.
# Useful when migrating styles away from Sass or integrating with a different CSS toolchain.
npm run compile [ComponentName]

For example:

npm run compile AnimatedGallery

This will generate a plain CSS file alongside AnimatedGallery/animated-gallery.module.scss. Note that webcoreui must be installed (run npm i) before using this command.