orders-widget

Cubbo's Orders widget

Local Development

Node >= 12 is required. Node 16.13.2 is recommended, we used it to build the project.

You can install and use Node with the following commands:

nvm install 16.13.2
nvm use 16.13.2

First steps

• Clone repo.
• Get to the new folder, cd orders-widget
• Run yarn install
• To build the css you can run: npx postcss src/*.js -d postcss-result.
• Start web server with npx vite

Development process

We are using lit along vite as bundler / builder. Currently, we have to manually run postcss since vite only runs postcss if it notices updates at <style> tags or css stylesheets. This is something that we should fix in the future.

Building the css is required at any change, if your entry point is using the postcss-result folder as source. The index.html file is using it as default.

If lit is new for you, there are good examples at Open-wc.

Build overview

The code has 3 main sources of content:

• src, this folder is where the source code exists. This where we can update and develop features.
• postcss-result, this folder is where the results of the postcss process are stored. This folder is used by vite.config.js to create an es and umd version of the code, and by index.html to serve the local version.
• dist, this the folder where the command vite build will output an es and umd versions of the code. We can use those versions to publish a package.

To get the es and umd version of the code you can run vite build