QUICK SETUP

The easiest way to install and setup live elements is to install live-elements-web-cli or lvweb for short. lvweb is a tool that helps you setup and run live elements web projects.

You can install lvweb using npm. You can either install it locally and run it using npx:

npm i live-elements-web-cli
npx lvweb init # initialize a starting project in this directory

or globally and then you can use it to initialize projects:

npm i -g live-elements-web-cli
lvweb init # initialize a starting project

After initializing a project, you can use npm install in the project folder to install all dependencies.

MANUAL SETUP

The other way to add live elements support to a project is to install all the packages manually. The following packages are required to run Live Elements:

  • live-elements-js-compiler: compiles live elements code to javascript.
  • live-elements-core: core live elements library the compiler links to
  • live-elements-web-cli: lvweb tool used to generate and run live elements projects
  • live-elements-web-server: server for live elements front-end handling routes, client and server side rendering, and other functionalities.
  • live-elements-loader webpack loader for live elements
  • live-web main DOM front-end library, including client side router

These packages can be installed manually to any project:

npm i \
    live-elements-js-compiler \
    live-elements-core \
    live-elements-web-cli \
    live-elements-web-server \
    live-elements-loader \
    live-web

TROUBLESHOOTING

In some edge cases, the javascript compiler package (live-elements-js-compiler) might need some additional steps to setup, depending on the operating system it's being installed on.

The package is written in c++, and offers binaries for linux, macos and windows, but for some specific OS releases, the binary might not be compatible. If this is the case, the package will try to rebuild the compiler from source upon installation.

This requires both cmake and a c++ compiler to be installed on the host machine. If the npm installation fails, you can try to compile the package manually and see if there are any issues:

git clone https://github.com/liveelements/live-elements-js-compiler.git
cd live-elements-js-compiler
npm run cmake

If you can build it manually, but for some reason, it fails during npm install you can force live-elements-js-compiler installation script to not build the compiler during installation, so that you can build it manually yourself:


# set flag to skip compiler build
export LIVE_ELEMENTS_COMPILER_BUILD=SKIP
# installing will now only download the source code, and won't try to compile
npm i live-elements-js-compiler
cd node_modules/live-elements-js-compiler
# trigger compilation manually
npm run cmake