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.

To force a new login or log in to another account use:

vev login --force

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.

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.

compile

vev compile [project-id]

This will compile the project into a production ready bundle of HTML, CSS and JavaScript that can be served on any webserver.

This can also be used to load CMS data into the Vev project.

Options:

• --dist: The output folder for the generated files (default is: vev/ )

vev compile [project-id] --dist your-destination-folder/

This can also be configured in the vev.json file:

{
    "library: {
      "key": "project-key",
      "dist": "/your-dist-folder"
    }
}

Output

This will create and safe the following files in the destination folder:

├── index.html              # HTML for the index page
├── embed.html              # HTML file with embed
├── embed.js                # Embed script
├── assets                  # All assets for the project, including images etc.
│   ├── shared.css          # Shared CSS for all pages
│   ├── vev.css             # Default Vev CSS
│   ├── vev.js              # The Vev.js script
│   ├── interactions.js     # Interactions scripts
│   └── ...                 # All assets
├── page-2                  # Additional pages 
    ├── index.html          # HTML for page
    ├── embed.html          # HTML embed for page
    ├── embed.js            # Embed script