Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
Add new tutorial draft #412
Conversation
caldav
added
the
Don't merge
label
Nov 14, 2017
webteam-app
commented
Nov 14, 2017
|
Starting demo at: http://tutorials.ubuntu.com-pr-412.run.demo.haus/ |
caldav
added some commits
Nov 14, 2017
caldav
requested a review
from
evilnick
Nov 14, 2017
caldav
added some commits
Nov 14, 2017
| +## Overview | ||
| +Duration: 1:00 | ||
| + | ||
| +Turning your website into a desktop integrated app is a relatively simple thing to do, but distributing it as such and making it noticeable in app stores is another story. This tutorial will show you how to leverage Electron and snaps to create a website-based desktop app from scratch and publish it on a multi-million users app store shared between many Linux distributions. |
evilnick
Nov 14, 2017
Contributor
publish it on a multi-million user
Also, do we want to say 'app store', I think just 'store would do fine
| +cd app | ||
| +``` | ||
| + | ||
| +With the `npm` command, we can install electron and electron-builder inside the current directory. They will provide the framework and tooling to build our app binary. |
evilnick
Nov 14, 2017
Contributor
I get that 'electron' here is used as the name of the package - maybe it would make more sense to italicise these?
| +summary: Destroy your opponent's castle to win! | ||
| +description: | | ||
| + Play online or against a bot, click and drag cards to your side of the field | ||
| + to deploy powerful building and units to attack your ennemy. |
| + plugin: nodejs | ||
| +``` | ||
| + | ||
| +A part needs a `source`, to declare where to pull its code from, relatively to our project directory. In this case: `app/`. |
| + | ||
| +A part needs a `source`, to declare where to pull its code from, relatively to our project directory. In this case: `app/`. | ||
| + | ||
| +The `plugin` is the type of part we are building: it's a `nodejs` app. Which means snapcraft will use `nodejs` when building the snap, and bundle it (among other related dependencies) in the final snap package. |
| +summary: Destroy your opponent's castle to win! | ||
| +description: | | ||
| + Play online or against a bot, click and drag cards to your side of the field | ||
| + to deploy powerful building and units to attack your ennemy. |
| + | ||
| +### Icon and desktop file | ||
| + | ||
| +The last bit of packaging we need is an icon and a `<app>.desktop` file so desktop environments recognize our app as such. The icon and the desktop file will be picked up by snapcraft and handled accordingly by putting them in a `snap/gui/` directory. |
evilnick
Nov 14, 2017
Contributor
you can either have "so desktop environments will" or "so that desktop environments..."
| + | ||
| +Some details about the output you are now looking at: | ||
| + | ||
| +1. The container is created (if it's the first time you create an Ubuntu 16.04 container on this computer, an Ubuntu image is downloaded as part of the process) |
evilnick
Nov 14, 2017
Contributor
doesn't codelabs support proper markdown lists? These should all be '1.'
caldav
added some commits
Nov 14, 2017
caldav
removed
the
Don't merge
label
Nov 14, 2017
| + | ||
| +### Icon and desktop file | ||
| + | ||
| +The last bit of packaging we need is an icon and a `<app>.desktop` file so that desktop environments recognize our app as such. The icon and the desktop file will be picked up by snapcraft and handled accordingly by putting them in a `snap/gui/` directory. |
| + | ||
| +Positive | ||
| +: **What does `--dangerous` mean?** | ||
| +The `--dangerous` flag indicates that you are acknowledging that this snap could be unsafe to install, this is necessary when the snap didn't went through store security checks. Since you are the developer of the snap, you know it's safe, but the snap command doesn't and would prevent the install if you omitted the flag. |
| + | ||
| +## What next? | ||
| + | ||
| +What a journey! If this is the first time you installed a snap or created a LXD container, you may have realized that most of the time spent in this tutorial was looking at downloads! When the tools have been used once, things get much faster, since most of them don't have to be installed or initialized anymore. |
| +* **nodejs**: A JavaScript runtime, that will also provide the `npm` command we are going to use | ||
| + | ||
| +```bash | ||
| +sudo apt install curl build-essential libgconf2-4 |
elopio
Nov 14, 2017
libgconf2-4 is the only one not explained. I'm left wondering what is it for, so it might be better to explain all of them above.
| + | ||
| +```bash | ||
| +npm install electron --save-dev --save-exact | ||
| +npm install electron-builder --save-dev |
caldav
Nov 14, 2017
•
Edited 1 time
-
caldav
Nov 14, 2017
Contributor
Edited 1 time
-
Nov 14, 2017
That's odd, build-essential should have installed make and g++.
| +## Electron metadata (package.json) | ||
| +Duration: 2:00 | ||
| + | ||
| +Now that we have a working app, we need to turn it into an executable file. To do this, we are going to use a dependency we installed earlier: electron-builder. To build the executable, it requires a `package.json` file containing some basic metadata. |
elopio
Nov 14, 2017
This is a little slow to read. What about:
Now that we have a working app, we are going to turn it into an executable file using a dependency we installed earlier: electron-builder.
| +} | ||
| +``` | ||
| + | ||
| +As you can see, all entries are self-explicit. We have a name, a version, the location of our app, how to start the app using the `electron` command and instructions to build a linux executable without packaging (`dir` stands for `directory`). |
| +Then we need to provide the following information: | ||
| + | ||
| +* **The command (or commands) to build the app**: | ||
| + Since we are using electron-builder and simply calling `electron-builder` in the project will pick up details from our `package.json` file and generate an executable. |
| + | ||
| +### Let's recap | ||
| + | ||
| +We have added general metadata to ensure our app appears correctly in stores and parts to ensure it bundles our executable and its dependencies in a confined package. But we are still missing one very important bit: the launcher. |
| + | ||
| +## Launcher and desktop integration | ||
| + | ||
| +To launch the app, the snap needs to know which command to run. This is done within an `apps` section in the `snapcraft.yaml`, where we are going to declare: the name of the app, the command to run and which access we want the app to be granted outside of the snap confinement. |
| +```yaml | ||
| +apps: | ||
| + castlearena: | ||
| + command: env TMPDIR=$XDG_RUNTIME_DIR desktop-launch $SNAP/app/castlearena |
elopio
Nov 14, 2017
This XDG_RUNTIME_DIR should probably be explained. I have no idea what it does there.
| + | ||
| +### Icon and desktop file | ||
| + | ||
| +The last bit of packaging we need is an icon and a `<app>.desktop` file so that desktop environments recognize our app as such. The icon and the desktop file will be picked up by snapcraft and handled accordingly by putting them in a `snap/gui/` directory. |
elopio
Nov 14, 2017
•
Edited 1 time
-
elopio
Nov 14, 2017
Edited 1 time
-
Nov 14, 2017
I think it should be "an <app>.desktop file", but maybe @kyrofa can confirm.
| +1. snapcraft pulls the source of each part | ||
| +1. ...and downloads all the required dependencies | ||
| +1. Each part is built following our instructions | ||
| +1. Snapcraft creates a staging directory where the content of our snap is curated based on instructions and parts plugin declarations |
| +1. ...and downloads all the required dependencies | ||
| +1. Each part is built following our instructions | ||
| +1. Snapcraft creates a staging directory where the content of our snap is curated based on instructions and parts plugin declarations | ||
| +1. The staging directory is packed into a snap |
| + | ||
| +`castlearena_0.1_amd64.snap` | ||
| + | ||
| +Congrats, you made a snap! |
| + | ||
| +```bash | ||
| +sudo apt install curl build-essential libgconf2-4 | ||
| +curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash - |
elopio
Nov 14, 2017
Wait for the awesome node snap! nodejs/installer#54
(leave your thumbs up in there :)
| + `snap try squashfs-root` will mount the directory as if it was an installed snap. | ||
| + You can then run the snap and edit its content at the same time. | ||
| +* Enter a shell with the same confinement as the snap to inspect its environment, paths, and see what it sees: | ||
| + `snap run --shell <snap>` |
|
Thanks all! |
caldav
merged commit 1399068
into
master
Nov 15, 2017
3DJetengine
commented
Nov 16, 2017
•
Edited 1 time
-
3DJetengine
Nov 16, 2017
Edited 1 time
-
Nov 16, 2017
|
@caldav is there any chance - when you say:
we could link to https://linuxjourney.com/ - command line as a ubu.one link or an ubuntu link ? all of the links seem to remain in-house. |
caldav
deleted the
packaging-website
branch
Dec 19, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
caldav commentedNov 14, 2017
•
Edited 3 times
-
caldav
Nov 14, 2017
-
caldav
Nov 14, 2017
-
caldav
Nov 14, 2017
This is a draft.How to snap a website with Electron. Ready for review.
Demo: http://tutorials.ubuntu.com-pr-412.run.demo.haus/tutorial/snap-a-website
Note that this tutorial is not relying on the electron-builder snap integration since it doesn't use cleanbuild and produces broken snaps on 17.10.