Help with hosting, operators, templates and styling

[vaddisrinivas]

Hi,

I have been trying to leverage Lowdefy for a small project and I am curious to know how can I implement/understand the following -

• modify Favicon/ browser tab icon
• display an image without using the 'Html' block
• understand how to use templates
• deploying this application as a docker container/hosting it (not running npx lowdefy@latest dev)
• adding global CSS
• using local resources like images, styling, and scripts (apart from '_ref')

While the examples have a lot of info, they are all on different/previous versions of Lowdefy. Also, a more elaborate example of using the operators, templates and can be really helpful.

Any help/guidance on this would be really great!.

[SamTolmay]

Hi @vaddisrinivas

We are happy to help. I have converted your issue to a discussion, and I am going to answer each question as a separate answer so we can discuss each separately. A number of your questions will be fixed in the next release, which should be 3.16.0.

Please also feel free to join our Discord (https://discord.gg/WmcJgXt), we can easily help you with specific questions there.

We definitely have a lot of work to do on improving the docs and examples. We are planning on adding some tutorial videos that explain concepts a little in depth.

[SamTolmay]

modify Favicon/ browser tab icon

I created an issue to document this. To change the favicon or the icons that appear in the header you can add the following files to a folder called public at the root of your lowdefy project directory:

• apple-touch-icon.png (180x180px)
• icon-32.png (32x32px)
• icon-512.png (512x512px)
• icon.svg (Will be used as favicon if supported by browser)
• logo-dark-theme.png (~250x72px)(Header on mobile)
• logo-light-theme.png
• logo-square-light-theme.png (Header on desktop)
• logo-square-dark-theme.png
• manifest.webmanifest

The public folder is currently only supported apps deployed with Netlify. The next release adds support in the CLI dev server. It should work fine in the Docker server, but more on that below.

[APTy]

Thanks for the info! Is there a way to similarly add a custom "loading" gif to override the Lowdefy one?

[Gervwyk]

Currently unfortunately not. We believe that it could be beneficial for Lowdefy community to keep a viral element in the applications from a marketing point of view. But also open to reconsider this in the future. Any thoughts?

[APTy]

Ah okay, I was just curious. I guess you can offer it as an enterprise feature 😉

[SamTolmay]

deploying this application as a docker container/hosting it

We currently have a Docker server in the repository, but we are not building and publishing images, that's on our roadmap to do soon, so if you could help test things that would be great. Currently you can clone the repository and build an image from the Dockerfile at packages/servers/serverDocker.

You then need to load your Lowdefy config into the image.
First run npx lowdefy@latest build in your project directory.

Then use a Dockerfile like this to create an image with the configuration loaded:

FROM <tag>

COPY --chown=node:node ./.lowdefy/build ./.lowdefy/build

COPY --chown=node:node ./public ./dist/shell/public

CMD ["node", "./dist/server.js"]

The following works as a docker compose file:

version: "3.8"
services:
  lowdefy:
    build: .
    ports:
      - "3000:3000"

[SamTolmay]

using local resources like images, styling, and scripts, global CSS

The next release (should be 3.16.0) will add support for user-defined HTML in the head and body tags. You can use this to load scripts and CSS. This release also includes Javascript actions and updates to JavaScript operators. All files that are in the public folder are served as static files, so you can host your assets there.

[SamTolmay]

display an image without using the 'Html' block

We can add this as a block. Please add this on the new blocks voting board.

[SamTolmay]

understand how to use templates

The key to templates are the _ref operator.

When the app is being built, if a _ref operator is encountered by the build process, it fetches that file, and includes that file into the configuration (Think of it as copying and pasting in the config). If just used like that, the _ref operator just splits the app into separate files.

The power of the _ref operator comes from using options like vars, .njk files, or a transformer function.

Using vars is the simplest way to make a template. The vars object is a data object that can be accessed using the _var operator in the referenced file. This means you can make page template in a file, and things like the page id, title and content can be read from vars. You can then reference the template file multiple times with different vars to create different pages.

Using Nunjucks template files (.njk) are useful for one main reason. Each block needs to have a unique id, and you can't concat a string at build time to form these unique ids. Something like:

# In file template.yaml.njk
id: box_{{ id }}
type: Box
blocks:
  - id: button_1_{{ id }}
    type: Button
  - id: button_2_{{ id }}
    type: Button

You can now reference this file multiple times on the same page, with different ids as vars.

Transformer functions take the output from the _ref operator, and can transform that using JavaScript. So you can do almost anything there.

[vaddisrinivas]

@SamTolmay,

Many thanks for your immediate help on this.
Thanks for the detailed explanation for each of those items.

I will test the Dockerfile and will get back to you.

many thanks again!