2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier.md 7.64 KB
Newer Older
1
2
---
layout: post
Ayush Sharma's avatar
Fix    
Ayush Sharma committed
3
title: "Make Linux apps for Notion, Mastodon, or any web app using Nativefier"
Ayush Sharma's avatar
Ayush Sharma committed
4
number: 112
5
date: 2021-10-10 03:00
Ayush Sharma's avatar
Fix    
Ayush Sharma committed
6
excerpt: "Notion is an awesome life manager. And Mastodon is great for decentralised internet shenanigans. With Nativefier, I can now enjoy them as apps on Ubuntu 20.04."
7
Category: Technology
Ayush Sharma's avatar
Ayush Sharma committed
8
banner_img: "2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier-banner.png"
Ayush Sharma's avatar
Ayush Sharma committed
9
is_meta: true
10
is_pinned: true
11
---
Ayush Sharma's avatar
Fix    
Ayush Sharma committed
12
I use [Notion](https://notion.so) and [Mastodon](https://mastodon.technology) every day, and Ubuntu has been my desktop of choice for the last few years. I prefer dedicated apps for my daily drivers so I've had to use the browser to access Notion and Mastodon for now.
13

Ayush Sharma's avatar
Fix    
Ayush Sharma committed
14
Thankfully I wasn't the only one who thought Linux faced a dearth of dedicated apps. And someone managed to do something about it. [Nativefier](https://github.com/nativefier/nativefier) takes a URL and wraps it into an Electron app running Chromium under the hood for Windows, Mac, or Linux. And using Nativefier is as simple as that.
15
16
17
18
19

## Installing Nativefier

Installing Nativefier is as simple as running:

20
```shell
21
22
23
24
25
npm install -g nativefier
```

On my Ubuntu, I had to upgrade my NodeJS. Nativefier requires `NodeJS >= 12.9`. Once installed, you can check your version of Nativefier.

26
```shell
27
28
29
30
31
32
nativefier --version
45.0.4
```

Running `nativefier --help` will list all options the app supports. I'm going to be using these to create apps for Notion and Mastodon below. Before we create our apps, I'm going to create a new folder called `~/NativeApps`. This will help me keep the the apps nice and organised.

33
```shell
34
35
36
37
mkdir ~/NativeApps
cd ~/NativeApps
```

Ayush Sharma's avatar
Ayush Sharma committed
38
## Creating an app for Notion
39
40
41

We'll start by creating the app for Notion. The command is as follows:

42
```shell
43
44
45
46
47
48
49
50
51
52
53
54
55
56
nativefier -n Notion -p linux -a x64 --width 1024 --height 768 --tray --disable-dev-tools --single-instance https://notion.so
```

The CLI options above do the following:

- `-n Notion` sets the app name to `Notion`.
- `-p linux -a x64` sets the app's platform to `Linux` and architecture to `x64`.
- `--width 1024 --height 768` set the apps dimensions on launch.
- `--tray` creates a tray icon for the app.
- `--disable-dev-tools` disables Chrome dev tools.
- `--single-instance` only allows one instance of the app.

Running that single command will show us the following output:

57
```shell
58
59
60
61
62
63
64
65
66
67
68
69
70
71
Preparing Electron app...

Converting icons...
Packaging... This will take a few seconds, maybe minutes if the requested Electron isn't cached yet...
Packaging app for platform linux x64 using electron v13.4.0
Finalizing build...

App built to /home/my-linux-user/NativeApps/Notion-linux-x64, move to wherever it makes sense for you and run the contained executable file (prefixing with ./ if necessary)

Menu/desktop shortcuts are up to you, because Nativefier cannot know where you're going to move the app. Search for "linux .desktop file" for help, or see https://wiki.archlinux.org/index.php/Desktop_entries
```

As shown in the output, the files will be in `/home/my-linux-user/NativeApps/Notion-linux-x64`. `cd` into this folder and you'll see a file named `Notion`. This is the main executable to launch our app. We'll need to give it the appropriate permissions.

72
```shell
73
74
75
76
cd Notion-linux-x64
chmod +x Notion
```

Ayush Sharma's avatar
Ayush Sharma committed
77
Now, execute `./Notion` and your Linux app should launch!
78

79
{% include article-image.html src="2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier-notion.png" width="1024" height="768" alt="Notion on Ubuntu 20.04 as a native Linux app." %}
80

Ayush Sharma's avatar
Ayush Sharma committed
81
## Creating the app for Mastodon
82
83
84

Just like Notion, we'll create the app for [mastodon.technology](https://mastodon.technology).

85
{% include article-image.html src="2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier-mastodon.png" width="1024" height="768" alt="Mastodon.technology on Ubuntu 20.04 as a Linux app." %}
86
87
88

Use the command:

89
```shell
90
91
92
93
94
95
nativefier -n Mastodon -p linux -a x64 --width 1024 --height 768 --tray --disable-dev-tools --single-instance https://mastodon.technology

cd Mastodon-linux-x64
chmod +x Mastodon
```

Ayush Sharma's avatar
Ayush Sharma committed
96
## Creating app for ayushsharma.in
97

Ayush Sharma's avatar
Ayush Sharma committed
98
For funzies, I'm going to create an app for this website as well. What good is having a tech blog if there's no Linux app for it :)
99

100
{% include article-image.html src="2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier-ayushsharma-in.png" width="1024" height="768" alt="ayushsharma.in on Ubuntu 20.04 as a native Linux app." %}
101
102
103

Use the command:

104
```shell
105
106
107
108
109
110
nativefier -n ayushsharma -p linux -a x64 --width 1024 --height 768 --tray --disable-dev-tools --single-instance https://ayushsharma.in

cd ayushsharma-linux-x64
chmod +x ayushsharma
```

Ayush Sharma's avatar
Ayush Sharma committed
111
## Creating app for findmymastodon.com
112
113
114

And finally, I'll create an app for my pet project, [findmymastodon.com](https://findmymastodon.com).

115
{% include article-image.html src="2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier-findmymastodon-com.png" width="1024" height="768" alt="findmymastodon.com on Ubuntu 20.04 as a native Linux app." %}
116
117
118

Use the command:

119
```shell
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
nativefier -n findmymastodon -p linux -a x64 --width 1024 --height 768 --tray --disable-dev-tools --single-instance https://findmymastodon.com

cd findmymastodon-linux-x64
chmod +x findmymastodon
```

## Creating Linux desktop icons

With our apps created and the executables ready-to-go, we can create desktop icons as well.

First, download the icons for [Notion](https://icons8.com/icons/set/Notion), [Mastodon](https://icons8.com/icons/set/mastodon), [ayushsharma.in](https://ayushsharma.in/static/images/meta/favicon/apple-touch-icon.png), and [findmymastodon.com](https://findmymastodon.com/static/images/favicon/apple-touch-icon.png). Place each icon in its Nativefier app directory as `icon.png`. Then, create the following `.desktop` files.

`Notion.desktop`

```ini
[Desktop Entry]
Type=Application
Name=Notion
Path=/home/my-linux-user/NativeApps/Notion-linux-x64
Exec=/home/my-linux-user/NativeApps/Notion-linux-x64/Notion
Icon=/home/my-linux-user/NativeApps/Notion-linux-x64/icon.png
```

`Mastodon.desktop`

```ini
[Desktop Entry]
Type=Application
Name=Mastodon
Path=/home/my-linux-user/NativeApps/Mastodon-linux-x64
Exec=/home/my-linux-user/NativeApps/Mastodon-linux-x64/Mastodon
Icon=/home/my-linux-user/NativeApps/Mastodon-linux-x64/icon.png
```

`ayushsharma.desktop`

```ini
[Desktop Entry]
Type=Application
Name=ayushsharma
Path=/home/my-linux-user/NativeApps/ayushsharma-linux-x64
Exec=/home/my-linux-user/NativeApps/ayushsharma-linux-x64/ayushsharma
Icon=/home/my-linux-user/NativeApps/ayushsharma-linux-x64/icon.png
```

`findmymastodon.desktop`

```ini
[Desktop Entry]
Type=Application
Name=findmymastodon
Path=/home/my-linux-user/NativeApps/findmymastodon-linux-x64
Exec=/home/my-linux-user/NativeApps/findmymastodon-linux-x64/findmymastodon
Icon=/home/my-linux-user/NativeApps/findmymastodon-linux-x64/icon.png
```

Ayush Sharma's avatar
Ayush Sharma committed
176
You can now move the `.desktop` files to your Linux desktop and see your linux apps all lined up :)
177

178
{% include article-image.html src="2021-10-10-make-linux-apps-for-notion-mastodon-webapps-using-nativefier-desktop-icons.png" width="1024" height="768" alt="Linux app icons for Notion, Mastodon, ayushsharma.in, and findmymastodon.com." %}
179
180
181

## Conclusion

Ayush Sharma's avatar
Fix    
Ayush Sharma committed
182
Well wasn't that fun :) Nativefier might be the tool we've all been looking for. I know I have. My favourite feature is that once I log in to Notion or Mastodon I don't have to log in again! Nativefier runs Chromium underneath. So it's able to remember your session and works like it would in a regular browser. I have no idea if this is true or not. But at least that's how I think it works, which is enough for now :)
183

Ayush Sharma's avatar
Ayush Sharma committed
184
Special thanks to the Nativefier team for taking my Ubuntu one step closer to perfection :)