DEV Community

Aestimo K.
Aestimo K.

Posted on

Self Host A FREE Retool Alternative On Ubuntu 22.04 LTS

#javascript #beginners #productivity #opensource

Introduction

Even if yours is a small business with just one employee, you, it's likely that your ultimate goal is to run a tight ship - product or service orders handled professionally, customer support queries sorted out on time, payment reminders handled seamlessly and so forth.

To get this kind of near-flawless workflows for your business will require custom software setups, and most of the time, these will not be softwares you can buy off the shelf. You'll either have to pay for a subscription to a SaaS offering (and that's assuming there's one that fits your needs), or get a developer to build a custom one for you.

The other alternative is to use a low-code/no-code builder to make an app that fits your needs. Nowadays, there's all sorts of low/no-code offerings with some notable ones including:

  • Retool - One of the most notable low-code builders out there
  • Bubble - Excellent all-round builder
  • Tooljet - Good choice builder
  • Appsmith - Good choice app builder
  • ...and many others

Most of these tools also offer free versions of their builders which is great for testing and learning, but when you want to really build something serious, the free versions' limited features will only get you so far.

If you're on a tight budget but still want a builder with abilities comparable to those of the premium offerings, LowCoder (formerly OpenBlocks builder*) is a really good choice.

*The Openblocks project is not under active development at the time of this writing. The Lowcoder team thought it best not to let such an awesome project die which is super awesome. Thanks LowCoder team 🫶

Why LowCoder?

There are several good reasons to use LowCoder over paid builders like Retool:

  • Very solid free version - LowCoder is a really well built open-source app builder.
  • Variety of UI components - Since you'll be building UIs using components, the more the better. And LowCoder doesn't disappoint in this department - 50+ components are available as of this writing.
  • Native connections to a variety of backends from Postgresql to REST APIs, Redis and many more.
  • Fully open source - Need to tinker with the source code? The LowCoder source is available for you to mess with as you wish.

Goals

In this article we'll be installing LowCoder using Docker Compose on a Ubuntu 22.04 LTS server. We'll also setup Caddy as a reverse proxy with automatic SSL.

Prerequisites

  • An Ubuntu/Debian server with at least 2GB RAM and 2 vCPUs. Hetzner provides some really affordable options. Sign up here to get yours.
  • A domain/sub-domain name that is pointed at your server.

That's it. Let's get started.

Step 1: Intial server setup

First setup the timezone:

timedatectl set-timezone "Europe/Berlin"
Enter fullscreen mode Exit fullscreen mode

Update/upgrade server

sudo apt update -y
sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Docker with Compose

It's not necessary to install Docker Compose but I've found that it gives us a very easy way to set up LowCoder.

First we install some necessary and required packages:

sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
Enter fullscreen mode Exit fullscreen mode

Next, we add Docker's keyring:

sudo mkdir -p /etc/apt/keyrings
Enter fullscreen mode Exit fullscreen mode 
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
Enter fullscreen mode Exit fullscreen mode

Then we add the Docker repository:

echo \
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
Enter fullscreen mode Exit fullscreen mode

Finally for this step, update the system and install Docker and the Compose plugin:

sudo apt update
Enter fullscreen mode Exit fullscreen mode 
sudo apt install docker-ce docker-ce-cli containerd.io docker-compose-plugin
Enter fullscreen mode Exit fullscreen mode

Tip: You can verify the Docker compose installation by running docker compose version.

Step 3: Download the LowCoder Docker config

Login into your server and create a folder (you can call yours whatever you want to) to hold the Docker compose file for LowCoder:

sudo mkdir lowcoder && cd lowcoder
Enter fullscreen mode Exit fullscreen mode

Then download the LowCoder Docker compose file there:

curl https://raw.githubusercontent.com/lowcoder-org/lowcoder/main/deploy/docker/docker-compose.yaml -o $PWD/docker-compose.yml
Enter fullscreen mode Exit fullscreen mode

Step 4: Modify the Docker config

Since we want to run the service behind a Caddy proxy, we need to modify the Docker compose accordingly. Open up the Docker compose:

sudo nano docker-compose.yml
Enter fullscreen mode Exit fullscreen mode

..and modify it like this:

# docker-compose.yml

version: "3"
networks:
  caddy:
services:
  lowcoder-api-service:
    image: lowcoderorg/lowcoder-ce:latest
    container_name: lowcoder
    ports:
      - "3000:3000"
    environment:
      # enable services
      REDIS_ENABLED: "true"
      MONGODB_ENABLED: "true"
      API_SERVICE_ENABLED: "true"
      NODE_SERVICE_ENABLED: "true"
      FRONTEND_ENABLED: "true"
      # generic parameters
      PUID: "1000"
      PGID: "1000"
      # api-service parameters
      #MONGODB_URI: "mongodb://lowcoder:secret123@mongodb/lowcoder?authSource=admin"
      MONGODB_URI: "mongodb://localhost:27017/lowcoder?authSource=admin"
      REDIS_URL: "redis://localhost:6379"
      JS_EXECUTOR_URI: "http://localhost:6060"
      ENABLE_USER_SIGN_UP: "true"
      ENCRYPTION_PASSWORD: "lowcoder.org"
      ENCRYPTION_SALT: "lowcoder.org"
      CORS_ALLOWED_DOMAINS: "*"
      # api and node service parameters
      LOWCODER_API_SERVICE_URL: "http://localhost:8080"
      LOWCODER_NODE_SERVICE_URL: "http://localhost:6060"
    volumes:
      - ./lowcoder-stacks:/lowcoder-stacks
    networks:
      - caddy
    restart: unless-stopped

   caddy:
    image: caddy:latest
    restart: unless-stopped
    container_name: caddy
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./caddy/Caddyfile:/etc/caddy/Caddyfile
      - ./caddy/site:/srv
      - ./caddy/caddy_data:/data
      - ./caddy/caddy_config:/config
    networks:
      - caddy
volumes:
  caddy_data:
    external: true
  caddy_config:
Enter fullscreen mode Exit fullscreen mode

As you can see, Caddy is using a volume called "caddy", as well as a configuration file called "Caddyfile". We could easily run Docker Compose and have this created but doing so would create the Caddyfile as a folder whereas what we want is a file.

So let's manually create the folder and Caddyfile next.

Step 5: Caddy configuration

In the project root folder, "lowcoder" according to our example, create a "caddy" folder and a Caddyfile within it:

sudo mkdir caddy && sudo touch caddy/Caddyfile
Enter fullscreen mode Exit fullscreen mode

Next, open up the Caddyfile and modify it accordingly:

sudo nano caddy/Caddyfile
Enter fullscreen mode Exit fullscreen mode 
{
  email <your-letsencrypt-email@example.com>
}

lowcoder.stackpro.dev {
  reverse_proxy <lowcoder-container-name>:<port>
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Setup your hosts file

This step assumes you've pointed your domain/sub-domain to your server's IP address. Go ahead and open up the hosts file:

sudo nano /etc/hosts
Enter fullscreen mode Exit fullscreen mode

...and add your domain entries accordingly:

127.0.0.1 localhost
<your-server-ip-address> <domain.tld>
Enter fullscreen mode Exit fullscreen mode

Finally, let's run docker compose up to get evrything setup and ready:

docker compose up
Enter fullscreen mode Exit fullscreen mode

Conclusion

With that you should have a running instance of LowCoder with SSL provisioned automatically by Caddy on your domain/sub-domain: "https://yourdomain.com".

Enjoy!

Top comments (2)

Collapse
 
yusufuysal profile image
Jomedya •

Not working.

Image description

Collapse
 
iamaestimo profile image
Aestimo K. •

Check the error, there's a "missing a key" in your compose file

Read next

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -

martygo profile image

👀 How Check Memory Leaks in React?⚠️🚨🚨

Martins Gouveia -

rajnandan1 profile image

Built a cli for browser

Raj Nandan Sharma -

sharathchandark profile image

Learn How To Build A Translator App With API Using HTML, CSS, And JavaScript

sharathchandark -