Packages

npm Packages

As you probably already know, npm is the most popular registry of reusable JavaScript code. Velo allows you to install approved npm packages and use them in your site. If a package you would like to use has not yet been approved, you can request that it be added to the list of approved packages. 

Package Support

Some types of packages are not supported. These include private packages, packages that need to run on specific hardware, and packages that may expose a security risk.

Here are a few things to consider when using an approved package in your code:

• Some packages are only intended to be used in client-side code and others are only intended to be used in server-side code. Be sure to use packages in their intended locations.
• Some packages contain functionality that interacts with the DOM. In Velo, you use $w APIs to interact with page elements instead of interacting directly with the DOM, so some functionality in these packages will not work.
• Some packages work with React or other JavaScript libraries. You can only use these packages in conjunction with custom elements if at all.
• Errors that occur when using a package's functionality may be reflected in the browser console. These errors are generated by the implementation of the package, not from Velo. See the package's documentation to better understand what is causing the error.

It is your responsibility to understand the package's functionality, in what situations it can be used, and in what situations it should not be used.

Package Usage

You find and install packages in the Code Files tab of the Velo Sidebar. Once installed, you can import the package and use it in your code.

For example, you might want to install Lodash to make use of its handy utility functions. First, you need to install the package. Just choose your package, and click Install. Then you can import it and use its functionality.

import _ from 'lodash';

// ...

let union = _.union([1,2,3], [3,4,5]); 

Velo Packages

Velo packages are bundles of code built by the Velo team that you can add to your site. The packages allow you to quickly implement complex functionality while writing a minimal amount of code. 

Because these packages are specifically built to work within the Velo ecosystem, they work seamlessly with the elements, apps, and APIs you use in your sites.

See a package's readme file to learn how to use the package. Each package is different, but typically you need to perform some setup or configuration before using the package. You also might need to install some dependencies, such as apps that the package works with.

You find and install Velo packages in the Code Files tab of the Velo Sidebar. 

With everything set up, you're ready to start using the package.

For example, you can easily monitor and manage data stored in a Google spreadsheet from your site using the @velo/google-sheets-integration package.

Since the google-sheets-integration package uses the Google Sheets API, you need to do a bit of setup on the Google Cloud Platform before using it. You also need to store some sensitive data in the Secrets Manager.

Once you have that set up, you can use the package to:

• Get data from your spreadsheet
• Add new data to your spreadsheet
• Update data in your spreadsheet
• Clear data from your spreadsheet