DEV Community

Primo
Primo

Posted on • Edited on

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

#notion #selfhosted #opensource #tutorial

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.

Board View

Table View

Card

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
   }
}
Enter fullscreen mode Exit fullscreen mode

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



sudo rm /etc/nginx/sites-enabled/default
Enter fullscreen mode Exit fullscreen mode

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



sudo ln -s /etc/nginx/sites-available/focalboard /etc/nginx/sites-enabled/focalboard
Enter fullscreen mode Exit fullscreen mode

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



sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

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



sudo /etc/init.d/nginx reload
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Log in as root to your database:



sudo mysql
Enter fullscreen mode Exit fullscreen mode

After that, create the database:



CREATE DATABASE boards;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Then, logout from the mysql user:



exit
Enter fullscreen mode Exit fullscreen mode

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



nano /opt/focalboard/config.json
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

PostgreSQL

Install PostgreSQL:



sudo apt install postgresql postgresql-contrib
Enter fullscreen mode Exit fullscreen mode

Log in to the postgresql user:



sudo --login --user postgres
Enter fullscreen mode Exit fullscreen mode

Run the psql command:



psql
Enter fullscreen mode Exit fullscreen mode

After that, create the database:



CREATE DATABASE boards;
Enter fullscreen mode Exit fullscreen mode

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



CREATE USER boardsuser WITH PASSWORD 'boardsuser-password';
Enter fullscreen mode Exit fullscreen mode

Exit the psql:



/q
Enter fullscreen mode Exit fullscreen mode

Then, logout from the postgresql user:



exit
Enter fullscreen mode Exit fullscreen mode

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



nano /opt/focalboard/config.json
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Reload the daemon:



sudo systemctl daemon-reload
Enter fullscreen mode Exit fullscreen mode

Start the service:



sudo systemctl start focalboard.service
Enter fullscreen mode Exit fullscreen mode

Enable the service on startup:



sudo systemctl enable focalboard.service
Enter fullscreen mode Exit fullscreen mode

That's it, and congrats.

Let's test the server



curl localhost:8000
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Read next

danuw profile image

Git clone - that repo is too big : HELP!

Dan Benitah -

aamfahim profile image

Release 0.4 Progress

Abdullah Al Mamun Fahim -

vaunt profile image

Celebrate Your Developer Journey With Vaunt’s GitHub Wrap

Vaunt -

kolort profile image

Understanding Color Gradients in Digital Design: A Comprehensive Guide

kolort -