How to install a Notion-Like self-hosted web app
Tags: notion, selfhosted, opensource, tutorial
Published: 2022-11-29 23:35:47

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at78n8oo2049prfs9cbd.png)

![Table View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8jpu2cujwh3yyhsfyfu.png)


![Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzelgf4icx7u10sy1cnq.png)


**[FocalBoard](https://github.com/mattermost/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](https://github.com/mattermost/focalboard/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.

```bash
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:

```bash
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:

```bash
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:
```bash
sudo rm /etc/nginx/sites-enabled/default
```

Now, we'll need to enable our new site configuration:
```bash
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:
```bash
sudo nginx -t
```

And then, we'll need to reload our web server:
```bash
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:

```bash
sudo apt-get install mysql-server
```

Log in as root to your database:

```bash
sudo mysql
```

After that, create the database:

```sql
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:

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

Then, logout from the mysql user:

```bash
exit
```

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

```bash
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:

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


#### PostgreSQL

Install PostgreSQL:

```bash
sudo apt install postgresql postgresql-contrib
```

Log in to the postgresql user:

```bash
sudo --login --user postgres
```

Run the psql command:

```bash
psql
```

After that, create the database:

```sql
CREATE DATABASE boards;
```

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

```sql
CREATE USER boardsuser WITH PASSWORD 'boardsuser-password';
```

Exit the psql:

```sql
/q
```

Then, logout from the postgresql user:

```bash
exit
```

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

```bash
nano /opt/focalboard/config.json
```

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

```json
"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:

```bash
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:

```bash
sudo systemctl daemon-reload
```

Start the service:

```bash
sudo systemctl start focalboard.service
```

Enable the service on startup:

```bash
sudo systemctl enable focalboard.service
```

That's it, and congrats.

Let's test the server

```bash
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](http://localhost:8000).



Have a nice coding day cuties.
Thanks.