CLI

How to install Webcore using the CLI

To start a new project with Webcore, you can use our CLI tool to bootstrap projects with a single command. Run the following in your terminal and follow the prompts to finish installation:

npm create webcore@latest

npm create webcore@latest config

Adding Blocks

The CLI tool can also be used to add blocks into your project. Read our introduction on blocks to learn more about them. In a nutshell, blocks are ready to use, copy-paste components made from Webcore components, however, they are not part of the NPM package. For full control, you can copy them into your codebase. To add a new block to your project, run the following in your terminal:

npm create webcore add Author

npm create webcore add all

npm create webcore add Author components

API

The CLI can also be used programmatically to create Webcore projects on the fly. To get started, install the CLI as a dependency for your project:

npm i create-webcore

yarn add create-webcore

Creating new projects

You can import the create function from the package and call it with the following configuration object to generate a new Webcore project:

import { create } from 'create-webcore'

create({
    dir: './my-app',
    framework: 'astro',
})

Updating existing projects

To update existing projects you can use the createConfig function in the following way:

import { createConfig } from 'create-webcore'

const response = createConfig({
    sass: '1.86.0',
    ts: '5.8.2',
    webcore: '1.0.0'
})

if (response.error) {
    console.log('Error during updating config', response.error)
} else {
    console.log('Config updated successfully')
}

You can optionally pass a configuration object to the createConfig function to set package versions for Sass, TypeScript, and Webcore itself. These will only be updated if the packages are not present inside package.json. These packages are required for Webcore to function.

The createConfig function also returns with a response object that will either contain an error field, or a success field, depending on the successfulness.

Adding blocks

To add new blocks programmatically, you can call the add function in one of the following ways:

import { add } from 'create-webcore'

add('Author') // Add the specified block to your project.
add('Author', 'components') // Add Author to src/components
add('Author', 'blocks', true) // Add Author to src/blocks, overwrite file if exists
add('all') // Add all blocks

const response = await add('Author')

if (response.error) {
    console.log('An error happened durin adding the block', response.error)
} else {
    console.log('Block has been added here:', response.path)
}

Note that the add function is asynchronous. It accepts up to three parameters:

To add all blocks at once, simply pass all as the first parameter. Just like createConfig, this function also returns with a response object that can have the following values: