How to install a Notion-Like self-hosted web app

From over 15 apps I have tried, all of them pretending to be "Notion-like", "Notion replacement", "Notion alternative", Notion blalblabla.. none of these apps are even close to Notion.

But one of these apps I came across is FocalBoard, it's not typical like Notion of course, but it's the most closest option especially when it comes to Board View and Table View.

FocalBoard is an open-source app and runs even offline. It allows you to create notes with board view, table view, calendar view, and gallery view.

The board and table view are identical to Notion's views. Even when you open a task/item, it'll open in a card view, typical like Notion.

You can use it as desktop app, and your data is saved locally in an SQLite database.

Or, you can self-host it in your own server. It should be working with any server, but the documentation is not good-covered with Mac and Windows, plus need lots of work on it. I have tried for hours to install it on Windows, and it didn't even work and got tons of error and response to their issues in their GitHub!

But it's 100% ready for Ubuntu Server, it will not take even 10 mins to install!

So, let's do it cuties ^__^.

Install FocalBoard Personal Server:

First, as the documentation said, you'd have to install Ubuntu Server 18.04. I actually didn't try to install on any other version, but you can share your thoughts and experiments in the comments if you tried.

Download FocalBoard Server:

Second, download the server (I recommend the latest version from GitHub releases, at the time I'm writing this post, the latest version is 7.5.2) and unpack it, then move it to the /opt directory. So, in code.

wget https://github.com/mattermost/focalboard/releases/download/v7.5.2/focalboard-server-linux-amd64.tar.gz
tar -xvzf focalboard-server-linux-amd64.tar.gz
sudo mv focalboard /opt

Next step is to install the web server that will gonna serve our web app, right?

Install the Web Server (NGINX):

Before installing Nginx, make sure to update the dependences first. So, in code:

sudo apt update
sudo apt install nginx

Configure the Web Server:

Of course, we need to configure our web server. So, we will create a new site configuration:

sudo nano /etc/nginx/sites-available/focalboard

And copy and paste these configuration as is, and if you have a domain for your web server just replace focalboard.example.com with the domain you will serve the web app on, otherwise just leave it as is, it won't harm! Do not change anything else unless you know what you are doing.

upstream focalboard {
   server localhost:8000;
   keepalive 32;
}

server {
   listen 80 default_server;

   server_name focalboard.example.com;

   location ~ /ws/* {
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
       client_max_body_size 50M;
       proxy_set_header Host $http_host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Frame-Options SAMEORIGIN;
       proxy_buffers 256 16k;
       proxy_buffer_size 16k;
       client_body_timeout 60;
       send_timeout 300;
       lingering_timeout 5;
       proxy_connect_timeout 1d;
       proxy_send_timeout 1d;
       proxy_read_timeout 1d;
       proxy_pass http://focalboard;
   }

   location / {
       client_max_body_size 50M;
       proxy_set_header Connection "";
       proxy_set_header Host $http_host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Frame-Options SAMEORIGIN;
       proxy_buffers 256 16k;
       proxy_buffer_size 16k;
       proxy_read_timeout 600s;
       proxy_cache_revalidate on;
       proxy_cache_min_uses 2;
       proxy_cache_use_stale timeout;
       proxy_cache_lock on;
       proxy_http_version 1.1;
       proxy_pass http://focalboard;
   }
}

Another thing, if there's a default site, maybe you'll need to delete it:

sudo rm /etc/nginx/sites-enabled/default

Now, we'll need to enable our new site configuration:

sudo ln -s /etc/nginx/sites-available/focalboard /etc/nginx/sites-enabled/focalboard

After that, of course, we'll need to test our nginx configuration:

sudo nginx -t

And then, we'll need to reload our web server:

sudo /etc/init.d/nginx reload

The next part is the database part.

Install a Database:

You have three options for the database:

1. MySQL
2. PostgreSQL (Recommended)
3. SQLite

If you want SQLite, leave everything as is and skip this step.

MySQL

Install MySQL server:

sudo apt-get install mysql-server

Log in as root to your database:

sudo mysql

After that, create the database:

CREATE DATABASE boards;

Make sure to check if your database charset is a variant of utf8mb4. by default is utf8mb4_general_ci. This is required by the server.

Add a user for the database, replace boardsuser and boardsuser-password to what you want:

GRANT ALL on boards.* to 'boardsuser'@'localhost' identified by 'boardsuser-password';

Then, logout from the mysql user:

exit

Now, we'll need to edit the FocalBoard configuration to connect it with our newly created database:

nano /opt/focalboard/config.json

look for these keys and replace them with these values -don't forget to replace boardsuser and boardsuser-password with the one you edited when creating the database user:

"dbtype": "mysql",
"dbconfig": "boardsuser:boardsuser-password@tcp(127.0.0.1:3306)/boards"

PostgreSQL

Install PostgreSQL:

sudo apt install postgresql postgresql-contrib

Log in to the postgresql user:

sudo --login --user postgres

Run the psql command:

psql

After that, create the database:

CREATE DATABASE boards;

Create a user, replace boardsuser and boardsuser-password with what you want:

CREATE USER boardsuser WITH PASSWORD 'boardsuser-password';

Exit the psql:

/q

Then, logout from the postgresql user:

exit

Edit the FocalBoard configuration to connect it with our newly created database:

nano /opt/focalboard/config.json

And replace these keys with these values, don't forget to change with what you have edited:

"dbtype": "postgres",
"dbconfig": "postgres://boardsuser:boardsuser-password@localhost/boards?sslmode=disable&connect_timeout=10"

Now, we have installed the web server and the database and connected everything, what we should do next? .. Yes, that's right, run our app.

But before that, we'll need to configure something a little bit to run our app as a service.

Run as an OS Service:

Create a new service:

sudo nano /lib/systemd/system/focalboard.service

Copy and paste the following as is:

[Unit]
Description=Focalboard server

[Service]
Type=simple
Restart=always
RestartSec=5s
ExecStart=/opt/focalboard/bin/focalboard-server
WorkingDirectory=/opt/focalboard

[Install]
WantedBy=multi-user.target

Reload the daemon:

sudo systemctl daemon-reload

Start the service:

sudo systemctl start focalboard.service

Enable the service on startup:

sudo systemctl enable focalboard.service

That's it, and congrats.

Let's test the server

curl localhost:8000

or with the browser, of course don't forget to change localhost with your server's ip or domain.
http://localhost:8000.

Have a nice coding day cuties.
Thanks.