Skip to main content

Commands

info

You will first need a Vev user, sign up here.

You also need NodeJS v16 or higher installed.

To install the CLI:

npm i @vev/cli -g

login​

To authorize the CLI against the Design Editor:

vev login

This will authorize the CLI against Vev, and save an access token to your computer which will be used for further requests. You need to login before you can start initializing packages.

create​

To get started easily and get a boiler of React and TypeScript setup. 

vev create [my-project]

Based on this boilerplate.

This is not required to use the CLI, you can also use your own setup and add the @vev/react package manually.

initialize​

To start working on Vev components, you need to run initialize first.

vev init

This will create a new component package in Vev that later can be deployed. In your local files, a new vev.json file will be created containing your component key. Never delete this file, while this will detach your component from Vev, if you do so you will have to initialize a new component package.

caution

Never delete the vev.json file.

This command will also create a .vev folder containing all of your local builds. This folder can be deleted at any point and will be automatically recreated when needed. This folder does not need to be checked into source control.

start​

To view your components the Design Editor.

vev start

Now you can open the Design Editor and open any project. Now you will see a green dot in the bottom of the editor. This means your local machine is connected with Vev. Clicking the dot will give you a menu where you can start using the components inside the Design Editor.

useEditorState

To show more messages and debug messages to stdout, you can add the --debug flag to your start command.

vev start --debug

deploy​

vev deploy

This will deploy the component and make it available in the Design Editor.

Available options can be set in vev.json.

This will create one optimized JavaScript and CSS bundle which will be shared among all widgets within the package. For optimization, make separate packages if your widgets does not shared common code, using Context (or other global shared logic). This will create more optimal bundles.