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

Using a Template

You can also bootstrap new Webcore projects with a template using the following command:

npm create webcore@latest template [TemplateName] [destination]

# Use the "Portfolio" template on the current directory
npm create webcore@latest template Portfolio

# Create the "Portfolio" template in the "portfolio" directory
npm create webcore@latest template Portfolio ./portfolio

You can find the list of available templates in our GitHub repository. When using the CLI, make sure you reference the name of the template folder. You can also find more documentation about our templates in our templates library.

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

Creating new projects with templates

If you want to use a template for bootstrapping a new project, you can import the createTemplate function from the package and call it with the following configuration object to generate a new Webcore project with the required files:

import { createTemplate } from 'create-webcore'

const response = await createTemplate('Portfolio', './')

if (response.error) {
    console.log('Error during bootstrapping project', response.error)
} else {
    console.log('Project successfully created.')
}

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

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 during 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: